Claude Code के साथ Dev Container

Dev Containerで統一されたdevelopment environmentを実現する

Dev Container（developmentcontainer）はVS CodeやGitHub Codespacesで利用できるcontainerベースのdevelopment environment है।.devcontainerdirectoryにsettingsを定義する से ही、チーム全員がsamedevelopment environmentを即座にbuild किया जा सकता है。Claude Codeはsettingsfileのgenerate सेoptimization तक的確にサポートし है।

basic Dev Containersettings

Claude Codeにsettingsfileのgenerateを依頼 करें।

> TypeScript + Next.jsProjectのDev Containersettingsを作って。
> PostgreSQL、Redis、推奨拡張features、Gitsettingsも含めて。

// .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 Composeintegration

Dev ContainerでDocker Compose use करनाsettings है।

# .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

# addツールのinstall
RUN apt-get update && apt-get install -y \
    postgresql-client \
    && rm -rf /var/lib/apt/lists/*

# グローバルpackage
RUN npm install -g prisma @anthropic-ai/claude-code

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

Dev Containerのライフサイクルに合わせたスクリプトをsettingsでき है।

{
  "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 に接続しました'"
}

performanceoptimization

Dev Containerのperformanceを向ऊपरさせるためのsettings है।

{
  "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 Codespacessupport

GitHub Codespacesでも動作する तरहsettingsを拡張し है।

{
  "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"]
    }
  }
}

チームdevelopmentでの運用

Dev Containerのsettingsをチームで共有する際のベストプラクティス है।

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

        // TypeScriptsettings
        "typescript.tsdk": "node_modules/typescript/lib",
        "typescript.enablePromptUseWorkspaceTsdk": true
      }
    }
  }
}

まとめ

Dev Containerを使えば、「自分の環境では動くのに」という問題を根本 से解消でき है।Claude Code का लाभ उठाकर、Dockerfilecreate、Docker Composeintegration、VS Codesettings、performanceoptimization तक一貫してefficientlybuildpossible है।

Docker Composeके details के लिएDocker Composedevelopment environmentbuildを、CI/CDとのintegrationはCI/CDsetupガイドをदेखें。Dev Container公式仕様もconfirmしておきましょう。