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

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

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

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

Laravel

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

Q&A

解決済

1回答

3717閲覧

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

landy77

総合スコア1614

Vue.js

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

Laravel

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

0グッド

0クリップ

投稿2022/08/09 23:00

編集2022/08/10 02:30

前提

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

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

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

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

Terminal

1sail npm run dev

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

しかし本番用に

Terminal

1sail npm run build

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

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

index.blade.php(抜粋)

1@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へアクセスしていたのですが開発サーバーを立ち上げた状態でチェックしたために読み込めてしまって表示されていたようです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

slemntqe

2022/08/10 00:27 編集

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

回答1

0

自己解決

自己解決しました。

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

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

投稿2022/08/10 06:02

landy77

総合スコア1614

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問