Ejecutar un DockerFile en Visual Studio Code

Finalizar una aplicación web va más allá de terminar de escribir líneas en tu editor de código. Para pasar a la etapa de producción, hace falta utilizar distintas herramientas que nos permiten comunicarle nuestra aplicación al resto del equipo. En este post, te enseñaremos cómo ejecutar un Dockerfile en Visual Studio Code para empaquetar el build de tu aplicación en un contenedor NGINX.

¿Cómo ejecutar un Dockerfile en Visual Studio Code?

Antes de enseñarte cómo ejecutar un Dockerfile en Visual Studio Code, te sugerimos profundizar más en este elemento. Para ello, puedes leer nuestro post sobre qué es Dockerfile. A continuación, vamos a ejecutar un Dockerfile en Visual Studio Code para empaquetar automáticamente un build de una aplicación en un contenedor de NGINX. Por ello, te recomendamos también echarle un vistazo a los artículos sobre el comando build en create-react-app y qué es NGINX para conocer el proceso desde el inicio.

Instalación de Docker y configuración de Dockerfile

Instalación de Docker

Para empezar, necesitas tener Docker instalado en tu máquina. Aquí te dejo una guía rápida para instalar Docker en diferentes sistemas operativos:

• Windows: Descarga Docker Desktop desde aquí e instálalo siguiendo las instrucciones.
• Mac: Descarga Docker Desktop desde aquí e instálalo siguiendo las instrucciones.
• Linux: Sigue las instrucciones específicas para tu distribución aquí.

Configuración de Dockerfile

El primer paso para ejecutar un Dockerfile en Visual Studio Code es crear un archivo en donde insertaremos las instrucciones necesarias. Para ello, basta con añadir un nuevo archivo y llamarlo Dockerfile. Allí insertaremos las instrucciones que queremos para generar nuestra aplicación. Es decir, como ya tenemos nuestro código desarrollado, ahora queremos automatizar el proceso de generar el build, coger el resultado, empaquetarlo en un contenedor basado en NGINX y poner nuestra aplicación en funcionamiento.

Configuración de Visual Studio Code para Docker

Para trabajar eficientemente con Docker en Visual Studio Code, es útil instalar la extensión Docker:

1. Abre Visual Studio Code.
2. Ve a la extensión de Marketplace (icono de cuadrado en la barra lateral izquierda).
3. Busca «Docker» y haz clic en «Install» en la extensión oficial de Microsoft.

Además, asegúrate de tener configurado el terminal integrado de VS Code para interactuar con Docker.

Explicación detallada de cada instrucción Dockerfile

Los archivos Dockerfile se basan en una instrucción FROM que define de qué imagen debemos partir. Ahora, el comando básico del build es npm, que está en nuestra máquina, porque hemos instalado node.js. Por ello, la primera instrucción es decirle al Dockerfile que estamos partiendo de un node:

//Ejecutar un DockerFile en Visual Studio Code
FROM node:16 as builder

La anterior instrucción parte de una imagen de un contenedor de Docker. Esto es básicamente una serie de instrucciones para tener una máquina Linux básica con node instalado. Ahora, crearemos una carpeta dentro de este contenedor con la siguiente instrucción:

//Ejecutar un DockerFile en Visual Studio Code
WORKDIR /app 

El siguiente paso es copiar lo que tengamos dentro de nuestros archivos package.json dentro del contenedor creado. Esto es importante porque instalaremos las dependencias que están dentro de los archivos, lo cual nos permitirá ejecutar los comandos npm start y npm run build:

//Ejecutar un DockerFile en Visual Studio Code
COPY package*.json ./

En la instrucción anterior, el asterisco significa hacer copia de todos los archivos que empiecen por package y terminen con .json. Es decir, son los archivos como package-lock.json y package.json.

Entonces, la siguiente instrucción es ejecutar una instalación de npm, posible porque partimos de un contenedor de node:

//Ejecutar un DockerFile en Visual Studio Code
RUN npm install

Una vez hecho el install, queremos que se copie el resto del contenido a la carpeta app que hemos creado dentro del contenedor.

