Dockerizar tu aplicaci贸n React (Vite)

 

Dockerizar tu aplicaci贸n React (Vite) 馃惓⚛️

Vamos a crear un contenedor Docker para tu app React creada con Vite. Veremos dos escenarios:

  • Modo desarrollo → con hot-reload (para seguir programando dentro de Docker).

  • Modo producci贸n → build optimizado con Nginx (para desplegar).

馃搵 Requisitos previos

HerramientaVerificar con
Docker Desktopdocker --version
Docker Composedocker compose version
Tu app React funcionando localmentenpm run dev

Estructura de partida (asumo que seguiste el tutorial anterior):

text
pasteles-app/
├── src/
├── public/
├── index.html
├── package.json
├── vite.config.js
└── ...

1️⃣ Crear el archivo .dockerignore

En la ra铆z de pasteles-app/, crea .dockerignore:

text
node_modules
dist
build
.git
.gitignore
.env
.env.local
.vscode
.idea
*.log
npm-debug.log*
.DS_Store
Dockerfile
docker-compose.yml
README.md

¿Por qu茅? Sin esto, Docker copiar铆a tu node_modules local (que puede pesar cientos de MB y tener binarios de tu SO) al contenedor, causando conflictos y builds lentos.

2️⃣ Configurar Vite para exponerse fuera del contenedor

Edita vite.config.js:

javascript
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',   // 馃憟 Permite conexiones desde fuera del contenedor
    port: 5173,
    strictPort: true,
    watch: {
      usePolling: true, // 馃憟 Necesario en Windows/Mac con Docker Desktop
    },
  },
});

Sin host: '0.0.0.0', Vite solo escucha en localhost dentro del contenedor y no podr谩s acceder desde tu navegador.

馃叞️ MODO DESARROLLO (con hot-reload)

Este es el modo recomendado mientras programas.

3️⃣A Crear Dockerfile.dev

En la ra铆z de pasteles-app/:

dockerfile
# Dockerfile.dev
FROM node:20-alpine

WORKDIR /app

# Copiamos solo los manifiestos primero (mejor cach茅 de capas)
COPY package*.json ./

# Instalamos dependencias
RUN npm install

# Copiamos el resto del c贸digo
COPY . .

# Exponemos el puerto de Vite
EXPOSE 5173

# Comando para desarrollo
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

4️⃣A Crear docker-compose.dev.yml

yaml
# docker-compose.dev.yml
services:
  react-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    container_name: pasteles-react-dev
    ports:
      - "5173:5173"
    volumes:
      # Montamos el c贸digo para hot-reload
      - .:/app
      # Volumen an贸nimo para node_modules (evita sobrescribirlo)
      - /app/node_modules
    environment:
      - CHOKIDAR_USEPOLLING=true
      - VITE_API_URL=http://localhost:8000/api
    stdin_open: true
    tty: true
    networks:
      - pasteles-net

networks:
  pasteles-net:
    driver: bridge

馃挕 El volumen - /app/node_modules es truco clave: le dice a Docker que mantenga los node_modules del contenedor (Linux) y no los de tu m谩quina host. Sin esto, ver谩s errores como Cannot find module 'vite'.

5️⃣A Levantar el contenedor en modo desarrollo

bash
# Construir y levantar
docker compose -f docker-compose.dev.yml up --build

# O en segundo plano
docker compose -f docker-compose.dev.yml up -d --build

Ver谩s algo como:

text
pasteles-react-dev  |   VITE v5.x  ready in 300 ms
pasteles-react-dev  |   ➜  Local:   http://localhost:5173/

Abre http://localhost:5173 en tu navegador. 馃帀

6️⃣A Comandos 煤tiles (modo dev)

bash
# Ver logs en vivo
docker compose -f docker-compose.dev.yml logs -f

# Detener
docker compose -f docker-compose.dev.yml down

# Entrar a la terminal del contenedor
docker exec -it pasteles-react-dev sh

# Instalar una nueva dependencia (dentro del contenedor)
docker exec -it pasteles-react-dev npm install axios

# Reconstruir desde cero
docker compose -f docker-compose.dev.yml down -v
docker compose -f docker-compose.dev.yml up --build

馃叡️ MODO PRODUCCI脫N (con Nginx)

Este es el modo que usar谩s para desplegar. Genera un build est谩tico y lo sirve con Nginx.

3️⃣B Crear Dockerfile (multi-stage)

En la ra铆z de pasteles-app/:

dockerfile
# ---------- ETAPA 1: BUILD ----------
FROM node:20-alpine AS builder

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .

# Variable de entorno para el build (apunta al backend de Laravel)
ARG VITE_API_URL=http://localhost:8000/api
ENV VITE_API_URL=$VITE_API_URL

RUN npm run build


# ---------- ETAPA 2: SERVIDOR ----------
FROM nginx:1.27-alpine

# Copiamos la config personalizada de Nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copiamos el build generado desde la etapa 1
COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

