Day5：開発効率化（マウント）後半
テーマ：docker-compose を使った“開発環境の完成形”を作り、ホットリロードを安定して運用できるようにする
後半では、前半・中盤で理解した
マウントの仕組み・ホットリロードの動作・COPY との違い
を踏まえて、実務で使われる「開発用 Docker 環境の完成形」を作るところまで深掘りします。
ここを理解すると、あなたは
Docker を使った開発環境を自分で設計し、チーム全体の開発効率を上げられるエンジニア
になります。
docker-compose を使うと“開発環境が一瞬で立ち上がる”
毎回 docker run を書くのは非効率
中盤までの例では、次のように docker run を使っていました。
docker run -v $(pwd):/app -w /app node npx nodemon app.js
これは学習には良いですが、
実務では 毎回この長いコマンドを打つのは非効率 です。
docker-compose.yml にまとめると一瞬で起動できる
version: "3.9"
services:
api:
image: node:18
working_dir: /app
volumes:
- .:/app
- /app/node_modules
command: npx nodemon app.js
ports:
- "4000:4000"
この構成のポイント
. : /appでホストのコードをマウント/app/node_modulesを匿名ボリュームにして壊れないようにするcommandで nodemon を実行portsで外部からアクセス可能にする
これで、開発環境は次の1行で起動できます。
docker compose up
ホットリロードが安定して動く“実務構成”を深掘りする
node_modules をマウントしない理由を再確認
Node.js のネイティブモジュールは OS に依存します。
ホスト（Mac）とコンテナ（Linux）ではバイナリが違うため、
ホストの node_modules をコンテナにマウントすると壊れます。
そのため、次のように 匿名ボリュームで隔離 します。
volumes:
- /app/node_modules
これにより：
- ホスト側の node_modules は無視される
- コンテナ内で npm install したものだけが使われる
- ホットリロードは正常に動く
実務ではこの構成が定番です。
ホットリロードの“開発体験”を最大化する
コード変更 → 自動再起動 → ブラウザ更新 の流れ
ホットリロードの理想的な流れはこうです。
- VSCode で app.js を保存
- マウントによりコンテナ内の /app/app.js が更新
- nodemon が変更を検知
- API が自動再起動
- ブラウザを更新すると即反映
この「保存した瞬間に反映される」体験が、
Docker 開発をローカル開発と同じスピードに引き上げます。
React の場合は create-react-app が自動リロード
React の開発サーバーは標準でホットリロード対応です。
services:
frontend:
image: node:18
working_dir: /app
volumes:
- .:/app
- /app/node_modules
command: npm start
ports:
- "3000:3000"
React の場合は nodemon すら不要です。
実務で使う“開発用と本番用の分離”
開発用はマウント、本番用は COPY
開発用 Dockerfile：
FROM node:18
WORKDIR /app
CMD ["npm", "start"]
本番用 Dockerfile（マルチステージ）：
FROM node:18 AS build
WORKDIR /app
COPY . .
RUN npm install && npm run build
FROM node:18-slim
WORKDIR /app
COPY --from=build /app/build ./build
CMD ["npx", "serve", "build"]
なぜ分けるのか
- 開発用 → マウントでホットリロード
- 本番用 → 軽量・高速・安全
目的が違うため、Dockerfile も分けるのが実務の基本です。
実務で使う“開発環境の完成形”
以下は、Node.js API の開発環境としてそのまま使える構成です。
version: "3.9"
services:
api:
image: node:18
working_dir: /app
volumes:
- .:/app
- /app/node_modules
command: npx nodemon app.js
ports:
- "4000:4000"
この構成のメリット
- コード変更が即反映
- node_modules が壊れない
- コマンド1つで起動
- チーム全員が同じ環境で開発できる
後半まとめ
あなたがここまで理解できていれば、Day5 のゴールは完全達成です。
- docker-compose を使うと開発環境が一瞬で立ち上がる
- ホットリロードは「マウント＋変更検知ツール」で成立する
- node_modules を匿名ボリュームにする理由を説明できる
- 開発用と本番用の Dockerfile を分ける重要性を理解している
- 実務で使える“開発環境の完成形”を自分で作れる