フロントエンド開発者のための Docker 入門

チームで開発していると「自分の環境では動くのに…」という場面に必ず遭遇します。Node.js のバージョン差異、OS の違い、グローバルにインストールされた謎のパッケージ。Docker はこういった環境起因のトラブルを根絶するための道具です。

なぜフロントエンドに Docker が必要なのか

バックエンドほど複雑ではないフロントエンドでも、Node.js のバージョン管理は意外と厄介です。nvm や volta を使っても、CI/CD との一致保証は難しい。Docker を使えばすべての環境が同一のイメージから動作します。

最小限の Dockerfile

dockerfile

FROM node:22-slim
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]

docker-compose でポートとボリュームを管理する

開発時はソースコードをボリュームマウントすることで、ホスト側の変更がコンテナにリアルタイムで反映されます。node_modules だけはコンテナ内のものを使うよう、専用のボリュームを定義しておくのがポイントです。

yaml

services:
  app:
    build: .
    ports:
      - "3000:3000"
      - "9229:9229"  # デバッガ
    volumes:
      - .:/app
      - /app/node_modules  # コンテナ内の node_modules を優先

VS Code からコンテナにデバッガをアタッチする

Node.js の V8 Inspector を有効にして起動すれば、VS Code から launch.json の attach 設定でブレークポイントが使えます。localRoot と remoteRoot のマッピングが正しく設定されていることが重要です。

CMD に NODE_OPTIONS='--inspect=0.0.0.0:9229' を追加
.vscode/launch.json で "request": "attach" を設定
localRoot: ホスト側のプロジェクトルート
remoteRoot: コンテナ内の WORKDIR (/app)

Dev Containers との統合

VS Code の Dev Containers 拡張機能を使うと、コンテナ内で VS Code がそのまま動作します。拡張機能もコンテナ内にインストールされ、完全に分離された開発環境が実現します。.devcontainer/devcontainer.json でチーム共通の設定を管理できます。