React初心者のわたし。ドキドキで本番環境へビルド。意外と動作するのでほっと胸をなでおろしていた。
ところがURL直打ちやリロードをすると404 not foundが返される。
解決した方法をときメモ。
まず、.htaccess ファイルで設定したリダイレクトがどのように機能しているのかを深く理解するために、以下のポイントを振り返る。
1. リダイレクトの仕組み
# すべてのリクエストをindex.htmlにリダイレクトする
# ただし、既存のファイルやディレクトリへのアクセスはそのまま許可
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]
今回は上記の設定で解決した。.htaccess ファイルに記述した設定は、URLリクエストの処理に影響を与える。設定内容としては、index.html にリダイレクトする条件が書かれている。これはリクエストがサーバーに到達する際の処理であり、クライアントサイドのルーティング（React Routerなど）とは異なる動作をする。
2. リクエストとサーバーの役割
-
最初のリクエスト（初期アクセス）: たとえば、ユーザーが
http://192.168.1.xxx/testというURLにアクセスすると、ApacheサーバーはそのURLに対応するファイルを探しにいく。 -
ファイルが存在しない場合:
/testに対応するファイルやディレクトリが存在しないときに、.htaccessの設定が適用される。今回の場合だと、RewriteCond %{REQUEST_FILENAME} !-fとRewriteCond %{REQUEST_FILENAME} !-dがマッチし、RewriteRule ^ index.html [L]により、リクエストはindex.htmlにルーティングされる。
3. リダイレクトと表示の違い
-
リダイレクト:
RewriteRule ^ index.html [L]の設定は、サーバーがリクエストを処理する方法で、存在しないファイルやディレクトリへのリクエストがindex.htmlで応答されるようになるが、クライアントサイドでの表示やルーティングには影響しない。 -
クライアントサイドのルーティング:
index.htmlが読み込まれた後、React Router が実際のページの表示を管理する。index.htmlがブラウザに表示されると、React Router がURLに基づいて適切なコンポーネントをレンダリングしてくれる。便利。
4. リロードとブラウザの動作
-
直接アクセス: ユーザーが
/testというURLにアクセスすると、サーバーは.htaccess設定に従いindex.htmlを返す。 -
リロード: ブラウザでページをリロードしても、サーバーは再び
index.htmlを返し、その後、React Router がURLに基づいて適切なコンポーネントを表示する。このおかげでユーザーがリロードしても、/testの内容が維持されるしくみ。
5. まとめ
-
.htaccessで設定したリダイレクトは、URLに対するリクエストの処理をサーバーサイドで制御するもので、リクエストに対してindex.htmlを返すことが目的となる。 - リダイレクトといっても、なんでもかんでも
index.htmlが表示されるわけではなく、React アプリケーションがその後のルーティングを制御してくれて正しいコンポーネント（例:/test）を表示してくれる。
React初心者のわたしを絶望の淵から助けてくれたのは .htaccess だった。結果的にはうれしいけど、検証中はブラウザキャッシュのせいで無駄に時間を使ってしまって苦労した・・・。おしまい。