La integración de Docker con Visual Studio Code (VS Code) mejora significativamente la experiencia de desarrollo, permitiendo a los desarrolladores crear y administrar archivos Docker de forma eficiente, visualizar contenedores e imágenes, y acceder a registros o terminales fácilmente. Este artículo ofrece una guía completa sobre cómo configurar Docker en VS Code mediante la extensión Docker.
Cómo instalar la extensión Docker en VS Code
Antes de instalar la extensión de Docker, asegúrese de que tanto Docker como Visual Studio Code estén configurados correctamente en su equipo. Para empezar, abra la vista Extensiones en VS Code, busque «Docker» e instale la extensión oficial de Docker proporcionada por Microsoft.
Una vez que la instalación sea exitosa, notará que aparece un ícono Docker/Contenedores en la esquina inferior izquierda de su editor, lo que indica que el Explorador de Docker ahora está disponible.
Establecer una conexión entre Docker Desktop y VS Code
Cuando Docker Desktop se ejecuta, la extensión de Docker con VS Code se conecta sin problemas. Normalmente, no se requiere configuración adicional, a menos que la configuración de Docker incluya configuraciones especiales (por ejemplo, hosts remotos o integración con WSL).
Para verificar la conexión, haga clic en el icono de Docker/Contenedores para abrir el Explorador de Docker. Allí podrá observar los contenedores en ejecución y detenidos, junto con imágenes, registros, volúmenes y redes.
Administrar contenedores, imágenes y volúmenes directamente desde VS Code
Con Docker totalmente integrado en VS Code, gestionar las tareas de los contenedores nunca ha sido tan fácil. Puedes ver fácilmente los contenedores en ejecución y detenidos en la sección CONTENEDORES.
Además, al hacer clic derecho en cualquier contenedor tendrás opciones para iniciarlo, detenerlo, reiniciarlo o eliminarlo con solo un clic.
También puedes extraer nuevas imágenes, crear imágenes a partir de configuraciones existentes o eliminar imágenes no utilizadas fácilmente. Por ejemplo, para eliminar una imagen que ya no necesitas, simplemente haz clic derecho sobre ella y selecciona » Eliminar».
Además, administrar los volúmenes vinculados a sus contenedores es sencillo: haga clic derecho en el volumen deseado para inspeccionarlo o modificarlo.
También puede explorar y administrar redes, registros, contextos de Docker y obtener acceso a una sección de ayuda y comentarios, optimizando aún más su flujo de trabajo de desarrollo.
Creación y ejecución de una aplicación en contenedores en VS Code
Como ejemplo práctico, construyamos una aplicación sencilla de Node.js Express para ilustrar las capacidades de la extensión Docker. Comience creando una nueva carpeta en VS Code para su proyecto. Dentro de esta carpeta, cree un archivo llamado index.jse introduzca el siguiente código:
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 fragmento de código básico establece una pequeña aplicación Express que escucha en el puerto 4000 y responde con el mensaje «¡Bienvenido a nuestra aplicación Express!» al acceder a la URL raíz (/).Sienta las bases para probar su Dockerfile.
A continuación, necesitará un Dockerfile. En lugar de crearlo manualmente y especificar sus instrucciones, la extensión Docker puede facilitar este proceso. Abra la paleta de comandos presionando «+» ⇧⌘Pen Mac o Ctrl» Shift+» Pen Windows e ingrese el comando «< nombre del archivo>» Add Docker files to Workspace.
Seleccione Node.js como su plataforma de aplicación de las opciones proporcionadas.
Dirígete al archivo «package.json» ubicado en la raíz de tu proyecto. Este archivo es el archivo de configuración principal de tu aplicación y guiará a la extensión Docker en la generación de archivos esenciales relacionados con Docker.
A continuación, indique el número de puerto que utilizará su aplicación para que Docker pueda exponerla adecuadamente.
Seleccione Sí cuando se le solicite incluir el archivo Docker Compose.
La extensión Docker ahora generará un Dockerfile, un archivo “.dockerignore” y un archivo “compose.yaml”, según su selección.
Para continuar con la creación de su imagen Docker, haga clic derecho en el Dockerfile y seleccione Construir imagen, o alternativamente, ejecute Docker Images: Construir imagen desde la Paleta de comandos.
Después del proceso de compilación, navegue a la sección Imágenes en el Explorador de Docker para ver su proyecto recién creado reflejado allí:
Ahora, para ejecutar la imagen, abra la Paleta de comandos y ejecute container images: run, o simplemente haga clic derecho en su imagen y seleccione Ejecutar.
Seleccione su última imagen de la lista mostrada.
Por último, puedes validar que tu aplicación se esté ejecutando verificando la sección Contenedores en Docker Explorer.
Para acceder a su aplicación, haga clic derecho en el contenedor en ejecución en Docker Explorer y seleccione Abrir en el navegador.
Como resultado, podrá ver el contenedor en acción con su aplicación accesible a través del puerto previamente especificado.
Conclusión
La integración de Docker en Visual Studio Code optimiza el proceso de desarrollo, permitiendo a los desarrolladores construir, ejecutar y controlar contenedores de forma eficiente directamente desde su entorno de programación. Tras completar la configuración, tendrá acceso sin problemas para crear archivos Docker, navegar por contenedores e imágenes, y ver registros o salidas de terminal con un solo clic. Esta integración no solo simplifica la ejecución y las pruebas de aplicaciones, sino que también mantiene un flujo de trabajo organizado y productivo.
Artículos relacionados:
¿La nueva mensajería cifrada de X es una medida inteligente en materia de seguridad o simplemente un espejismo?
7:55
Solución de problemas de la advertencia «No cubra el área de los auriculares» en dispositivos Android
15:29
Transforma tu terminal en una página web compartible usando ttyd
8:14
Deja una respuesta