Laravel と Vue を apache で起動した際にページ遷移ができない

いつもお世話になっております。

現在 Laravel と Vue.js と AWS を用いてポートフォリオを作成しています。EC2 にデプロイし apache で起動したところ、トップページには遷移するのですがページ遷移をした際に 404 エラーが出てしまいます。Vue router を用いて SPA 化してます。

表示される画面↓
https://gyazo.com/df509e4a7841360400f66755e522cfc2

#バージョン

amazon linux 2
Apache 2.4.46
PHP 7.3.26
Laravel Framework 6.20.16
vue@2.6.12

#試したこと

下記5点は試してみました。

###① /etc/httpd/conf 配下の httpd.conf ファイルの一番下に以下のコードを記述

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

####結果

Permission Error が表示される

https://gyazo.com/698b22b45fcb5097e4824f6102d3e9a3

参考
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
https://zenn.dev/moriso/articles/479928d6540c4963d7e0#3.vue-router%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B

② 先程の httpd.conf ファイルの文法をチェックし修正

$ apachectl configtest　のコマンドを用いて文法チェックを行ったところ、

AH00526: Syntax error on line 361 of /etc/httpd/conf/httpd.conf:
RewriteBase: only valid in per-directory config files

とのエラー表記を受けて、下記3パターンを実行

① RewriteBaseのみ削除

② RewriteBase のみを Directory セクションへ移動

<Directory "/var/www/アプリ名/public">
  AllowOverride All   
  RewriteBase /
</Directory>

③ Rewrite.. とある記述を Directory セクションへ移動

<Directory "/var/www/アプリ名/public">
    AllowOverride All
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
</Directory>

####結果
① を試した際には Forbidden エラーが出てしまい、トップページにすら飛べなくなる。

https://gyazo.com/698b22b45fcb5097e4824f6102d3e9a3

②③だとトップには飛べるが、ページ遷移はできない。

https://gyazo.com/df509e4a7841360400f66755e522cfc2

③ 全ての AllowOverride を All に変更

上述した Directory ディレクティブにも表記してますが、AllowOverride を All に変更してます。

参考 https://conocode.com/troubleshooting/laravel-not-found/

④ npm コマンドを使ってビルド

npm run dev
npm run watch
npm run prod

上記3点実行し、逐一 apache も再起動してますが、変化なし。

参考 https://qiita.com/takuohashimoto/items/e424a9c245ccf5030371

⑤ phpinfo()を用いて mod_rewrite が有効になっているかどうかを確認

① 下記サイトを参考に phpinfo()を実行し、/phpinfo.php にアクセス。

https://www.it-swarm.jp.net/ja/php/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7modrewrite%E3%81%8C%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/939941488/

② 「mod_rewrite」の表記を見つけられないので、httpd.conf（Apache Configファイル）を開き、次の行を検索するが見つからないので自分で追記。

LoadModule rewrite_module modules/mod_rewrite.so

③ apache を再起動し、検索してみるも見つからない。

###⑥ /var/www/アプリ名/public に.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>

個人的に気になった点なのですが、⑤を実行した際に文法確認をしたところ、

AH01574: module rewrite_module is already loaded, skipping
Syntax OK

との表示がされます。　

「rewrite_module の設定はすでに読み込まれてるのでスキップした」ということなのですが、自分では他に変更を加えた覚えはなく、httpd.confファイルを確認しても rewrite_module に関する記述は見つけられずにいます。

自分の確認不足、知識不足な点もあると思いますが、ご意見いただけると幸いです。
よろしくお願い致します。

行動規範の内容に同意します

回答1件

自己解決

⑥ /var/www/アプリ名/public に.htaccess を作成し以下を記述

こちらの

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.php [L]
</IfModule>

html を php に変えるとうまく行きました。
凡ミスでお恥ずかしい限りです。
お騒がせしました。

投稿2021/02/19 01:45

Take.Y

総合スコア12