Docker Desktop の 4.31.1 で、DevContainer上でViteを動かすと、ポートフォワードが動作しない

Docker Desktop for Windows の 4.31.1 (2024年6月29日現在の最新) にて、DevContainer上でViteのサーバーを起動した際に、ポートフォワードがうまく動きません。

コンテナの外からブラウザでアクセスしようとしたところ、アクセスできない(読み込み中のまま反応なし)状態になりました。
実際試したDevContainerは下記になります。(Remix のチュートリアルをDevContainerにしたもの)

• https://github.com/onozaty/node-sandbox/tree/main/remix-tutorial

問題があるバージョン

最新にする前は問題なく動作したので、どのバージョンから動作しないか確認しました。

• 4.31.1 : ×
• 4.31.0 : ×
• 4.30.0 : ×
• 4.29.0 : ○

4.30.0 で壊れたようです。

該当のIssue

DockerのIssueとしてあがっていました。Mac側でのIssueですが、Mac、Windowsどちらでも起こる問題のようです。

• 4.30.0 update breaks VScode devcontainer auto port forwarding · Issue #7276 · docker/for-mac

DevContainer、Vite側でもIssueが上がっています。

• [Windows+WSL2+Docker] Impossible to reach forwarded port from DevContainer · Issue #9893 · microsoft/vscode-remote-release
• Within a dev container using Docker 26, `vite dev` or `vite preview` cannot be accessed from the host · Issue #16522 · vitejs/vite

Docker側で、ホストがIPv4のみを使用している場合でも、::1を返すようになったのが原因のようです。

ワークアラウンド

Viteの設定(vite.config)を変えることで回避できました。

export default defineConfig({
  plugins: [
    remix({
      ignoredRouteFiles: ["**/*.css"],
    }),
    tsconfigPaths(),
  ],
+  server: {
+    host: '127.0.0.1'
+  },
});