4️⃣B Crear nginx.conf

En la ra铆z de pasteles-app/:

nginx
server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # Gzip para mejor performance
    gzip on;
    gzip_types text/css application/javascript application/json image/svg+xml;
    gzip_min_length 1000;

    # Cache agresivo para assets (tienen hash en el nombre)
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # SPA fallback: cualquier ruta → index.html (para React Router)
    location / {
        try_files $uri $uri/ /index.html;
    }
}

馃挕 El try_files ... /index.html es clave para SPA. Sin esto, si el usuario recarga en /pasteles/5, Nginx dar铆a 404 porque esa ruta no existe como archivo. React Router maneja eso en el cliente.

5️⃣B Crear docker-compose.yml (producci贸n)

yaml
# docker-compose.yml
services:
  react-prod:
    build:
      context: .
      dockerfile: Dockerfile
      args:
        VITE_API_URL: http://localhost:8000/api
    container_name: pasteles-react-prod
    ports:
      - "8080:80"
    restart: unless-stopped
    networks:
      - pasteles-net

networks:
  pasteles-net:
    driver: bridge

6️⃣B Levantar en modo producci贸n

bash
# Construir la imagen
docker build -t pasteles-react:prod \
  --build-arg VITE_API_URL=http://localhost:8000/api .

# O con compose
docker compose up --build -d

Abre http://localhost:8080 y ver谩s tu app servida por Nginx. 馃殌

7️⃣ ⚠️ Conectar React con Laravel en Docker (CORS)

Como ahora React corre en http://localhost:8080 (prod) o http://localhost:5173 (dev), debes agregar esos or铆genes a CORS en Laravel.

Edita config/cors.php:

php
'allowed_origins' => [
    'http://localhost:5173',  // dev
    'http://localhost:8080',  // prod
],

Y limpia la cach茅:

bash
php artisan config:clear

8️⃣ (Opcional) Dockerizar tambi茅n Laravel + MySQL

Si quieres levantar todo el stack con un solo comando, aqu铆 va un docker-compose.yml completo en la ra铆z del proyecto padre:

text
proyecto/
├── laravel-app/        ← tu backend
├── pasteles-app/       ← tu frontend React
└── docker-compose.yml  ← orquestador

docker-compose.yml:

yaml
services:
  db:
    image: mysql:8.0
    container_name: pasteles-db
    restart: unless-stopped
    environment:
      MYSQL_DATABASE: laravel_db
      MYSQL_ROOT_PASSWORD: root
      MYSQL_PASSWORD: secret
      MYSQL_USER: laravel
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - pasteles-net

  laravel:
    build:
      context: ./laravel-app
      dockerfile: Dockerfile
    container_name: pasteles-laravel
    ports:
      - "8000:8000"
    depends_on:
      - db
    environment:
      DB_CONNECTION: mysql
      DB_HOST: db
      DB_PORT: 3306
      DB_DATABASE: laravel_db
      DB_USERNAME: laravel
      DB_PASSWORD: secret
    networks:
      - pasteles-net

  react-dev:
    build:
      context: ./pasteles-app
      dockerfile: Dockerfile.dev
    container_name: pasteles-react
    ports:
      - "5173:5173"
    volumes:
      - ./pasteles-app:/app
      - /app/node_modules
    environment:
      - VITE_API_URL=http://localhost:8000/api
    depends_on:
      - laravel
    networks:
      - pasteles-net

networks:
  pasteles-net:
    driver: bridge

volumes:
  db_data:

Con esto:

bash
docker compose up -d --build

Y tendr谩s los 3 servicios corriendo:

ServicioURL
Reacthttp://localhost:5173
Laravel APIhttp://localhost:8000/api/pasteles
MySQLlocalhost:3306

馃搧 Estructura final (solo React)

text
pasteles-app/
├── src/
├── public/
├── Dockerfile             ← Producci贸n (Nginx)
├── Dockerfile.dev         ← Desarrollo (Vite)
├── docker-compose.yml     ← Producci贸n
├── docker-compose.dev.yml ← Desarrollo
├── nginx.conf             ← Config Nginx
├── .dockerignore          ← Excluir archivos
├── package.json
├── vite.config.js
└── index.html

馃悰 Soluci贸n de problemas comunes

ErrorCausaSoluci贸n
Cannot find module 'vite'Volumen sobrescribe node_modulesAgregar - /app/node_modules al volumen
ERR_CONNECTION_REFUSED desde el navegadorVite no escucha en 0.0.0.0Agregar host: '0.0.0.0' en vite.config.js
Hot-reload no funciona (Windows/Mac)File watching no detecta cambiosusePolling: true en vite.config.js
CORS policy blockedOrigen no permitido en LaravelAgregar http://localhost:5173 en config/cors.php
Build falla con ENOSPCDocker sin espaciodocker system prune -a
Nginx da 404 al recargar en /rutaSPA fallback faltanteYa lo agregamos en nginx.conf
port is already allocatedPuerto ocupadoCambia el puerto o mata el proceso

