diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 8790e2e..ad65436 100644 --- a/frontend/Dockerfile +++ b/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;"] \ No newline at end of file diff --git a/frontend/frontend.nginx.conf b/frontend/frontend.nginx.conf new file mode 100644 index 0000000..035a90b --- /dev/null +++ b/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"; + } +} \ No newline at end of file diff --git a/frontend/nginx.conf b/frontend/nginx.conf deleted file mode 100644 index dcf7994..0000000 --- a/frontend/nginx.conf +++ /dev/null @@ -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; - } -} \ No newline at end of file