質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

Vue.js+Laravelアプリをxserverにデプロイすると、ローカル環境では動いていたアプリが真っ白になって表示されない

soso0programmer
soso0programmer

総合スコア34

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

2回答

0グッド

0クリップ

701閲覧

投稿2022/11/08 12:23

編集2022/11/10 11:26

前提

現在、Vue.js+Laravelのアプリをローカル環境で作成したアプリをxserverにデプロイしようとしています。

ローカル環境では問題なく動いていたアプリが本番環境に上げるとうまく動作しません。
もし原因をご存じの方がいらっしゃいましたらご教授願います。

本番URL:http://personal-development-contest.com/todolist/

エラー内容といたしましては、以下の画像のようにServer Error 500と出ています。
イメージ説明

関係がありそうなファイルのソースコードを添付いたします。

app.js

1require('./bootstrap'); 2 3import { createApp } from 'vue' 4import App from './vue/app' 5import { library } from '@fortawesome/fontawesome-svg-core' 6import { faPlusSquare, faTrash } from '@fortawesome/free-solid-svg-icons' 7import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 8 9library.add(faPlusSquare, faTrash) 10 11export const eventBus = createApp(App) 12createApp(App) 13 .component("font-awesome-icon", FontAwesomeIcon) 14 .mount('#app');

Package.json

1{ 2 "private": true, 3 "scripts": { 4 "dev": "npm run development", 5 "development": "mix", 6 "watch": "mix watch", 7 "watch-poll": "mix watch -- --watch-options-poll=1000", 8 "hot": "mix watch --hot", 9 "prod": "npm run production", 10 "production": "mix --production" 11 }, 12 "devDependencies": { 13 "@vue/compiler-sfc": "^3.2.33", 14 "axios": "^0.21", 15 "laravel-mix": "^6.0.6", 16 "lodash": "^4.17.19", 17 "postcss": "^8.1.14", 18 "vue-template-compiler": "^2.6.14" 19 }, 20 "dependencies": { 21 "@fortawesome/fontawesome-svg-core": "^6.1.1", 22 "@fortawesome/free-solid-svg-icons": "^6.1.1", 23 "@fortawesome/vue-fontawesome": "^3.0.0-5", 24 "vue": "^3.2.41", 25 "vue-loader": "^17.0.0" 26 } 27}

webpack.mix.js

