Laravel+Vite+Vue3 でbuildすると本番環境でapp.*ファイルをlocalhostへ読み込みに行ってしまう

Question

前提

Laravel9 + Sail + Vite + Vue3の環境になります。
開発PCはWindows＋WSL2（Ubuntu22.04.1 LTS）です。

Laravel9+VueをSail環境でViteでコンパイル？しています。
ローカル環境では全く問題なくVue3＋Apiで動作しています。

Vueは関係ないと思いますが一応環境として記載させていただきました。

WSL2側のhome内にプロジェクトを作成しています。

sail npm run dev

は全く問題なくホットリロードも動作します。

しかし本番用に

sail npm run build

を実行しますとviteが走ってコンパイルは問題なく完了します。

buildしたものを本番環境（XServerスタンダード）へアップすると真っ白画面。
デベロッパーツールでネットワークをチェックすると、
ソースで言う

@vite(['resources/css/app.css', 'resources/js/app.js'])

の部分で

clientが「http://localhost:5173/@vite/client」
app.cssが「http://localhost:5173/resources/css/app.css」
app.jsが「http://localhost:5173/resources/js/app.js」
を見に行ってしまっている事がわかりました。

ローカル用のホスト？がそのまま記述されてしまっているのは想像がつきました。
実行されない原因自体はわかりましたが、Viteでbuildするに当たり、ルートのvite.config.jg、
もしくはLaravel側のconfig内のvite.php後は.envファイルのVITE関係の設定、どれかかな？とは思いますが、どうしていいやらわかりません。

実は一番最初の時点ではアップロードして表示されてたのでどこかを触ったのかと思いますが2日間あれこれやってみましたが力尽きました。

Viteを使用したプロジェクトが初めてなので私の中での情報量が少なく、最悪プロジェクト作成からやり直そうかとは思いますが、現状でチェックするところを指示いただけないかと思いまして質問しました。

よろしくお願いいたします。

追記：
最初の時点では表示されていたと書きましたが本当は表示されていなかった事がわかりました。
同じ様にlocalhost:5173へアクセスしていたのですが開発サーバーを立ち上げた状態でチェックしたために読み込めてしまって表示されていたようです。

Comments

[slemntqe]

「2日間あれこれやってみました」試した内容を具体的に追記して下さい。回答しても「既に試していますがダメでした」と言われると時間の無駄になるので。

Answer 1

自己解決しました。

sail npm run dev

でホットリロードを有効にしているとpublicフォルダ内にhotファイルが作成される事がわかりました。

でそのまま別タブで

sail npm run build

を行うと実行できます。

XSERVERを使っていますがローカルのpublicフォルダをサーバー上のpublicフォルダにFTPでアップしているので、サーバー上にもhotファイルがアップロードされていました。

hotファイルはnpm run devを終了させると自動で削除されるのですが、起動させっぱなしだとhotファイルが残ったままでそのままアップされて、サーバ上でhotファイルがあるので参照してしまっていたようです。

hotファイルを削除することで正しくapp.jsやapp.csが読み込まれて動作いたしました。

解決はしましたが、私の開発環境？開発方法？が普通とは違うのでしょうか？
普通はnpm run devを必ず終了させてbuildを行ってアップしているものなのか？
そもそも論がソースだけアップしてSSHとかで繋いでサーバー上でbuildしているのか？

この辺が私にはわかりませんが・・・

とりあえず解決できました。

slemntqe様が何をしたのかを書くようおっしゃったので、それを書くつもりであちこちのフォルダを眺めていて気が付きました。

ありがとうございました。