馃Ч Comandos 煤tiles de Docker

bash
# Ver contenedores activos
docker ps

# Ver todos (incluidos detenidos)
docker ps -a

# Ver im谩genes
docker images

# Ver uso de recursos
docker stats

# Limpiar todo (⚠️ borra im谩genes y vol煤menes no usados)
docker system prune -a --volumes

# Ver logs de un contenedor espec铆fico
docker logs -f pasteles-react-dev

✅ Resumen de comandos

Desarrollo

bash
docker compose -f docker-compose.dev.yml up --build
# → http://localhost:5173

Producci贸n

bash
docker compose up --build -d
# → http://localhost:8080

Detener

bash
docker compose -f docker-compose.dev.yml down   # dev
docker compose down                             # prod

馃幆 ¿Cu谩ndo usar cada modo?

EscenarioModoArchivo
Estoy programando la appDevDockerfile.dev + docker-compose.dev.yml
Quiero mostrarla al clienteProdDockerfile + docker-compose.yml
Voy a desplegar en un servidorProdIgual, pero cambia VITE_API_URL al dominio real

Con esto ya tienes tu app React totalmente dockerizada

Comentarios

Publicar un comentario

Entradas m谩s populares de este blog

Tutorial CRUD con Laravel 12-Pastel::factory(50)->create();

    <a href = "{{ route('pasteles.create') }}" class = "btn btn-primary" >         <i class = "fas fa-plus" ></i> Nuevo Pastel     </a>   Introducci贸n Este tutorial est谩 dise帽ado para ense帽arte a crear un sistema CRUD (Create, Read, Update, Delete) completo en Laravel 12, utilizando las 煤ltimas caracter铆sticas y mejores pr谩cticas del framework. A diferencia del tutorial original (dise帽ado para Laravel 5), esta versi贸n incorpora las novedades de Laravel 12 y un enfoque m谩s moderno. 脥ndice Prop贸sito Comando 1-Configuraci贸n inicial composer create-project laravel/laravel nombre-proyecto 2-Creaci贸n de la migraci贸n php artisan make:migration create_pasteles_table 3-Creaci贸n del seeder php artisan make:seeder PastelSeeder 4-Creaci贸n del modelo php artisan make:model Pastel 5-Creaci贸n del controlador php artisan make:controller PastelController 6-Definici贸n de rutas php artisan route:list 7-Creaci贸n de vistas (Crear manua...
Leer m谩s

CRUD Completo con Laravel 12 - Gu铆a Pr谩ctica Paso a Paso-productos

  Introducci贸n En este tutorial, construiremos una aplicaci贸n CRUD (Create, Read, Update, Delete) completa desde cero utilizando Laravel 12. Desarrollaremos un sistema de gesti贸n de productos que te permitir谩 realizar todas las operaciones b谩sicas de base de datos. Este tutorial es ideal para consolidar todos los conocimientos adquiridos en los temas anteriores. 脥ndice Configuraci贸n del Proyecto Creaci贸n de la Migraci贸n Creaci贸n del Seeder Creaci贸n del Modelo Configuraci贸n del Enrutador Creaci贸n del Controlador Creaci贸n de las Vistas Ejecuci贸n y Pruebas Mejoras y Optimizaciones Ejercicio de Consolidaci贸n 1. Configuraci贸n del Proyecto Crear nuevo proyecto Laravel bash # Crear el proyecto composer create-project laravel/laravel crud-productos # Navegar al directorio cd crud-productos # Configurar archivo .env # Editar el archivo .env con tus credenciales de base de datos Configuraci贸n de la base de datos env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=crud_p...
Leer m谩s

CRUD en Laravel 12 con Git - Gu铆a para Principiantes

CRUD en Laravel 12 con Git - Gu铆a para Principiantes Este tutorial est谩 dise帽ado especialmente para principiantes que quieren aprender a crear un sistema CRUD completo en Laravel 12 mientras aprenden a usar Git correctamente. Cada paso incluye instrucciones claras de Git para que nunca te pierdas. 馃搵 Tabla de Contenidos Instalaci贸n y Git - Paso a Paso Crear la Migraci贸n - Primer Commit Crear Factory y Seeder Crear el Modelo Crear el Controlador y Form Requests Definir las Rutas Crear las Vistas Flujo de Trabajo Git para Principiantes 馃殌 1. Instalaci贸n y Git - Paso a Paso Requisitos Previos bash # 1. VERIFICAR INSTALACIONES # Abre tu terminal y escribe: # Verificar PHP (debe ser 8.2 o superior) php -v # Verificar Composer composer -V # Verificar Git (si no est谩 instalado, desc谩rgalo de https://git-scm.com) git --version Crear el Proyecto Laravel bash # 2. CREAR EL PROYECTO # Esto crea una carpeta llamada "pasteles-app" con Laravel 12 composer create-project la...
Leer m谩s