Integrar Docker en Visual Studio Code

TL;DR

Docker en Visual Studio Code agiliza el ciclo de desarrollo: instala la extensión oficial, deja que VS Code genere Dockerfile y Compose, construye imágenes y ejecuta contenedores desde el Explorador Docker. En minutos tendrás un flujo para probar, depurar y limpiar contenedores sin salir del editor.

Resumen rápido

• Requisitos: Docker Desktop y Visual Studio Code instalados.
• Instala la extensión oficial “Docker” desde el Marketplace.
• Usa la paleta de comandos para generar Dockerfile y compose.
• Construye, ejecuta y gestiona imágenes y contenedores desde el panel Docker.

Integrar Docker en Visual Studio Code facilita el desarrollo y las pruebas. Verás cómo crear Dockerfiles rápidamente, examinar contenedores e imágenes en un panel visual y abrir registros o terminales con un clic. Este artículo detalla la instalación, el flujo para crear una app contenedorizada (Node.js + Express) y buenas prácticas, con listas de verificación, criterios y solución de problemas frecuentes.

Palabras clave y variantes de intención

• integrar docker en vscode (intención principal)
• docker extension vscode
• usar docker en visual studio code
• generar dockerfile vscode
• ejecutar contenedores desde vscode

1. Requisitos previos

• Docker Desktop (o motor Docker compatible) instalado y funcionando.
• Visual Studio Code actualizado.
• Acceso a la red para descargar imágenes base.

Consejo rápido: si usas WSL2 en Windows, habilita la integración con Docker Desktop para que VS Code pueda comunicarse sin configuración extra.

2. Instalar la extensión Docker en VS Code

Abre la vista de Extensiones en VS Code, busca “Docker” y instala la extensión oficial de Microsoft. Tras la instalación, aparecerá un icono de Docker/Containers en la esquina inferior izquierda: ese es el Explorador Docker.

Cuando Docker Desktop esté en ejecución, la extensión suele conectarse automáticamente. Si trabajas con hosts remotos, contextos o con WSL, revisa la configuración de la extensión y los contextos de Docker.

3. Verificar la conexión entre Docker Desktop y VS Code

Haz clic en el icono Docker/Containers para abrir el Explorador Docker. Desde ahí podrás ver contenedores en ejecución, imágenes, registros (registries), volúmenes y redes.

4. Gestionar contenedores, imágenes y volúmenes desde VS Code

En el panel CONTAINERS verás contenedores activos e inactivos. Puedes hacer clic derecho sobre cualquiera para iniciar, detener, reiniciar o eliminar.

También puedes gestionar imágenes: extraer (pull), construir (build) o eliminar imágenes no usadas.

Para eliminar una imagen sin uso, haz clic derecho sobre ella y selecciona Remover.

Los volúmenes vinculados a contenedores también son accesibles desde el Explorador; puedes inspeccionarlos o eliminarlos según sea necesario.

Además, el Explorador permite ver redes, contextos de Docker, registries y acceder a la sección de ayuda y comentarios.

5. Ejemplo práctico: construir y ejecutar una app Node.js Express

A continuación mostramos un flujo paso a paso para crear una aplicación simple, generar archivos Docker y ejecutar la imagen desde VS Code.

5.1 Crear la app mínima

Crea una carpeta de proyecto en VS Code y añade un archivo llamado index.js con este contenido:

const express = require("express");
const server = express();
const PORT = 4000;

server.get("/", (req, res) => {
  res.send("Welcome to our Express app!");
});

server.listen(PORT, () => {
  console.log(`App running on port ${PORT}`);
});

Este código crea una app Express que responde en la ruta raíz. Mantén el puerto 4000 (o ajusta si lo prefieres) y asegúrate de tener un package.json con dependencias si quieres que la extensión lo detecte.

5.2 Generar Dockerfile desde VS Code

Abre la Paleta de comandos (⇧⌘P en Mac o Ctrl + Shift + P en Windows) y ejecuta “Add Docker files to Workspace”. Selecciona Node.js como plataforma y el archivo package.json ubicado en la raíz del proyecto. Indica el puerto y confirma si quieres generar un archivo Docker Compose.

El asistente generará un Dockerfile, un archivo .dockerignore y, si lo seleccionas, un compose.yaml.

5.3 Construir la imagen

Haz clic derecho sobre el Dockerfile y selecciona Build Image, o ejecuta “Docker Images: Build Image” desde la Paleta de comandos. El panel mostrará el progreso del build.

Cuando termine, verás la imagen en la sección Images.

5.4 Ejecutar la imagen como contenedor

En Images, haz clic derecho sobre tu imagen y selecciona Run o ejecuta el comando “container images: run” desde la Paleta. Elige la etiqueta (tag) adecuada y el contenedor se iniciará.

Confirma que el contenedor aparece en CONTAINERS.

Puedes abrir la app en el navegador haciendo clic derecho en el contenedor y seleccionando Open in Browser.

En la salida verás los logs y la confirmación de que la app responde en el puerto indicado.

6. Mini-metodología: flujo recomendado para desarrollar con Docker en VS Code

