Ejecutar un DockerFile en Visual Studio Code

Autor: | Última modificación: 11 de octubre de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post:

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;»]

¿Cuál es el siguiente paso?

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!