WLS2 の Docker コンテナ内の Laravel9.2 Vite SPA 。 `npm run dev` 時に Docker ホストのウェブブラウザからコンテナ内の Vite 開発サーバに繋がるようにした記録

直面した問題

環境

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 となったもののやはりエラーページとなった。

今回、これを解決しましたのでメモいたします。

解決方法まとめ

vite.config.js の次を設定することで解決できました。

export default defineConfig({
    server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
    },
});

試行錯誤の記録

vite.config.js に server.host を追加しました。

export default defineConfig({
    server: {
        host: true,
    },
});

ドキュメントはこちら。

server.host – サーバオプション | Vite

すると、 http://127.0.0.1:5173/@vite/client などに Docker ホストのウェブブラウザからアクセスすると、 Vite 開発サーバへアクセスすることができました!

これで解決かと思いきや、 Laravel の URL である http://localhost/ へアクセスすると、依然として真っ白でした。ソースコードを表示してみると、 Vite のビルドファイルへのアクセス部分は <script type="module" src="http://[::]:5173/resources/js/app.js"></script> などとなっていました。

[::] が localhost になれば解決なのですが。。。

ちなみに、 Mac で後日試したところ、ここまでの設定で動きました。つまり、 [::] のまま、具体的には http://[::]:5173/@vite/client にアクセスができていました。しかしながら WLS2 の場合ですと、この状態ではアクセスできませんでした。おそらく localhost に接続するのに Windows → WLS2 とたらい回ししていると聞いたことがありますので、そこら辺の影響ではないかと思います。ですので、試行錯誤を続行する必要がございます。

さまざま試したところ、 vite.config.js に server.hmr.host を追加することで解決できました。

export default defineConfig({
    server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
    },
});

上記で解決できたのですが、このオプションがよくわかりません。公式ページの説明もよくわかりませんでしたし、他に同じ症状で解決したページも見つけるのに苦労いたしました。

server.hmr – サーバオプション | Vite
- 型: boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean, clientPort?: number, server?: Server } と記述されており、この中の host を設定した形となる。
解決につながったページ
- 【Laravel9系】 Laravel Sail Viteを使ってReact TypeScriptの開発環境を用意する。 – さうな坊や.com
  - Laravel Vite Issue

以上で WLS2 の Docker コンテナ内で npm run dev し、 Windows 側のウェブブラウザから http://localhost へアクセスすると無事ビルドされた Vue.js 3 のファイルへアクセスすることができました。 Webページのソースコードをみてみると、 <script type="module" src="http://localhost:5173/@vite/client"></script><script type="module" src="http://localhost:5173/resources/js/app.js"></script> となっており、 Vite 開発サーバの URL が適切に設定されておりました。

おわりに

Laravel 9.2 あたりからフロントエンドのビルドが Laravel Mix から Vite に変わりました。 Vite を使うようにして最初から環境構築をしようとしたところ、今回のつまづきとなりました。

Vite の方が Laravel Mix よりもメジャーになりましたし、時代の流れとしては Vite に乗っかる方が良さそうですので、一つずつ対処していこうと思います。

以上です。

直面した問題

解決方法まとめ

試行錯誤の記録

おわりに

関連

コメントを残すコメントをキャンセル