Dev Container dengan Claude Code

Dev Containerで統一されたpengembangan環境を実現

Dev Container（pengembangancontainer） VS CodeやGitHub Codespaces pemanfaatan きるcontainerベース pengembangan環境..devcontainerdirektori pengaturan definisi だけ 、チーム全員 同じpengembangan環境 即座 pembangunan bisa dilakukan.Claude Code pengaturanfile generate dari optimasiま 的確 サポート.

dasar的なDev Containerpengaturan

Mari minta Claude Code untuk men-generate file konfigurasi.

> TypeScript + Next.jsproyek Dev Containerpengaturan buatkan.
> PostgreSQL、Redis、推奨拡張機能、Gitpengaturan juga 含めて。

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

Dev Container Docker Compose 使うpengaturan.

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

ライフサイクルscript

Dev Container ライフサイクル 合わせたscript pengaturan bisa dilakukan.

{
  "initializeCommand": "echo 'Dev Container inisialisasi中...'",
  "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 koneksiしま'"
}

Optimasi Performa

Dev Container performa 向上させる untuk pengaturan.

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

GitHub Codespaces juga 動作 agar pengaturan 拡張.

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

operasi チームpengembangan

Dev Container pengaturan チーム berbagi 際 best practices.

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

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

Ringkasan

Dev Container 使えば、「自分 環境 動く 」 dan いうmasalah 根本 dari 解消 bisa dilakukan.Claude Code pemanfaatanすれば、Dockerfilepembuatan、Docker Composeintegrasi、VS Codepengaturan、performaoptimasiま 一貫 efisien pembangunandimungkinkan.

Docker Compose 詳細 Docker Composepengembangan環境pembangunan 、CI/CD dan integrasi CI/CDセットアップpanduan silakan lihat.Dev Container公式仕様 juga konfirmasi おき.