//Ejecutar un DockerFile en Visual Studio Code
COPY . .

Para definir qué archivos no quieres pasar de un espacio a otro, puedes crear un archivo .dockerignore, que funciona de una manera muy similar al .gitignore. Entonces, podemos escribir dentro de este archivo los archivos node_modules y build, pues serán creados en el proceso que estamos definiendo.

Una vez hecho este proceso, podemos arrancar con la construcción de la aplicación. Para ello, usamos la siguiente instrucción:

//Ejecutar un DockerFile en Visual Studio Code
RUN npm run build

La instrucción anterior es análoga al proceso que hemos ejecutado en nuestro post sobre el comando build en create-react-app. La diferencia ahora es que Docker lo hará automáticamente sin necesidad de que alguien vaya a la terminal y escriba el comando.

Una vez ejecutada esta acción, el resultado estará dentro de la carpeta build en nuestro proyecto. Por ello, el siguiente paso es meter el resultado en un contenedor NGINX con la siguiente instrucción. Ten en cuenta que el contenedor elegido es superligero, pues se basa en Linux con un NGINX instalado. Además, la versión stable-alpine es ideal para descargas rápidas.

FROM nginx:stable-alpine

Ahora, la idea es copiar el contenido de la carpeta build de app de nuestro contenedor builder. Esto se debe copiar, dentro del contenedor de NGINX creado, en nuestra carpeta HTML, donde se encuentra el directorio para servir nuestra aplicación:

COPY --from=builder /app/build /usr/share/nginx/html

El paso final es pasar un archivo de configuración con las instrucciones necesarias para que NGINX arranque correctamente:

COPY --from=builder /app/nginx.conf /etc/nginx/conf.d/default.conf

Con la línea de instrucciones anterior estamos reemplazando la configuración por defecto del contenedor NGINX por nuestro propio archivo de configuración. Las últimas líneas necesarias para ejecutar un Dockerfile en Visual Studio Code son las siguientes:

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Depuración y solución de problemas

Si te encuentras con problemas al ejecutar tu Dockerfile, aquí tienes algunos consejos para depurarlo:

• Revisa los logs: Utiliza el comando docker logs <container_id> para revisar los logs del contenedor y encontrar errores específicos.
• Interactivo: Ejecuta el contenedor en modo interactivo con docker run -it <image_id> /bin/sh para inspeccionar el contenedor directamente.
• Simplifica el Dockerfile: Comienza con un Dockerfile simple y ve añadiendo complejidad poco a poco para identificar dónde surgen los problemas.

Optimización del Dockerfile

Para optimizar tu Dockerfile y reducir el tamaño de la imagen, considera lo siguiente:

• Minimiza las capas: Combina múltiples comandos RUN en una sola línea siempre que sea posible.
• Utiliza imágenes base ligeras: Usa versiones alpine de las imágenes base siempre que sea posible.
• Limita los archivos copiados: Utiliza .dockerignore para excluir archivos innecesarios.

Pruebas y validación del contenedor

Una vez que tu contenedor está en funcionamiento, es importante probar y validar su funcionalidad:

• Pruebas automatizadas: Utiliza herramientas como Selenium para realizar pruebas automatizadas de tu aplicación dentro del contenedor.
• Validación manual: Abre tu aplicación en un navegador y asegúrate de que todas las funcionalidades están funcionando correctamente.
• Monitorización: Implementa soluciones de monitorización como Prometheus para mantener un seguimiento continuo del rendimiento de tu contenedor.

Ahora que sabes cómo ejecutar un DockerFile en Visual Studio Code, ¡puedes utilizar este conocimiento en tus propios proyectos web! Para continuar aprendiendo sobre el desarrollo de este tipo de proyectos, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio donde aprenderás a desarrollar para la web con diferentes herramientas y lenguajes de programación. Así, te convertirás en un experto del desarrollo web en tan solo unos meses. ¿A qué esperas para dar el siguiente paso en tu formación y adentrarte en el mercado laboral del sector IT? ¡Inscríbete ya!