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 en nuestro blog sobre desarrollo web. 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.
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.
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:
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:
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:
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:
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.
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:
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;»]
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!
