はじめに

Vue3・TypeScript・Viteの環境構築をDockerで行っていた際、Vueが起動しないエラーに遭遇しました。

問題

下記の記事を見ながら、Vue3・TypeScript環境をvite・Dockerで構築し、コンテナの起動までうまくいったが、なぜかlocalhostにアクセスすると下記の画像のようにVueの画面が表示されなかった。

解決方法

vite.config.tsに下記のコードを追加する。

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  // 下記を追加
  server: {
    host: true, // これにより外部からのアクセスが許可
    port: 5173, // ポート番号
  },
  
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

上記の２行追加後、

なぜhost: trueを追加したらうまくいったのか？

GPTさんにも助けてもらいながら、理由を理解しました。

コンテナ内部の開発サーバー（Vite）が、外部からのアクセスを許可する設定になったため.

1. デフォルトのホスト設定（localhost）による制限

VueやViteで開発サーバーを起動すると、デフォルトでは開発サーバーはlocalhost（127.0.0.1）にバインドされる。
なので、サーバーが動いているPC自身からしかアクセスできないようになっている。

•Dockerコンテナ環境

Dockerコンテナは、ホストマシンとは別の仮想的なネットワーク空間で動作している。
この場合、localhostにバインドされた開発サーバーには、ホストマシンからはアクセスできない。

Dockerコンテナ内のlocalhostには、ホストマシン（PC）からアクセスできない

2. host: trueで外部アクセスを許可

vite.config.tsでhost: trueを設定することで、Viteの開発サーバーが0.0.0.0にバインドされるようになる。

0.0.0.0にバインドすると、Dockerコンテナの内部だけでなく、ホストマシンや同じネットワーク内の他のデバイスからもアクセスできるようになる。
これにより、ホストマシンのlocalhostにアクセスすると、コンテナ内で動作しているViteサーバーに接続できるようになる。

まとめ

デフォルトでViteサーバーはlocalhostにバインドされていたため、ホストマシンからアクセスできなかった。
vite.config.tsでhost: trueを設定することで、サーバーが0.0.0.0にバインドされ、ホストマシンや他のデバイスからアクセス可能になった。