Github PagesにReactアプリをデプロイして404エラーが発生した場合の対策

2024-11-19

簡単なreactアプリを作って、Github Pagesにデプロイ。機能を追加するためReact Routerを使って設定画面を追加してデプロイしたら、404エラーが発生したので対策しました。

原因

GitHub Pagesは、サーバーサイドのルーティングをサポートしていないため、クライアントサイドのルーティングを使用するReact Routerのアプリケーションで直接URLにアクセスすると404エラーが発生します。

例えば、https://username.github.io/appname/settingsにアクセスしようとしても、settingsが存在しないので404エラーになります。

対策

404.htmlの追加

GitHub Pagesは、404.htmlがあるとそれを404エラーページとして返します。これを利用して404.htmlのhttp-equiv="refresh"でindex.htmlにリダイレクトします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>404 Not Found</title>
    <!-- ↓ リダイレクト -->
    <meta http-equiv="refresh" content="0; URL='./index.html'" /> 
  </head>
  <body>
    <p>Redirecting...</p>
  </body>
</html>

basenameの設定

ただ、これだけだとリダイレクトが https://username.github.io/appname/settings ではなくhttps://username.github.io/settings になって正常に動作しません。

対策として、basenameを設定することで、アプリケーションがサブディレクトリにデプロイされる場合でも正しく動作するようにします。

createBrowserRouter(<router>, {
  basename: <appname>,
});

まとめ

この対策を行うことで、GitHub PagesでReact Routerを使用するアプリが正しく動作するようになりました。