DevContainer 内で起動した Vite サーバーにブラウザーからアクセスできない時の解決法

症状

このチュートリアルを試すために DevContainer を作成した。

devcontainer.json

{
    "name": "ts-react",
    "image": "mcr.microsoft.com/devcontainers/typescript-node"
}

チュートリアルに沿って Vite サーバーを起動する。

  VITE v7.2.2  ready in 747 ms

その後 Chrome で localhost:5173 を開いても真っ白なページになっている。

解決法

Vite 公式のトラブルシューティングに記載があった。

Dev Container や VS Code のポートフォワーディング機能を使用している場合、正しく動作するように server.host オプションを 127.0.0.1 に設定する必要があるかもしれません。

vite.config.ts を書き換える。

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
+ server: {
+   host: "127.0.0.1"
+ }
})

再度サーバーを起動して Chrome で開くと動いた。