Dev Container with Claude Code

Dev Containerで統一された開発環境を実現する

Dev Container（開発コンテナ）はVS CodeやGitHub Codespacesで利用できるコンテナベースの開発環境です。.devcontainerディレクトリに設定を定義するだけで、チーム全員が同じ開発環境を即座に構築できます。Claude Codeは設定ファイルの生成から最適化まで的確にサポートします。

基本的なDev Container設定

Claude Codeに設定ファイルの生成を依頼しましょう。

> TypeScript + Next.jsプロジェクトのDev Container設定を作って。
> PostgreSQL、Redis、推奨拡張機能、Git設定も含めて。

// .devcontainer/devcontainer.json
{
  "name": "Next.js Development",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace",

  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "20"
    },
    "ghcr.io/devcontainers/features/git:1": {},
    "ghcr.io/devcontainers/features/github-cli:1": {}
  },

  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss",
        "prisma.prisma",
        "ms-azuretools.vscode-docker",
        "eamodio.gitlens",
        "usernamehw.errorlens",
        "formulahendry.auto-rename-tag"
      ],
      "settings": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        },
        "typescript.preferences.importModuleSpecifier": "non-relative",
        "typescript.updateImportsOnFileMove.enabled": "always"
      }
    }
  },

  "forwardPorts": [3000, 5432, 6379],
  "portsAttributes": {
    "3000": { "label": "Next.js App", "onAutoForward": "openBrowser" },
    "5432": { "label": "PostgreSQL" },
    "6379": { "label": "Redis" }
  },

  "postCreateCommand": "npm install && npx prisma generate",
  "postStartCommand": "npx prisma migrate dev --skip-seed",

  "remoteUser": "node"
}

Docker Compose統合

Dev ContainerでDocker Composeを使う設定です。

# .devcontainer/docker-compose.yml
version: "3.9"

services:
  app:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - ..:/workspace:cached
      - node_modules:/workspace/node_modules
    command: sleep infinity
    environment:
      - DATABASE_URL=postgresql://postgres:password@db:5432/myapp
      - REDIS_URL=redis://redis:6379
      - NODE_ENV=development

  db:
    image: postgres:16-alpine
    restart: unless-stopped
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
      POSTGRES_DB: myapp
    volumes:
      - postgres_data:/var/lib/postgresql/data

  redis:
    image: redis:7-alpine
    restart: unless-stopped
    volumes:
      - redis_data:/data

volumes:
  node_modules:
  postgres_data:
  redis_data:

# .devcontainer/Dockerfile
FROM mcr.microsoft.com/devcontainers/typescript-node:20

# 追加ツールのインストール
RUN apt-get update && apt-get install -y \
    postgresql-client \
    && rm -rf /var/lib/apt/lists/*

# グローバルパッケージ
RUN npm install -g prisma @anthropic-ai/claude-code

ライフサイクルスクリプト

Dev Containerのライフサイクルに合わせたスクリプトを設定できます。

{
  "initializeCommand": "echo 'Dev Container を初期化中...'",
  "onCreateCommand": {
    "install": "npm install",
    "prisma": "npx prisma generate",
    "husky": "npx husky install"
  },
  "updateContentCommand": "npm install",
  "postCreateCommand": {
    "migrate": "npx prisma migrate dev",
    "seed": "npx prisma db seed"
  },
  "postStartCommand": "npm run dev",
  "postAttachCommand": "echo 'Dev Container に接続しました'"
}

パフォーマンス最適化

Dev Containerのパフォーマンスを向上させるための設定です。

{
  "mounts": [
    {
      "source": "devcontainer-node-modules-${devcontainerId}",
      "target": "/workspace/node_modules",
      "type": "volume"
    },
    {
      "source": "devcontainer-next-cache-${devcontainerId}",
      "target": "/workspace/.next",
      "type": "volume"
    }
  ],

  "hostRequirements": {
    "cpus": 4,
    "memory": "8gb",
    "storage": "32gb"
  }
}

GitHub Codespaces対応

GitHub Codespacesでも動作するように設定を拡張します。

{
  "hostRequirements": {
    "cpus": 4,
    "memory": "8gb"
  },

  "secrets": {
    "GITHUB_TOKEN": {
      "description": "GitHub API token for authentication"
    },
    "DATABASE_URL": {
      "description": "PostgreSQL connection string"
    }
  },

  "customizations": {
    "codespaces": {
      "openFiles": ["README.md", "src/app/page.tsx"]
    }
  }
}

チーム開発での運用

Dev Containerの設定をチームで共有する際のベストプラクティスです。

// .devcontainer/devcontainer.json に追加
{
  "customizations": {
    "vscode": {
      "settings": {
        // チーム統一の設定
        "files.eol": "\n",
        "files.trimTrailingWhitespace": true,
        "files.insertFinalNewline": true,
        "editor.tabSize": 2,
        "editor.insertSpaces": true,

        // TypeScript設定
        "typescript.tsdk": "node_modules/typescript/lib",
        "typescript.enablePromptUseWorkspaceTsdk": true
      }
    }
  }
}

まとめ

Dev Containerを使えば、「自分の環境では動くのに」という問題を根本から解消できます。Claude Codeを活用すれば、Dockerfile作成、Docker Compose統合、VS Code設定、パフォーマンス最適化まで一貫して効率的に構築可能です。

Docker Composeの詳細はDocker Compose開発環境構築を、CI/CDとの連携はCI/CDセットアップガイドを参照してください。Dev Container公式仕様も確認しておきましょう。