DockerでNuxtのローカルの開発環境作りたくなった。
やってみたのですが、なかなか思い通りにいかなかったので記載。
やりたい事としては、nodeとかnode_modulesとかはdocker側において、ソースはローカル。
で、ローカルのソースを修正したら、nuxtというかVueのホットリロードを動かしたい。
ひとまずソースの構成。
. ├── app │ ├── Dockerfile │ └── webapp # nuxtのアプリ └── docker-compose.yml
nuxtのアプリを作る
cd app npx create-nuxt-app webapp # 質問は適当に動けばとりあえず。。。
で、ここでは「npm install」はしない。やった場合は後述。
Dockerfile
FROM node:14.1.0-alpine WORKDIR /app # 多分、nuxt動かすだけなら、@vue/cliとか@vue/cli-initはいらないと思う。 RUN apk update && \ npm install -g npm && \ npm install -g @vue/cli && \ npm install -g @vue/cli-init && \ npm install -g create-nuxt-app ENV HOST 0.0.0.0 CMD ["npm", "run", "dev"]
Docker-compse
version: '3' services: webapp: build: ./app ports: - 13000:3000 volumes: - ./app/webapp:/app tty: true
ホスト側のPortは適当に。tty:trueはあっても無くてもどっちでも。docker内のコンソール出力を全部見たいのでひとまず付ける。
そしたら「docker-compose build」
build終わったら下記でコンテナ内で「npm install」する。
docker-compose run webapp ash npm install exit
そしたら「docker-compose up」
これで、上記のポートの割り当てだったら「http://localhost:13000」でnuxtのデモ画面が出る。
そのまま、ローカルのファイルを修正すればDocker側にも反映されてホットリロードされると。
で、ここから出来なかった事。
本当はbuildのところもdockerfile側に置きたい。↓の感じ。
COPY ./webapp/package.json /app/package.json COPY ./webapp/package-lock.json /app/package-lock.json RUN npm install
↑は上手くいくのですが、nuxtの実行をすると、「.nuxt」ってディレクトリ作られるじゃないですか?
こいつがかなりやっかいで、実行時に動的に作ってるらしく、ローカルのディレクトリと共有してると権限がおかしくなって動かなくなるのです。
dockerignoreとかマウントしてからvolumeで部分的に上書きして~とかローカルのuidと合わせて~とか色々やってみたのですが、どうにも上手くいかない。
今のところ上手くいった方法が上述のnpm installはbuild後にupする前にコンテナ内で実行しておくという手順。
んーカッコ悪いんだけど、開発環境としてローカル側にソース置きたい場合はこれしかやりようがなさそう。
途中でnpm installとかnpm run devしちゃって「node_modules」「.nuxt」出来ちゃってる場合はコンテナ内に入る前に全部消す。
sudo rm -rf .nuxt sudo rm -rf node_modules