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公式仕様도 확인해 두세요.