En esta publicación de blog, exploraremos Docker y explicaremos cómo crear una compilación de Docker de varias etapas con una aplicación Nginx simple. Si recién estás comenzando con Docker, no te preocupes, ¡lo detallaré todo paso a paso para que puedas seguirlo!

El archivo Docker

Aquí está el Dockerfile con el que trabajaremos:

FROM node:18-alpine AS installer

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:latest AS deployer

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

Descomprimiendo el Dockerfile

Ahora, analicemos lo que sucede en este Dockerfile, paso a paso:

1. DESDE el nodo: instalador de 18-alpine AS

Esta línea extrae la imagen oficial de Node.js (versión 18 en Alpine Linux) de Docker Hub. Piense en Docker Hub como una biblioteca de imágenes. Al usar esta línea, especificamos que queremos usar Node.js como nuestra imagen base para la primera etapa de nuestra compilación.

2. DIRTRABAJO /aplicación

Este comando establece el directorio de trabajo dentro del contenedor en /app. Puedes considerar esto como crear una carpeta dedicada para tu aplicación dentro del contenedor, similar a cómo organizarías archivos en tu escritorio.

3. COPIAR paquete*.json ./

Aquí, copiamos los archivos package.json y package-lock.json de nuestro directorio local al directorio de trabajo del contenedor. Estos archivos contienen información sobre las dependencias que nuestra aplicación necesita.

4. EJECUTAR instalación de npm

Este comando ejecuta npm install, que instala todas las dependencias especificadas en el paquete.json.

5. COPIAR. .

Esta línea copia el resto de los archivos de nuestra aplicación en el contenedor. Trae todo desde nuestro directorio local al directorio /app dentro del contenedor.

6. EJECUTAR npm ejecutar compilación

Ahora compilamos nuestra aplicación usando el comando npm run build. Este paso generalmente transforma nuestro código (a menudo React, en este caso) en un paquete estático, listo para ser entregado a los usuarios. El resultado de este comando se colocará en un directorio de compilación dentro de /app.

7. DESDE nginx: último implementador de AS

En esta línea, cambiamos a una nueva imagen base: Nginx. Nginx es un potente servidor web que puede servir archivos estáticos, como los que acabamos de crear. Este es el comienzo de nuestra segunda etapa en el proceso de construcción de varias etapas.

8. COPIAR --from=instalador /app/build /usr/share/nginx/html

Aquí, copiamos los archivos de la aplicación compilada de la etapa anterior (instalador) en el directorio de servicio de Nginx. El indicador --from=installer le indica a Docker que tome archivos de la etapa de instalación que acabamos de definir.

Ejecutando su contenedor Docker

Una vez configurado su Dockerfile, puede compilar y ejecutar su contenedor Docker con los siguientes comandos:

docker build -t your-app-name .
docker run -dp 3000:80 your-app-name

Asegúrate de reemplazar el nombre de tu aplicación con el nombre que elijas. El indicador -dp desconectará su contenedor y asignará el puerto 3000 de su máquina host al puerto 80 del contenedor, lo que le permitirá acceder a su aplicación en http://localhost:3000.

Conclusión

¡Y ahí lo tienes! Acaba de crear una compilación de Docker de varias etapas que lleva su aplicación del desarrollo a la producción utilizando Nginx. Si tiene alguna pregunta o idea sobre el proceso, ¡no dude en dejar un comentario a continuación!

Problemas: cosas a tener en cuenta

Un problema común al trabajar con esta configuración es olvidar asignar los números de puerto correctos. Nginx normalmente escucha en el puerto 80 dentro del contenedor, pero si intentas acceder a la aplicación en tu máquina local, necesitarás reenviar el puerto correcto desde el contenedor a tu máquina. Por ejemplo, si desea acceder a la aplicación en localhost:3000, deberá ejecutar el contenedor con el indicador -p 3000:80 para asignar el puerto 3000 de su máquina al puerto 80 del contenedor.

Si omites este paso, te preguntarás por qué todo se creó perfectamente pero no puedes acceder a la aplicación en tu navegador.

Etiquetas y Menciones

@piyushsachdeva
Vídeo del día 3