Dev Container con Claude Code

Logrando un entorno de desarrollo unificado con Dev Container

Dev Container (contenedor de desarrollo) es un entorno de desarrollo basado en contenedores disponible en VS Code y GitHub Codespaces. Solo definiendo la configuracion en el directorio .devcontainer, todo el equipo puede construir instantaneamente el mismo entorno de desarrollo. Claude Code proporciona soporte preciso desde la generacion de archivos de configuracion hasta la optimizacion.

Configuracion basica de Dev Container

Pidamos a Claude Code que genere los archivos de configuracion.

> Crea la configuracion de Dev Container para un proyecto TypeScript + Next.js.
> Incluye PostgreSQL, Redis, extensiones recomendadas y configuracion de 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"
}

Integracion con Docker Compose

Configuracion para usar Docker Compose con Dev Container.

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

# Instalacion de herramientas adicionales
RUN apt-get update && apt-get install -y \
    postgresql-client \
    && rm -rf /var/lib/apt/lists/*

# Paquetes globales
RUN npm install -g prisma @anthropic-ai/claude-code

Scripts de ciclo de vida

Puedes configurar scripts segun el ciclo de vida del Dev Container.

{
  "initializeCommand": "echo 'Inicializando 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 'Conectado al Dev Container'"
}

Optimizacion de rendimiento

Configuracion para mejorar el rendimiento del 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"
  }
}

Soporte de GitHub Codespaces

Extiende la configuracion para que funcione tambien en GitHub Codespaces.

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

  "secrets": {
    "GITHUB_TOKEN": {
      "description": "Token de API de GitHub para autenticacion"
    },
    "DATABASE_URL": {
      "description": "Cadena de conexion de PostgreSQL"
    }
  },

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

Operacion en desarrollo en equipo

Mejores practicas al compartir la configuracion de Dev Container con el equipo.

// Agregar a .devcontainer/devcontainer.json
{
  "customizations": {
    "vscode": {
      "settings": {
        // Configuracion unificada del equipo
        "files.eol": "\n",
        "files.trimTrailingWhitespace": true,
        "files.insertFinalNewline": true,
        "editor.tabSize": 2,
        "editor.insertSpaces": true,

        // Configuracion de TypeScript
        "typescript.tsdk": "node_modules/typescript/lib",
        "typescript.enablePromptUseWorkspaceTsdk": true
      }
    }
  }
}

Resumen

Con Dev Container, puedes eliminar de raiz el problema de “en mi equipo funciona”. Aprovechando Claude Code, puedes construir eficientemente y de forma consistente la creacion de Dockerfile, la integracion con Docker Compose, la configuracion de VS Code y la optimizacion de rendimiento.

Para mas detalles sobre Docker Compose, consulta construccion de entorno de desarrollo con Docker Compose, y para la integracion con CI/CD, consulta la guia de configuracion de CI/CD. Revisa tambien la especificacion oficial de Dev Container.