NetlifyでSPA(シングルページアプリケーション)などをデプロイした際に、ルートパス(/
)以外のURLでリダイレクトやリロードをすると、「Page Not Found」の403エラーが表示されることがあります。この問題は、Netlifyのデフォルトの動作によるものですが、_redirects
ファイルを設定することで簡単に解決できます。
403エラーの原因
Netlifyでは、リクエストされたURLに対応するファイルが存在しない場合、デフォルトで404エラーを返します。例えば、以下のような状況で問題が発生します。
/dashboard
に直接アクセスすると、dashboard/index.html
が存在しないため「Page Not Found」エラーになる- クライアントサイドルーティング(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をデプロイする際は、ぜひこの方法を試してみてください!
0 件のコメント:
コメントを投稿