直面した問題
環境
- WLS2 (その後 Mac でも実施)
- Vue – アセットの構築（Vite） 9.x Laravel のところまで設定を進めた。
npm run prod の場合は、静的ファイルを書き出してそのファイルへのリンクを HTML ファイルへ埋め込むようになっています。よって、ビルドされたファイルへのリンクは Laravel へアクセスするときの Apache なり Nginx なり PHP ビルトインサーバなりの URL と同じ URL が埋め込まれ、この URL でアクセスできるため問題はありません。
一方で、 npm run dev の場合は、 Vite の開発サーバが別途立ち上がります。そして Vite でビルドされたファイルへアクセスするための埋め込みリンクは、 Vite の開発サーバの URL となります。
Docker を使う場合、 Docker ホスト側から Docker コンテナ内の Vite 開発サーバへどうやってアクセスするのかが、問題になりました。
例えば、カスタマイズしていない vite.config.js で npm run dev すると次のようになります。
- URL は次のように表示された。
- VITE ➜ Local: http://localhost:5173/
- LARAVEL ➜ APP_URL: http://localhost
- Docker ホストにて、ウェブブラウザで
http://localhost/にアクセスすると画面真っ白になった。 - ページのソースコードを見てみると、 Vite でビルドされたファイルへのリンクは
<script type="module" src="http://127.0.0.1:5173/resources/js/app.js"></script>となっていた。この URL にアクセスしてみても ERR_CONNECTION_REFUSED のエラーページとなった。 - Docker コンテナの port に "5173:5173" を追加し、再度 http://127.0.0.1:5173 へのアクセスを試したところ、異なるエラー ERR_EMPTY_RESPONSE となったもののやはりエラーページとなった。
今回、これを解決しましたのでメモいたします。