直面した問題
環境
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 となったもののやはりエラーページとなった。
今回、これを解決しましたのでメモいたします。