Retry 1555

frontend/Dockerfile

@@ -1,28 +1,19 @@
 # --- Etapa 1: Build ---
-# Usamos una imagen ligera de Node.js para instalar dependencias y compilar el frontend
 FROM node:20-alpine AS build
 WORKDIR /app
-
-# Copiamos package.json y package-lock.json para cachear las dependencias
 COPY package*.json ./
 RUN npm install
-
-# Copiamos el resto del código del frontend
 COPY . .
-# Ejecutamos el script de build de Vite
 RUN npm run build
 
 # --- Etapa 2: Producción ---
-# Usamos la imagen oficial de Nginx, que es muy pequeña y eficiente
 FROM nginx:1.25-alpine
 
-# Copiamos los archivos estáticos generados en la etapa de build
-# a la carpeta que Nginx sirve por defecto.
+# Copiamos los archivos estáticos generados
 COPY --from=build /app/dist /usr/share/nginx/html
 
-# Nginx ya está configurado para escuchar en el puerto 80 por defecto.
-# Simplemente lo exponemos.
-EXPOSE 80
+# Copiamos nuestra configuración personalizada de Nginx para el frontend
+COPY frontend.nginx.conf /etc/nginx/conf.d/default.conf
 
-# El comando por defecto de la imagen de Nginx ya inicia el servidor.
+EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

frontend/frontend.nginx.conf

@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    # Directorio raíz donde están los archivos de la app
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Configuración para servir los archivos estáticos y manejar el enrutamiento de la SPA
+    location / {
+        # Intenta servir el archivo solicitado directamente ($uri),
+        # luego como un directorio ($uri/),
+        # y si no encuentra nada, devuelve el index.html
+        # Esto es crucial para que el enrutamiento de React funcione.
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Opcional: optimizaciones para archivos estáticos
+    location ~* \.(?:css|js|jpg|jpeg|gif|png|ico|svg|woff|woff2)$ {
+        expires 1y;
+        add_header Cache-Control "public";
+    }
+}

frontend/nginx.conf

@@ -1,25 +0,0 @@
-server {
-    listen 80;
-    server_name widgets.eldia.com;
-
-    # Ubicación raíz para servir los archivos estáticos del frontend
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # Configuración para las rutas del frontend
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # --- Proxy Inverso para la API ---
-    # Todas las peticiones que empiecen con /api/ se redirigen al backend
-    location /api/ {
-        # El nombre 'backend-api' debe coincidir con el nombre del servicio en docker-compose.yml
-        # El puerto 8080 es el puerto que expone el contenedor de la API (no el host)
-        proxy_pass http://backend-api:8080; 
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-    }
-}