Cómo dockerizar aplicaciones React
¿Alguna vez has escuchado 'en mi máquina funciona' al intentar ejecutar una aplicación en otro entorno?
Docker es la herramienta que elimina este problema, asegurando que tu aplicación funcione igual en cualquier sistema. En este post, veremos qué es Docker, por qué deberías usarlo y cómo dockerizar una aplicación React.
Aunque podríamos profundizar mucho más en la creación de imágenes y contenedores Docker, el objetivo es ofrecer una guía básica que te permita dar los primeros pasos con esta tecnología de una forma rápida y sencilla.
¿Qué es Docker y por qué usarlo?
Docker es una plataforma que permite empaquetar aplicaciones junto con todas sus dependencias en imágenes. Las imágenes son reproducibles y sirven como plantilla para crear contenedores, que son entornos ligeros y aislados donde se ejecutan las aplicaciones. Esto facilita su ejecución en cualquier sistema donde Docker esté instalado, desde entornos locales hasta servidores en producción.
Beneficios clave de Docker
- Garantiza que una aplicación se ejecute siempre de la misma manera en cualquier sistema.
- Permite implementar software de forma rápida en servidores locales o en la nube.
- Los equipos de desarrollo pueden trabajar en entornos idénticos, evitando problemas de compatibilidad.
- Es ideal para arquitecturas de microservicios, ya que cada servicio puede ejecutarse en su propio contenedor.
- Facilita la creación de entornos aislados para realizar pruebas, asegurando que no interfieran entre ellos.
- Consume menos recursos que una máquina virtual tradicional.
- Los contenedores se inician en segundos, mejorando los tiempos de despliegue.
Debido a estas características utilizar Docker con aplicaciones de React que requieren configuraciones específicas (versiones compatibles de Node.js, dependencias npm, etc.) nos proporciona un entorno donde siempre se utilice la versión correcta de Node.js, las dependencias estén perfectamente controladas y no entren en conflicto con otras aplicaciones y el entorno de producción sea idéntico al de desarrollo.
Guía paso a paso para dockerizar una aplicación React
Requisitos previos
Antes de empezar, asegúrate de tener instalado Docker y Docker Compose en tu máquina.
Sigue estas indicaciones según tu sistema operativo:
- Windows: Docker Desktop para Windows.
- macOS: Docker Desktop para Mac.
- Linux: Instalar Docker siguiendo la documentación oficial y Docker Compose si no viene incluido.
Una vez tengamos Docker y Docker Compose instalados, los pasos a seguir son los siguientes:
Paso 1: Crear un archivo Dockerfile
Crea un archivo llamado Dockerfile en el directorio raíz de tu proyecto con el siguiente contenido (la versión de node y las rutas a los directorios deberán coincidir con los que correspondan con proyecto):
# Usa una imagen base de Node.js
FROM node:20
# Establece el directorio de trabajo
WORKDIR /app
# Copia los archivos package.json y package-lock.json
COPY package\*.json ./
# Instala las dependencias
RUN npm install
# Copia el resto del código de la aplicación
COPY . .
# Construye la aplicación
RUN npm run build
# Expone el puerto en el que la aplicación se ejecutará
EXPOSE 3000
# Comando para iniciar la aplicación
CMD \["npm", "start"\]
Paso 2: Crear un archivo .dockerignore
Crea un archivo llamado .dockerignore para excluir archivos innecesarios en la construcción del contenedor. Esto optimiza el tamaño del contenedor y acelera su construcción.
.node_modules
npm-debug.log
Dockerfile
docker-compose.yml
.DS_Store
Paso 3: Configurar docker-compose.yml
Crea un archivo docker-compose.yml en el directorio raíz del proyecto con la siguiente configuración:
services:
app:
build:
context: .
dockerfile: Dockerfile
ports:
- "3000:3000"
env_file:
- .env
volumes:
- .:/app
command: >
sh -c "npm run build && npm start"
Este archivo:
- Mapea el puerto local 3000 al puerto 3000 del contenedor.
- Incluye los archivos del proyecto como un volumen para facilitar el desarrollo.
- Usa el comando npm run build && npm start para compilar e iniciar la aplicación.
Paso 4: Construir y levantar el contenedor
Para construir y levantar el contenedor de nuestra aplicación en nuestra máquina podemos utilizar la terminal donde debemos ejecutar el siguiente comando:
docker compose up --build
Paso 5: Crear una imagen de la aplicación
Si necesitamos crear una imagen para distribuirla o guardarla, podemos utilizar estos comandos en la terminal:
docker build -t nombre-imagen:tag .
docker save -o nombre-archivo-imagen.tar nombre-imagen:tag
El tag se puede omitir en cuyo caso se asignará por defecto latest como etiqueta. Pero se recomienda usarla para poder tener control de las versiones de nuestras imágenes. Por ejemplo:
docker build -t my-app:v1.0 .
docker save -o my-app.tar my-app:v1.0
Con estos pasos tendremos una imagen de nuestra aplicación con la que podremos realizar varias operaciones como, por ejemplo:
- Crear contenedores a partir de la imagen.
- Transferirla a otros entornos ya sea mediante servicios de intercambio de archivos (Drive, Dropbox, etc.), memorias USB, etc.
- Guardarla como copia de seguridad.
- Subir la imagen a un repositorio (registro) de imágenes Docker como Docker Hub, Amazon Elastic Container Registry, etc.
- …
Y con esto concluye el paso a paso para dockerizar aplicaciones React.
Espero que esta guía te ayude a construir tus imágenes y contenedores para compartirlas, guardarlas como backup e incluso subirlas a un repositorio si así lo deseas.
Ya puedes olvidarte del clásico problema de “en mi máquina funciona”.