Construye tu entorno de desarrollo con Docker y VS Code Remote Containers

¿Cansado de que tu máquina host se parezca a un cajón de cables enredados? Hoy vamos a aislar el caos en un contenedor y volver a respirar código sin miedo al “works on my machine”.

Índice

Construye tu entorno de desarrollo con Docker y VS Code Remote Containers software development concept illustration, cov - imagen ilustrativa
Foto por Rubaitul Azad en Unsplash

Prerrequisitos

Antes de lanzarte a la piscina de los contenedores, asegura que tienes:

Tip: Si Docker tarda más que tu café en cargarse, revisa que docker run hello-world funcione sin errores.

Dockerfile: la receta del entorno

El corazón del contenedor es el Dockerfile. Vamos a crear uno sencillo que sirva para cualquier proyecto JavaScript.

# syntax=docker/dockerfile:1
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --silent
COPY . .
CMD ["npm", "run", "dev"]

Explicación relámpago:

  • FROM node:20-alpine nos da una base ligera con Node.js 20.
  • WORKDIR /app establece el directorio de trabajo.
  • Copiamos primero los package.json y package-lock.json para aprovechar la caché de Docker.
  • npm ci instala dependencias sin sorpresas.
  • El CMD final lanza el script dev que tu package.json debería definir.

Archivo .devcontainer

VS Code necesita saber cómo conectarse al contenedor. Lo hacemos con dos archivos dentro de una carpeta .devcontainer:

  • devcontainer.json: configuración de la extensión.
  • docker-compose.yml (opcional): para servicios múltiples.

Vamos a crear solo el devcontainer.json por ahora:

{
  "name": "DevLoop Container",
  "dockerFile": "Dockerfile",
  "context": "..",
  "runArgs": ["-u", "node"],
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ],
  "postCreateCommand": "npm run build",
  "settings": {
    "terminal.integrated.shell.linux": "/bin/sh"
  }
}

Detalles que valen oro:

  • dockerFile apunta al Dockerfile que acabamos de escribir.
  • extensions instala automáticamente herramientas de lint y format.
  • postCreateCommand ejecuta una compilación una vez que el contenedor arranca.

Ejecutar y depurar

Con todo en su sitio, abre la carpeta raíz del proyecto en VS Code y pulsa F1 → Remote-Containers: Reopen in Container. VS Code construirá la imagen (solo la primera vez) y abrirá una ventana conectada al contenedor.

Una vez dentro, puedes lanzar el debugger de Node como siempre: F5 → Attach to Node Process. El contenedor expone el puerto 9229 automáticamente, así que los breakpoints funcionan sin mover nada.

Si tu proyecto necesita una base de datos, añade un servicio en docker-compose.yml y referencia dependsOn en devcontainer.json. VS Code lo levanta junto al contenedor de código.

Conclusión

Has convertido tu “funciona en mi máquina” en un “funciona en cualquier máquina” con tan sólo tres ficheros. La ventaja es doble: menos “cáscaras de huevo” en el repositorio y una puesta en marcha que parece magia. La próxima vez que alguien te pida un entorno, envíales el .devcontainer y observa cómo sus caras cambian de “¿otra reunión?” a “¡Ya puedo codear!”.

Referencias