Dockerでnpm installが遅い問題を解決する

昔よくdocker npm install 遅いなどのワードで検索していたのですが、そもそもComposeファイルの書き方をあまりよく理解しておらず、自分のフォルダ構成に落とし込むことができなかった経験があります。
あれから学習し少しは分かるようになったのでその成果を記述します。
ともあれ、もし上記ワードで検索してこの記事に来たならば、できればComposeファイルの記述方法を学んでほしいです。
おすすめ→https://zenn.dev/suzuki_hoge/books/2022-03-docker-practice-8ae36c33424b59

docker-compose.yml

docker-compose.yml

version: '3.9'

services:
  front:
    container_name: ContainerName
    working_dir: /front
    tty: true
    build:
      dockerfile: ./Dockerfile
      context: .
    volumes:
      - type: bind
        source: .
        target: /front
      - type: volume
        source: node_modules
        target: /front/node_modules

volumes:
  node_modules:

ここのservicesの中のvolumesと、一番下のvolumesがミソです。

簡単な説明

servicesの中にあるvolumesの、- type: bindから始まる項目ですべてのファイルをバインドマウントしています。詳しくは調べてほしいですが、コンテナとホストでファイルを同期させています。
これを書かないとホストマシンで書いたソースファイルなどがコンテナに反映されないので、とりあえず何も分からずDockerを触ってNode.jsを起動させてみた場合でも書いてあることが多いと思います。

続いて- type: volumeから始まる項目で、node_modulesフォルダのみをボリュームマウントしています。一番下のvolumesで名前をつけています。
ボリュームマウントはコンテナからは参照できますが、ホストマシンからは参照できません。
つまり、ホストマシンには同期されません。

npm installしたときはnode_modulesフォルダ内に大量のファイルがダウンロードされます。
このとき、node_modulesフォルダをバインドマウントしてると、ホストマシンとコンテナでこの大量のファイルが同期されるため、その分遅くなってしまうんですね。

node_modulesフォルダが空なんだけど・・・

ボリュームマウントしたからです。コンテナ内にはあります。

おわりに

きちんと学習することの大切さを最近実感しています。
おそらくこの記事内でもふわっとした知識で記載してしまっている部分があると思うので、引き続き学習していきます。