5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2024-09-19

はじめに

こんにちは、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/

参考

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?