Vue CLIアプリをApacheで動かすためのhtaccess設定

本記事は2024年09月19日に執筆したものです。所属会社のTech Blogプラットフォーム移行に伴い、当該記事を他プラットフォームから移行しました。

---

はじめに

こんにちは、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のルーティングが正しく機能します。

:::note warn

• .htaccessの設定は、サーバー環境やプロジェクトの構成によって異なる場合があります。
• .htaccessの書き換えミスは、Webサイトにアクセスできなくなる可能性があるため、十分に注意してください。
  :::

エンジニア募集

Gakken LEAP では教育をアップデートしていきたいエンジニアを募集しています。
ぜひカジュアル面談でお話できればと思います。
https://gakken-leap.co.jp/recruit/

参考

• HTML5 History モード