Vueをdockerコンテナで開発

Vueをdockerコンテナで動かしたい

ほぼ個人的なメモです

環境

M1 macOS:12.5

Dockerfile

FROM node:18-slim

WORKDIR /home/node
USER node

問題

つまづいた所。
・Vueのサーバーはインストール時のOSの環境依存性がある
・コンテナからローカルマシンに対して応答が返らない
　（「ページが動作していません」と表示される。ポートフォワーディングそのものがおかしければ、アクセスが拒否されるはずだが...）

流れ

Vueは初めて触ったので、私は初見時普通にローカルで$ npm installしました...

すると上記のエラーが発生。ただ難しいことは書いていなくて、another platformの記述を見てなるほどとすぐに気づきました。
ローカルでインストールしたからmacOSの依存性があるのにdockerコンテナのLinuxOS下で動かそうとしてるからエラーになると...
$ docker-compose exec [サービス名] /bin/bash
でコンテナに入り

コンテナ内

$ npm install

を実行。これで問題なく動作するはずです。

応答が返らない問題

https://choice-site.com/2021/06/24/docker%E3%81%ABvite%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6vue%E3%81%A7%E9%96%8B%E7%99%BA%E3%81%97%E3%82%88%E3%81%86%E3%81%A8%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8Dlocalhost%E3%81%AB%E7%B9%8B%E3%81%8C/
こちらの記事と全く同じ現象が発生。
Vueのインストール方法はいろいろあるっぽいですが、私は
$ npm init vue@latest
でインストール。
この際のvite.configの設定だとネットワークの設定がダメなようで、
コンテナ内ではサーバーが起動していますが、ローカルのマシンまで応答が返らず
「ページが動作していません」となります。かなりこれに時間を使った...

vite.config.js

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

この記述を増やすだけでやっと繋がります。

備考

https://qiita.com/subun33/items/b051f5697482203aa31d
調べてる途中で見つけた記事ではyarnでインストールされていて、試してみると特に処理をすることなく動作。
コンテナを利用する場合はnpmでのインストールは注意が必要。