Levantando un Build de React con Docker Compose

Introducción a Docker y Docker Compose

Docker se ha convertido en una herramienta indispensable para los desarrolladores modernos, especialmente cuando se trabaja en proyectos web. Con Docker, podemos crear contenedores ligeros que encapsulan nuestras aplicaciones y sus dependencias, lo que facilita la gestión del entorno de desarrollo y despliegue. Esto es especialmente útil en aplicaciones de React, donde el entorno puede variar de un desarrollador a otro.

Docker Compose, por otro lado, es una herramienta que permite definir y ejecutar aplicaciones multi-contenedor. Nos proporciona un archivo de configuración donde podemos establecer los diferentes servicios que componen nuestra aplicación, simplificando el proceso de orquestación de contenedores. En este tutorial, te mostraré cómo levantar un build de una aplicación de React utilizando Docker Compose.

A lo largo de este artículo, exploraremos el proceso desde la creación de nuestra aplicación de React hasta la configuración de Docker y Docker Compose, asegurándonos de que puedas replicar fácilmente estos pasos en tus propios proyectos.

Configuración del Proyecto React

Antes de comenzar a trabajar con Docker, primero necesitamos construir nuestra aplicación de React. Si aún no tienes una aplicación de React, puedes crear una fácilmente usando Create React App. Abre tu terminal y ejecuta el siguiente comando:

npx create-react-app mi-app

Este comando generará una nueva carpeta llamada ‘mi-app’ con la estructura básica de un proyecto de React. Una vez creado el proyecto, navega a la carpeta del proyecto:

cd mi-app

Ahora que tenemos nuestra aplicación, es hora de construirla para producción. Esto se hace ejecutando el siguiente comando:

npm run build

El comando anterior creará una carpeta llamada ‘build’ dentro de tu proyecto, que contiene los archivos estáticos optimizados listos para ser servidos en producción. Estos archivos incluirán tu HTML, CSS y JavaScript minificados y optimizados para el rendimiento.

Creando el Dockerfile

Un Dockerfile es un archivo de texto que contiene todos los comandos necesarios para construir una imagen de Docker. Para nuestra aplicación de React, necesitaremos crear un Dockerfile simple que se encargue de servir nuestros archivos estáticos desde la carpeta ‘build’. Aquí tienes un ejemplo de cómo debería lucir tu Dockerfile:

FROM node:14 AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

En este Dockerfile, estamos utilizando una imagen de Node.js para construir nuestra aplicación y, después de la construcción, utilizamos Nginx para servirla. Primero, establecemos nuestro directorio de trabajo y copiamos el archivo package.json y package-lock.json para instalar las dependencias. Luego, copiamos el resto de los archivos y ejecutamos npm run build.

Una vez que tenemos nuestros archivos construidos, cambiamos a la imagen de Nginx y copiamos los archivos de la carpeta ‘build’ a la ubicación donde Nginx espera los archivos. Finalmente, exponemos el puerto 80 y mantenemos Nginx en primer plano con el comando CMD.

Configurando Docker Compose

Ahora que tenemos nuestro Dockerfile listo, el siguiente paso es configurar Docker Compose. Crearemos un archivo llamado docker-compose.yml en la raíz de nuestro proyecto. Este archivo se encargará de definir cómo se deben ejecutar nuestros contenedores. Aquí tienes una configuración básica:

version: '3'
services:
  web:
    build: .
    ports:
      - "3000:80"
    restart: always

En este archivo de configuración, especificamos la versión de Docker Compose que estamos utilizando y definimos un servicio llamado ‘web’. Utilizamos la opción ‘build’ para construir nuestra imagen a partir del Dockerfile en la raíz de nuestro proyecto.

Luego, configuramos los puertos para que se puedan acceder a nuestra aplicación a través del puerto 3000 de la máquina host, redirigiéndolo al puerto 80 del contenedor de Nginx. Finalmente, agregamos la opción ‘restart: always’ para asegurarnos de que nuestro contenedor se reinicie automáticamente en caso de que falle.

Levantando la Aplicación con Docker Compose

Con nuestros archivos Dockerfile y docker-compose.yml configurados, ahora estamos listos para levantar nuestra aplicación. Abre tu terminal y ejecuta el siguiente comando para construir y levantar los servicios definidos en el archivo docker-compose.yml:

docker-compose up --build

El comando anterior no solo levantará los contenedores, sino que también los construirá nuevamente en caso de que haya algún cambio en los archivos. Verás los registros de Nginx en la terminal, y cuando todo funcione correctamente, podrás acceder a tu aplicación de React en http://localhost:3000.

Si necesitas detener la aplicación, puedes hacerlo presionando Ctrl + C en la terminal donde se está ejecutando, o ejecutando el siguiente comando en otra terminal:

docker-compose down

Conclusión

Levantar una aplicación de React con Docker Compose puede sonar complicado al principio, pero como hemos visto, es un proceso directo que simplifica el despliegue y la gestión de nuestras aplicaciones. Docker y Docker Compose no solo nos ayudan a crear un entorno de desarrollo consistente, sino que también facilitan la implementación en producción, asegurando que nuestros desarrollos funcionen de manera uniforme en diferentes entornos.

Desde la creación de un proyecto de React hasta la configuración de Docker, este proceso te proporciona las herramientas necesarias para llevar tus habilidades de desarrollo al siguiente nivel. No olvides explorar más sobre Docker y cómo puedes integrarlo en tus propios flujos de trabajo de desarrollo y despliegue.

Espero que este tutorial te haya ayudado a comprender cómo levantar un build de React utilizando Docker Compose. Si tienes alguna pregunta o quieres compartir tus propios consejos y trucos sobre Docker y React, no dudes en dejar un comentario debajo. ¡Feliz codificación!