はじめに
こんにちは、Gakken LEAP のバックエンドエンジニアの mizuno です。
Vue CLIで開発したシングルページアプリケーション(SPA)をApacheサーバーにデプロイして動作確認を行った際、ブラウザのリロードがうまくいかず、404エラーが発生するという問題に直面しました。
今回は、私が直面した問題の詳細と、どのように.htaccess
で解決したかを、初心者の方にも分かりやすく解説していきます。
.htaccess
ファイルとは?
.htaccess
ファイルは、Apacheの設定をディレクトリごとに変更するためのファイルです。
このファイルを使うことで、特定のディレクトリに対して、URLの書き換え、アクセス制限、カスタムエラーページの設定など、さまざまなカスタマイズを行うことができます。
うまくいかなかった理由
問題の原因は、Vue Routerの設定をHistoryモードに設定しており、サーバーサイド(Apache)はURLに対応する実際のファイルやディレクトリが存在しない場合に404エラーを返すためです。
例えば、/about
や/contact
といったページにリクエストが送られると、サーバーはそのパスに該当するファイルを見つけられずエラーを返していました。
解決策と対応
Vue Routerの設定をURLに#
が入るHashモードであれば、問題なく動作するのですが、Historyモードで動作させたい場合はリダイレクト設定を適用します。
この問題を解決するためには、Apacheがすべてのリクエストをindex.html
に渡すようにする必要があります。
できれば、httpd.conf
に設定を記載したいところですが、レンタルサーバーでの実装だったため.htaccess
で行いました。
これを実現するのが以下の.htaccess
設定です。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
-
<IfModule mod_rewrite.c> ~ </IfModule>
- このブロック内の設定は、Apacheのmod_rewriteモジュールが有効になっている場合にのみ適用されます。このモジュールは、URLの書き換えを行うために必須です。
-
RewriteEngine On
- URL書き換え機能を有効にします。
-
RewriteBase /
- URL書き換えのベースとなるディレクトリを指定します。この例では、現在のディレクトリをベースとしています。
-
RewriteRule ^index.html$ - [L]
- index.htmlへの直接アクセスを許可します。[L]フラグは、以降のルールへの処理を中断します。
-
RewriteCond %{REQUEST_FILENAME} !-f
- 存在しないファイルへのリクエストでないことを確認します。
-
RewriteCond %{REQUEST_FILENAME} !-d
- 存在しないディレクトリへのリクエストでないことを確認します。
-
RewriteRule . /index.html [L]
- 上記の条件を満たす場合、すべてのリクエストを
index.html
にリダイレクトします。これにより、SPAのルーティングが機能し、ブラウザのリロード時にページ全体が再読み込みされることなく、Vueアプリが正常に動作します。
- 上記の条件を満たす場合、すべてのリクエストを
この.htaccess
の設定により、以下のことが実現されます。
- SPAのルーティング
- ブラウザが直接ファイルやディレクトリを要求した場合でも、
index.html
にリダイレクトすることで、Vue Routerなどのルーティングシステムが働き、SPAとして動作します。
- ブラウザが直接ファイルやディレクトリを要求した場合でも、
まとめ
Vue CLIで作成したSPAをApacheで動かすには、適切なリダイレクト設定が必要です。
この設定により、リロード時でもindex.html
にリダイレクトされ、Vue Routerのルーティングが正しく機能します。
-
.htaccess
の設定は、サーバー環境やプロジェクトの構成によって異なる場合があります。 -
.htaccess
の書き換えミスは、Webサイトにアクセスできなくなる可能性があるため、十分に注意してください。
エンジニア募集
Gakken LEAP では教育をアップデートしていきたいエンジニアを募集しています。
ぜひカジュアル面談でお話できればと思います。
https://gakken-leap.co.jp/recruit/