Contenedor Docker para generar un build de React

Tiempo de lectura: < 1 minuto

Hola, hoy os voy a compartir un contenedor muy util para generar un build de React. Contiene ya todo lo necesario para generarlo. Además, es compatbile con Vite.js

Lo primero que vamos a hacer es crear el archivo docker-compose.yml

version: '3.1'

services:
  react-app:
    container_name: react-app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./dist:/usr/src/app/dist
  # Aumenta la memoria asignada al contenedor (ajusta según tus necesidades)
    mem_limit: 2g

Ahora vamos a crear el Dockerfile

# Utiliza una imagen de Node.js como base
FROM node:19-bullseye

WORKDIR /usr/src/app
COPY . .

# Instala las dependencias, construye la aplicación
RUN npm install 

EXPOSE 3000

# CMD para iniciar la aplicación React en modo de desarrollo
CMD ["npm", "run", "dev"]

Recuerda que el código de tu aplicación tiene que estar en el mismo directorio dónde esté el Docker.

Para ejecutarlo solo tendremos que escribir:

docker compose up -d

Y una vez tenemos el contenedor funcionando, escribimos este comando que nos generará la versión de producción compilada en el directorio /dist

docker exec react-app npm run build

Y tendremos lista nuestra carpeta Dist con la web de React compilada.

Para borrar el contenedor y el entorno, una vez compilada haremos:

docker compose -f docker-compose-build.yml down --rmi all