はじめに
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にバインドされ、ホストマシンや他のデバイスからアクセス可能になった。