docker のコンテナ上で `npm run serve` すると激遅だったのを改善した

仕事で使う技術的なこと

2021.10.01

主題の件の通り、docker 上で npm run serve を実行すると１～２分くらい時間がかかり、地味にストレスを感じていました。
PCのスペックも悪くないので、さすがにこれはおかしいかも？と思い、ググって調べてみると１０秒くらいに短縮できたので備忘録として残しておきます。

改善前
改善後
参考

改善前

例によって、以下のような Dockerfile と docker-compose.yml を使用していました。

# Dockerfile
FROM node:slim

RUN apt-get update
RUN npm install -g @vue/cli

WORKDIR /work

# docker-compose.yml
version: "3"

services:
  vue:
    build: ./
    ports:
      - 8082:8080
    stdin_open: true
    volumes:
      - ./dev/:/work
    tty: true

これで以下のような感じで npm run serve します。

> docker-compose up -d
> docker exec -it <コンテナ名> bash
# コンテナに入る
root@***:/work# vue create.
# vue アプリが初期化されて作られる
root@***:/work# npm run serve
# ここで、アプリが立ち上がるまでに１～２分かかる

改善後

Dockerfile には変更ありません。
docker-compose.yml を以下の通り変更します。

# docker-compose.yml (変更後)
version: "3"

services:
  vue:
    build: ./
    ports:
      - 8082:8080
    stdin_open: true
    volumes:
      - ./dev/:/work
      - node_modules_volume:/work/node_modules  # ←これ追加
    tty: true

volumes:    # ←これ追加
  node_modules_volume:  # ←これ追加

どうやら node_modules もマウントしてホスト側と共有することで遅くなるみたいです。
これを docker 側のボリュームとしてマウントすることで共有しなくなるので遅さが解消されるようです。

詳細は下記の参考先を参照してみてください。

参考

こちらを参考にさせていただきました。

【JavaScript】Docker上でのnpm/yarnの操作を10倍早くする方法