dockerにviteを入れてvueで開発しようとしたときlocalhostに繋がらなかった話

dockerにviteを入れて、vueの開発をしようと思い、dockerやvueの一連の設定をしたあと、コンテナで

npm run dev

を実行。

vite v2.3.8 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 243ms.

と出たので、ブラウザでlocalhost:3000にアクセスするのだけどエラーになってVueの初期ページが表示されない。なんで？

dockerのportsとか見直してみたけど問題なし。で、コンテナでは問題なくアクセスできるのかをwgetで確認したところ、エラーになってる…。

wget http://localhost:3000
Connecting to localhost:3000 (127.0.0.1:3000)
wget: server returned error: HTTP/1.1 404 Not Found

再度、Viteが表示している内容を確認してみると

> Network: use `--host` to expose

というのが出てる…。もしかしてと思って、「vite host expose」で調べてみると、

で設定方法が公開されていました。内容に従い、vite.config.jsを

export default defineConfig({
plugins: [vue()]
})

から、

export default defineConfig({
plugins: [vue()],
server: {
host: true
}
})

に変更後、


npm run dev

を実行すると、以下のように表示がかわり、ブラウザからもlocalhost:3000にアクセスできるようになりました。

vite v2.3.8 dev server running at:

> Local: http://localhost:3000/
> Network: http://172.24.0.2:3000/

ready in 234ms.

よかった。よかった。