Dev containers en VS Code con Docker

Domina los dev containers en VS Code para estandarizar tu entorno de Node con Docker. Aquí verás cómo aislar dependencias, alinear versiones y ejecutar una API con Express de forma reproducible para todo el equipo, sin dolores de cabeza ni configuraciones manuales repetidas.

¿Qué problema resuelven los dev containers en Docker y VS Code?

Los dev containers unifican el entorno de desarrollo y evitan conflictos de versiones. Si alguien usa Node 21 y otra persona 10 u 11, surgen errores por compatibilidad de versiones. Con un dev container, todo el equipo usa la misma imagen y configuración, logrando homologación del entorno. Además, las dependencias se instalan dentro del contenedor, no en tu sistema.

• Aislamiento seguro para pruebas de ciberseguridad: inyección SQL y denegación de servicio sin afectar a terceros.
• Estandarización de versiones de Node y herramientas en el proyecto.
• Extensiones sincronizadas en VS Code vía devcontainer.json.
• Sin Docker build manual: VS Code gestiona la construcción y apertura del contenedor.
• Visibilidad en Docker Desktop: verás la imagen de Node en uso y el contenedor activo.
• Reproducibilidad desde un repositorio de GitHub con dev container: clona, abre y trabaja sin configurar nada.

¿Cómo crear y abrir un dev container en VS Code?

El flujo es directo y guiado por el asistente de Dev Containers en VS Code. Centraliza todo en una carpeta limpia para mantener tu espacio aislado y ordenado.

• Crea una carpeta llamada “dev containers” y ábrela en VS Code.
• Crea app.js con una pequeña API de Node.
• Abre la paleta: presiona control shift p y busca “Dev Containers”.
• Elige agregar configuración de dev container al espacio de trabajo.
• Selecciona la opción sugerida: Node y TypeScript con Node 22 por defecto.
• Omite características adicionales y archivos opcionales si no los necesitas.
• En extensiones de VS Code, añade “Node Essentials” al devcontainer.json desde el engrane: agregar a devcontainer.json.
• Reabre el proyecto en contenedor desde la barra amarilla: reabrir en un container.
• Espera a que VS Code construya y arranque el entorno; verás las extensiones sugeridas instalándose.

¿Cómo preparar una API de Node con Express?

Dentro del contenedor, las dependencias se quedan en el contenedor. Así tu máquina local permanece limpia y el equipo comparte exactamente el mismo setup.

npm init -y
npm install express

app.js (ruta /Platzi y puerto 3000):

const express = require('express');
const app = express();

app.get('/Platzi', (req, res) => {
  res.send('Hola desde un dev container con Express.');
});

const port = 3000;
app.listen(port, () => {
  console.log(`Escuchando en http://localhost:${port}/Platzi`);
});

Ejecuta la aplicación:

node app.js

Abre el enlace que muestra VS Code o visita: http://localhost:3000/Platzi.

¿Qué cambia en la terminal y el entorno?

• La terminal ahora indica Node y el nombre del dev container, no WSL.
• Los paquetes de npm residen en el contenedor, no en tu entorno local.
• En Docker Desktop verás la imagen de Node en uso y el contenedor ejecutándose.

¿Qué habilidades y conceptos refuerzas con esta práctica?

Este flujo conecta conceptos clave del trabajo moderno con contenedores y desarrollo colaborativo. Te ayuda a producir de forma consistente y sin fricción entre equipos.

• Docker, contenedores y microservicios: empaquetado y ejecución aislada con orquestadores en mente.
• Ciberseguridad en entorno controlado: pruebas de inyección SQL y denegación de servicio sin riesgos externos.
• Dev containers y devcontainer.json: definición de entorno, extensiones y configuración compartida.
• Compatibilidad de versiones: todos con Node 22 por defecto, sin desalineación.
• Productividad en VS Code: instalación automática de extensiones como “Node Essentials”.
• Automatización sin Docker build manual: VS Code gestiona la construcción y reapertura.
• Observabilidad en Docker Desktop: validación de imagen y contenedor activos.
• Reutilización desde GitHub: si el repo trae dev container, clona y ponte a trabajar de inmediato.

¿Te gustaría probarlo en tu equipo o proyecto personal y compartir qué extensiones agregarías al devcontainer.json?