Netlifyで「Page Not Found」403エラーが出る問題を解決する方法

2025年3月3日月曜日

Netlify react

t f B! P L

NetlifyでSPA(シングルページアプリケーション)などをデプロイした際に、ルートパス(/)以外のURLでリダイレクトやリロードをすると、「Page Not Found」の403エラーが表示されることがあります。この問題は、Netlifyのデフォルトの動作によるものですが、_redirects ファイルを設定することで簡単に解決できます。

403エラーの原因

Netlifyでは、リクエストされたURLに対応するファイルが存在しない場合、デフォルトで404エラーを返します。例えば、以下のような状況で問題が発生します。

  1. /dashboard に直接アクセスすると、dashboard/index.html が存在しないため「Page Not Found」エラーになる
  2. クライアントサイドルーティング(React RouterやVue Router)を使用している場合、/dashboard のリクエストを index.html に渡す必要があるが、それが設定されていない

_redirects ファイルをpublicフォルダに作る

この問題を解決するために、public フォルダに _redirects という名前のファイルを作成し、以下の内容を記述します。

/*    /index.html   200

上記ファイルの設定の意味は次の通り。

  • /* : すべてのリクエストを対象にする
  • /index.html : すべてのリクエストを index.html にリダイレクトする
  • 200 : HTTPステータスコード200を返す(リダイレクトではなく、そのままレスポンスを返す)

最後に、public/_redirects を含めた状態でNetlifyにデプロイします。

まとめ

NetlifyでSPAをホスティングする際に、ルート以外のパスで403エラーが発生する場合は、_redirects ファイルを設定することで解決できます。この設定を適用すれば、どのURLにアクセスしても index.html が適切にロードされ、クライアントサイドルーティングが機能するようになります。

Netlifyを使ってSPAをデプロイする際は、ぜひこの方法を試してみてください!

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