Fix 1738
This commit is contained in:
		| @@ -1,34 +1,19 @@ | |||||||
| # --- Etapa 1: Build (Construcción) --- | # --- Etapa 1: Build --- | ||||||
| # Usamos una imagen de Node.js para instalar dependencias y construir la aplicación de React. |  | ||||||
| FROM node:20-alpine AS build | FROM node:20-alpine AS build | ||||||
|  |  | ||||||
| # Establecemos el directorio de trabajo dentro del contenedor. |  | ||||||
| WORKDIR /app | WORKDIR /app | ||||||
|  | COPY package*.json ./ | ||||||
| # Copiamos los archivos de manifiesto del proyecto. |  | ||||||
| COPY package.json ./ |  | ||||||
| COPY package-lock.json ./ |  | ||||||
|  |  | ||||||
| # Instalamos las dependencias. |  | ||||||
| RUN npm install | RUN npm install | ||||||
|  |  | ||||||
| # Copiamos el resto del código fuente de la aplicación. |  | ||||||
| COPY . . | COPY . . | ||||||
|  |  | ||||||
| # Ejecutamos el script de construcción de Vite para generar los archivos estáticos. |  | ||||||
| RUN npm run build | RUN npm run build | ||||||
|  |  | ||||||
| # --- Etapa 2: Serve (Servir) --- | # --- Etapa 2: Producción --- | ||||||
| # Usamos una imagen de Nginx, que es un servidor web muy ligero y eficiente. |  | ||||||
| # Es ideal para servir archivos estáticos (HTML, CSS, JS). |  | ||||||
| FROM nginx:1.25-alpine | FROM nginx:1.25-alpine | ||||||
|  |  | ||||||
| # Copiamos los archivos de producción construidos en la etapa anterior |  | ||||||
| # al directorio por defecto donde Nginx sirve los archivos. |  | ||||||
| COPY --from=build /app/dist /usr/share/nginx/html | COPY --from=build /app/dist /usr/share/nginx/html | ||||||
|  |  | ||||||
| # Copiamos nuestra configuración de Nginx para manejar el enrutamiento de la SPA | # Copia la configuración de Nginx al contenedor del frontend | ||||||
| COPY frontend.nginx.conf /etc/nginx/conf.d/default.conf | COPY frontend.nginx.conf /etc/nginx/conf.d/default.conf | ||||||
|  |  | ||||||
| # Exponemos el puerto 80 (el puerto por defecto de Nginx). |  | ||||||
| EXPOSE 80 | EXPOSE 80 | ||||||
|  | # El CMD es opcional ya que la imagen base lo tiene, pero no hace daño | ||||||
|  | CMD ["nginx", "-g", "daemon off;"] | ||||||
| @@ -5,17 +5,13 @@ server { | |||||||
|     root /usr/share/nginx/html; |     root /usr/share/nginx/html; | ||||||
|     index index.html; |     index index.html; | ||||||
|  |  | ||||||
|     # Bloque para activos estáticos (manifest.json, js, css, etc.) |  | ||||||
|     location ~* \.(?:manifest\.json|js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ { |  | ||||||
|         # Si no encuentra el archivo, devuelve un error 404. ¡No el index.html! |  | ||||||
|         try_files $uri =404; |  | ||||||
|          |  | ||||||
|         expires 1y; |  | ||||||
|         add_header Cache-Control "public"; |  | ||||||
|     } |  | ||||||
|  |  | ||||||
|     # Bloque para las rutas de la aplicación de React |  | ||||||
|     location / { |     location / { | ||||||
|         try_files $uri $uri/ /index.html; |         try_files $uri $uri/ /index.html; | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  |     # Esta sección separada es buena práctica | ||||||
|  |     location ~* \.(?:css|js|jpg|jpeg|gif|png|ico|svg|woff|woff2)$ { | ||||||
|  |         expires 1y; | ||||||
|  |         add_header Cache-Control "public"; | ||||||
|  |     } | ||||||
| } | } | ||||||
		Reference in New Issue
	
	Block a user