1. Crear proyecto local y confirmar ejecución sin contenedor.
2. Añadir package.json y resto de ficheros de proyecto.
3. Ejecutar “Add Docker files to Workspace” y revisar Dockerfile generado.
4. Construir imagen desde VS Code y etiquetarla con una versión.
5. Ejecutar contenedor para pruebas locales, abrir en navegador.
6. Probar puntos de fallo y revisar logs desde el panel de contenedores.
7. Crear compose para entornos multi-servicio si procede.
8. Limpiar imágenes y volúmenes no usados para ahorrar espacio.

7. Role-based checklists (listas por rol)

• Desarrollador:
  • Confirmar que la app funciona localmente.
  • Generar Dockerfile y .dockerignore.
  • Construir y ejecutar contenedor para pruebas rápidas.
  • Comprobar puertos, variables de entorno y montajes de volumen.
• DevOps:
  • Validar Dockerfile para seguridad y tamaño de imagen.
  • Añadir escaneos de imagen (SCA) y configuraciones de CI.
  • Revisar Docker Compose para staging y producción.
• QA:
  • Ejecutar contenedores en entornos de integración.
  • Usar tests de aceptación conectados a contenedores.

8. Criterios de aceptación (para esta integración)

• La extensión Docker está instalada y lista en VS Code.
• Se puede construir una imagen desde el Dockerfile generado.
• El contenedor levanta y responde en el puerto configurado.
• Logs y terminales son accesibles desde el Explorador Docker.

9. Solución de problemas comunes

• VS Code no detecta Docker: asegúrate de que Docker Desktop esté en ejecución y que el usuario tenga permisos para usar el socket Docker.
• Error al construir la imagen: revisa la salida del build y el Dockerfile; falta de dependencias o versiones incorrectas son causas habituales.
• Puertos en uso: cambia el puerto del contenedor o libera el puerto en el host.
• WSL2 no conecta: habilita integración en Docker Desktop y reinicia WSL.

Important: si trabajas con contexts remotos (SSH/VM), configura el contexto Docker adecuado antes de usar la extensión.

10. Alternativas y cuándo fallará este enfoque

• Alternativas: usar la CLI de Docker (docker build/run), Docker Compose manual, Testcontainers para pruebas automatizadas, o herramientas como Podman.
• Cuándo puede fallar: entornos con políticas corporativas que restringen sockets o descargas de imágenes; proyectos que requieren builds avanzados multietapa personalizados que el asistente no cubre completamente.

11. Seguridad y privacidad

• Revisa el Dockerfile para evitar credenciales en imagen.
• Añade .dockerignore para excluir archivos sensibles del contexto de build.
• Para datos personales o GDPR: evita incluir datos de usuarios en imágenes o volúmenes sin cifrado y aplica políticas de retención.

12. Buenas prácticas de imagen y rendimiento

• Usa imágenes base oficiales y ligeras (por ejemplo node:18-alpine cuando sea viable).
• Minimiza capas y limpia caches en el Dockerfile.
• Etiqueta imágenes con versión y fecha de build en CI (semver simple).
• Usa multistage builds para reducir tamaño final.

13. Pruebas y criterios de aceptación automáticas (ejemplos)

• Test de integración: la respuesta a GET / debe devolver 200 y contener “Welcome to our Express app!”.
• Test de healthcheck: añade HEALTHCHECK en Dockerfile o una ruta /health para validación.
• Criterio de CI: la imagen debe construirse sin errores en menos de X minutos (configurable en CI).

14. Glosario rápido (1 línea cada término)

• Dockerfile: archivo con instrucciones para construir una imagen Docker.
• Imagen: snapshot inmutable que contiene la app y su entorno.
• Contenedor: instancia en ejecución de una imagen.
• Docker Compose: herramienta para definir y ejecutar aplicaciones multi-contenedor.

15. Lista de verificación rápida antes de subir a producción

• Eliminar credenciales del Dockerfile.
• Usar imagen base actualizada y mínima.
• Añadir escáner de seguridad en pipeline.
• Probar healthchecks y reinicios automáticos.
• Documentar variables de entorno necesarias.

16. FAQ

Q: ¿Necesito Docker Desktop para usar la extensión?
A: No estrictamente; necesitas un daemon Docker accesible. Docker Desktop es la opción más común en escritorio.

Q: ¿Puedo depurar dentro de un contenedor desde VS Code?
A: Sí. VS Code soporta debug en contenedores con las configuraciones adecuadas y extensiones adicionales para Node.js u otros runtimes.

Q: ¿La extensión modifica mis archivos?
A: La extensión puede generar Dockerfile, .dockerignore y compose.yaml si aceptas. Revisa siempre los archivos generados.

Conclusión

Integrar Docker en VS Code reduce el tiempo entre escribir código y probarlo en un entorno contenedorizado. La extensión oficial genera artefactos útiles, facilita el build y la ejecución, y centraliza la gestión de imágenes y contenedores en el editor. Complementa este flujo con buenas prácticas de seguridad y un pipeline de CI/CD para subir imágenes a entornos de staging y producción.

Notas finales

• Usa volúmenes para desarrollo con hot-reload y montajes locales.
• Revisa el Dockerfile generado y adáptalo a tus necesidades de seguridad y rendimiento.
• Si necesitas despliegue a producción, integra la construcción de imágenes en tu CI y publica en un registry privado o público según políticas de tu organización.