くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

NUXT

Nuxtの開発環境をDockerで

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

NUXTのバンドルにキャッシュバスティングをつける

NUXTでビルドする時に、キャッシュバスティング用のクエリ文字列をつけたい場合は「nuxt.config.js」のbuildのとこを下の感じにする。※これだけだとnpm run devした時におかしくなるっぽいので要調査。。。

build: {
  filenames: {
    app: '[name].js?v=[chunkhash]',
    chunk: '[name].js?v=[chunkhash]',
    manifest: '[name].js?v=[hash]',
    vendor: '[name].js?v=[hash]'
  },
  ...
}

デフォだとファイル名にハッシュの文字列がつくから、それでもいいんだけど、ファイル名は固定させたい場合はこんな感じでいいのかしらね?結果的には大丈夫そうなんだけども・・・。出来るASSETの名前は「pages_index.js?v=13ce94dbf4253c98fda3」とか「app.js?v=756d7ba036939c0fe3b2」みたいな感じ。物理ファイルとしては「pages_index.js」とか「app.js」みたいな感じ。

WebPackの質問で書き方としては↑の感じで行けるよみたいに書いてあるんだけど、ついでに、出来ればコレ系は止めた方がいいよって書いてあってイマイチ理由がわからなかったりする。↓の質問。

GitのISSUES

イチを理由も書いていただいてて、質問した人も分かった~って言ってるんだけど、自分バカなのでよくわかりません。

ユーザが操作中に資源上げると整合性取れなくなる可能性あるからやめとけって事なのかしらしら。 そうだとしたら、理由で書いてる事って実運用で起きたら、そもそもリリースの仕方おかしいんじゃない?って気がするんだけども。不特定多数向けのインターネット上のサイトとかだと普通なのかしら。

問合せ