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

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をデプロイする際は、ぜひこの方法を試してみてください！