Dev Container：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公式仕様也建议确认一下。