Dockerを使って開発する際の流れ Next.jsを例にGithub Copilotくんにまとめてもらった。
1. 概要
Next.jsアプリケーションをDockerを使って効率的に開発する方法を自分用にまとめたメモです。この手順では、ホストマシン上のソースコードをDockerコンテナにVolumeとしてマウントし、リアルタイムでコード変更を反映する開発環境を構築します。
2. ディレクトリ構造
以下のようなディレクトリ構造を用意します。
my-nextjs-app/
├── Dockerfile
├── docker-compose.yml
├── app/ # Next.jsのソースコードを格納
│ ├── package.json
│ ├── pages/
│ ├── public/
│ └── その他のファイル...3. Dockerfile の作成
Next.jsアプリケーションの開発環境用Dockerfileを作成します。
``Dockerfile name=Dockerfile
# Node.jsの安定版LTSをベースイメージに指定
FROM node:22
# 作業ディレクトリを設定
WORKDIR /app
# 依存関係をインストールするためにpackage.jsonをコピー
COPY package.json package-lock.json ./
# 依存関係をインストール
RUN npm install
# ソースコードのマウントポイントを設定（開発時はVolumeでマウントされる）
CMD ["npm", "run", "dev"]
CODEBLOCK1 yaml name=docker-compose.yml
version: "3.9"
services:
nextjs:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./app:/app
- /app/node_modules # ホスト側のnode_modulesをコンテナから隠す
ports:
- "3000:3000"
environment:
- NODE_ENV=development
CODEBLOCK2 bash
npx create-next-app@latest app
CODEBLOCK3 bash
docker compose up
CODEBLOCK4 bash
docker compose exec nextjs npm install some-package
CODEBLOCK5 Dockerfile name=Dockerfile.prod
# Node.jsの安定版LTSをベースイメージとして指定
FROM node:22 AS builder
# 作業ディレクトリを設定
WORKDIR /app
# package.jsonをコピーして依存関係をインストール
COPY package.json package-lock.json ./
RUN npm install
# ソースコードをコピーしてビルド
COPY . .
RUN npm run build
# 本番用イメージ
FROM node:22
WORKDIR /app
COPY --from=builder /app ./
CMD ["npm", "run", "start"]
CODEBLOCK6 bash
docker compose up
CODEBLOCK7 bash
docker compose down
CODEBLOCK8 bash
docker compose exec nextjs [コマンド]
``