Zenn
🐳

DockerでNext.jsの環境を構築とエラー対策

に公開
Docker
Next.js
tech

Docker開発環境セットアップガイド

このドキュメントでは、Next.jsプロジェクトのDocker開発環境構築手順と、発生する可能性のある問題の解決方法について説明します。

1. 必要なファイルの作成

Dockerfile

FROM node:18-alpine

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

COPY . .

EXPOSE 3000

CMD ["npm", "run", "dev"]

docker-compose.yml

services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    stdin_open: true

.dockerignore

node_modules
.next
.git
.github
*.md
.gitignore
.dockerignore
Dockerfile
docker-compose.yml

2. Docker Desktopのインストール

  1. Docker Desktopの公式サイトからインストーラーをダウンロード
  2. インストーラーを実行し、指示に従ってインストール
  3. インストール完了後、Docker Desktopを起動

3. Docker環境の起動

プロジェクトのルートディレクトリで以下のコマンドを実行：

docker compose up --build

初回ビルド後は、以下のコマンドでも起動可能：

docker compose up

バックグラウンドで実行する場合：

docker compose up -d

4. アプリケーションへのアクセス

ブラウザで以下のURLにアクセス：

http://localhost:3000

5. Docker環境の停止

以下のコマンドでコンテナを停止：

docker compose down

6. よくある問題と解決方法

6.1 version属性の非推奨警告

問題:

WARN[0000] /path/to/docker-compose.yml: the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion

解決策:
docker-compose.ymlからversion: '3'の行を削除してください。最新のDocker Composeではバージョン属性は自動的に処理されます。

6.2 Docker Desktopのエラー

問題:

Docker Desktop encountered an unexpected error and needs to close.
running engine: waiting for the Docker API: context deadline exceeded

解決策:

  1. Docker Desktopの再起動:

    • Docker Desktopを完全に終了
    • コンピュータを再起動
    • Docker Desktopを再起動

  2. 設定のリセット:

    • Docker Desktopの「Troubleshoot」から「Reset to factory defaults」を選択

  3. ディスクスペースの確認:

    df -h

  4. Dockerキャッシュのクリア:

    rm -rf ~/Library/Containers/com.docker.docker/Data/vms/*
rm -rf ~/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/Docker.qcow2

  5. Docker Desktopの再インストール:

    • Docker Desktopをアンインストール
    • Docker関連ディレクトリを削除:
      rm -rf ~/.docker
rm -rf ~/Library/Group\ Containers/group.com.docker
rm -rf ~/Library/Containers/com.docker.docker
    • 最新版を再インストール

6.3 nodenvコマンドが見つからないエラー

問題:

/Users/username/.zprofile:1: command not found: nodenv

解決策:

  1. Homebrewを使用してnodenvをインストール:

    brew install nodenv

  2. シェル設定ファイルに初期化スクリプトを追加:

    echo 'eval "$(nodenv init -)"' >> ~/.zshrc

    または

    echo 'eval "$(nodenv init -)"' >> ~/.zprofile

  3. シェルを再起動するか、設定を再読み込み:

    source ~/.zshrc

    または

    source ~/.zprofile

7. その他の便利なコマンド

コンテナのログを確認

docker compose logs -f

コンテナ内でコマンドを実行

docker compose exec web npm install パッケージ名

コンテナ内のシェルにアクセス

docker compose exec web /bin/sh

Dockerイメージとコンテナのクリーンアップ

未使用のコンテナを削除:

docker container prune

未使用のイメージを削除:

docker image prune

すべての未使用リソースを削除:

docker system prune

8. 開発の利点

  • ホストとコンテナ間のボリュームマウントにより、ソースコード変更がリアルタイムで反映される
  • 開発環境が標準化され、「自分の環境では動く」問題を解消
  • node_modulesはコンテナ内に保持されるため、ホスト環境を汚さない
  • チーム内で同一の開発環境を共有できる

9. 環境構築時のpackage.json

{
  "name": "任意の名前",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "browserslist": "defaults, not ie <= 11",
  "dependencies": {
    "@headlessui/react": "^2.1.0",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/postcss": "^4.0.6",
    "clsx": "^2.1.0",
    "next": "^14.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^4.0.6"
  },
  "devDependencies": {
    "eslint": "^8.56.0",
    "eslint-config-next": "^14.0.4",
    "prettier": "^3.3.2",
    "prettier-plugin-tailwindcss": "^0.6.10",
    "sharp": "0.33.1"
  }
}

10 開発環境構築時next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

Discussion