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

Question

前提

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

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

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

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

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

require('./bootstrap');

import { createApp } from 'vue'
import App from './vue/app'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlusSquare, faTrash } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faPlusSquare, faTrash)

export const eventBus = createApp(App)
createApp(App)
    .component("font-awesome-icon", FontAwesomeIcon)
    .mount('#app');

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.2.33",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue-template-compiler": "^2.6.14"
    },
    "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/free-solid-svg-icons": "^6.1.1",
        "@fortawesome/vue-fontawesome": "^3.0.0-5",
        "vue": "^3.2.41",
        "vue-loader": "^17.0.0"
    }
}

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue();

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

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

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

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

エラーログ

[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.
[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.
[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.
[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.
[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.
[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.
[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/
[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/
[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/
[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/
[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/
[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/
[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/
[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/
[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/
[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/

Comments

[CHERRY]

おそらく Laravel 側で、500エラーが出ていると思われます。

https://www.xserver.ne.jp/manual/man_server_logerror.php の手順で、エラーログにどのようなメッセージが記録されているか確認して、エラーログに記録されているメッセージを質問に追記していただけないでしょうか。

[soso0programmer]

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

[soso0programmer]

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

Answer 1

自己解決いたしました！

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

を

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

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

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

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

</head>

<body>
    <div id="app">
        <app></app>
    </div>

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

</html>

Answer 2

とりあえず、 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

Comments

[soso0programmer]

回答ありがとうございます。
本番DBと接続した後は、上記のエラーは解消されていたようでエラーログにも出力されていませんでしたので上記のエラー内容は解消されたと思われます。
一応念のために、追記に記載しましたように追加しましたがInternal Server Error 500と画面に表示されました。

やはり404エラーが原因で表示されないようです。
パスがローカルと本番で違うことが原因でapp.jsが読み込めていないと思うのですが、原因調査中です・・・

[CHERRY]

状況が変わった件、了解です。

サブディレクトリにデプロイしたのであれば、/todolist/js/app.js になると思うのですが...

[soso0programmer]

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