1const mix = require('laravel-mix'); 2 3/* 4 |-------------------------------------------------------------------------- 5 | Mix Asset Management 6 |-------------------------------------------------------------------------- 7 | 8 | Mix provides a clean, fluent API for defining some Webpack build steps 9 | for your Laravel applications. By default, we are compiling the CSS 10 | file for the application as well as bundling up all the JS files. 11 | 12 */ 13 14mix.js('resources/js/app.js', 'public/js').vue() 15 .postCss('resources/css/app.css', 'public/css', [ 16 // 17 ]).vue();

npm run prod で本番ビルドまではできたのですが、表示されませんでした。
以上です。
宜しくお願いいたします。

補足情報(FW/ツールのバージョンなど)

PHP 8.1.2
Laravel 8
参考動画:https://youtu.be/UHSipe7pSac

追記
初心者すぎて申し訳ないのですが、本番DBとの接続ができていませんでした・・・
本番DBと接続後、エラー内容が変わったので添付いたします。
原因は調査中&エラーログの確認中です。
イメージ説明

エラーログ

error.log

1[Wed Nov 09 04:34:11.927849 2022] [core:error] [pid 394359:tid 394867] [client 193.235.141.173:53138] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace. 2[Wed Nov 09 04:34:11.927878 2022] [core:error] [pid 394359:tid 394867] [client 193.235.141.173:53138] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace. 3[Wed Nov 09 04:34:12.805935 2022] [core:error] [pid 394359:tid 394887] [client 193.235.141.173:53316] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace. 4[Wed Nov 09 04:34:12.805964 2022] [core:error] [pid 394359:tid 394887] [client 193.235.141.173:53316] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace. 5[Wed Nov 09 06:51:37.110650 2022] [core:error] [pid 394357:tid 394791] [client 194.36.97.195:55806] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace. 6[Wed Nov 09 06:51:37.110673 2022] [core:error] [pid 394357:tid 394791] [client 194.36.97.195:55806] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace. 7[Wed Nov 09 08:13:28.443358 2022] [core:error] [pid 408782:tid 409077] [client 124.209.133.129:46756] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/ 8[Wed Nov 09 08:13:28.443384 2022] [core:error] [pid 408782:tid 409077] [client 124.209.133.129:46756] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/ 9[Wed Nov 09 08:13:53.335477 2022] [core:error] [pid 408781:tid 409266] [client 124.209.133.129:55124] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/ 10[Wed Nov 09 08:13:53.335507 2022] [core:error] [pid 408781:tid 409266] [client 124.209.133.129:55124] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/ 11[Wed Nov 09 08:14:31.681095 2022] [core:error] [pid 408783:tid 409018] [client 124.209.133.129:38472] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/ 12[Wed Nov 09 08:14:31.681112 2022] [core:error] [pid 408783:tid 409018] [client 124.209.133.129:38472] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/ 13[Wed Nov 09 08:14:33.384783 2022] [core:error] [pid 408781:tid 409029] [client 124.209.133.129:39096] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/ 14[Wed Nov 09 08:14:33.384829 2022] [core:error] [pid 408781:tid 409029] [client 124.209.133.129:39096] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/ 15[Wed Nov 09 08:14:50.373502 2022] [core:error] [pid 408783:tid 408925] [client 124.209.133.129:43942] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/ 16[Wed Nov 09 08:14:50.373519 2022] [core:error] [pid 408783:tid 408925] [client 124.209.133.129:43942] AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace., referer: https://personal-development-contest.com/todolist/

追記2
開発者ツールを開いた状態で更新した場合
イメージ説明

追記3

<IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews -Indexes </IfModule> RewriteEngine On   **RewriteBase /todolist** # Handle Authorization Header RewriteCond %{HTTP:Authorization} . RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] # Redirect Trailing Slashes If Not A Folder... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} (.+)/$ RewriteRule ^ %1 [L,R=301] # Send Requests To Front Controller... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L] </IfModule>

追記
webpack.mix.jsに以下のソースコードを追加してもダメでした。
mix.setResourceRoot('/todolist/');

補足情報として以下の画像のようにシンボリックリンクを設定しています。
イメージ説明

public_htmlのあとに/todolist/を追加している理由はxserverだとうまく設定できないからです。
参考URL:https://brainlog.jp/programming/laravel/post-1287/

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

CHERRY

2022/11/08 12:55 編集

おそらく Laravel 側で、500エラーが出ていると思われます。 https://www.xserver.ne.jp/manual/man_server_logerror.php の手順で、エラーログにどのようなメッセージが記録されているか確認して、エラーログに記録されているメッセージを質問に追記していただけないでしょうか。
soso0programmer

2022/11/09 02:51

コメントありがとうございます。 実際にエラーログを確認したいと思います。
soso0programmer

2022/11/09 03:03

エラーログを追加いたしました。 先ほど、本番環境DBとの接続を行ったところError内容が変わりましたので添付いたしました。

回答2

0

自己解決

自己解決いたしました!

<script src="{{ mix('js/app.js') }}"></script>

<script src="{{ url(mix('js/app.js')) }}"></script>

にしてパスを絶対パスに変更することで解決することができました!

ここまで付き合ってくださいましたCHERRYさん、ありがとうございました!

welcom.blade.php

1<!DOCTYPE html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <title>Laravel</title> 9 10 <!-- Fonts --> 11 <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet"> 12 13</head> 14 15<body> 16 <div id="app"> 17 <app></app> 18 </div> 19 20</body> 21<script src="{{ url(mix('js/app.js')) }}"></script> 22 23</html>

投稿2022/11/11 09:25

soso0programmer

総合スコア34

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

とりあえず、 Apache のエラーの方だけ...

AH00124: Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace.

は、リダイレクトが 10回のリミットを超えたというエラーです。

Laravel sends the server on 10 redirects? の回答と同じように .htaccess の中で、 RewriteEngine On の次あたりで、 RewriteBase を設定すると解消しないでしょうか。

RewriteBase /todolist

投稿2022/11/09 10:37

CHERRY

総合スコア24706

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

soso0programmer

2022/11/09 11:14

回答ありがとうございます。 本番DBと接続した後は、上記のエラーは解消されていたようでエラーログにも出力されていませんでしたので上記のエラー内容は解消されたと思われます。 一応念のために、追記に記載しましたように追加しましたがInternal Server Error 500と画面に表示されました。 やはり404エラーが原因で表示されないようです。 パスがローカルと本番で違うことが原因でapp.jsが読み込めていないと思うのですが、原因調査中です・・・
CHERRY

2022/11/09 11:35

状況が変わった件、了解です。 サブディレクトリにデプロイしたのであれば、/todolist/js/app.js になると思うのですが...
soso0programmer

2022/11/10 11:29

サブディレクトリに直接デプロイしたわけではなく、追記で記載しましたようにシンボリックリンクを設定しています。 シンボリックリンク自体の設定は問題ないと思うのですがどうでしょうか・・・ laravel mixをした際にサブディレクトリを追加する記述を書いてコンパイルしてみたのですがうまくいきませんでした・・・

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。