# --- Etapa 1: Build ---
# Usamos una imagen de Node.js para construir los archivos estáticos de React.
FROM node:20-alpine AS build
WORKDIR /app

# Copiamos los archivos de dependencias y las instalamos.
COPY package.json package-lock.json ./
RUN npm install

# Copiamos el resto del código del frontend.
COPY . .

# Ejecutamos el script de build de Vite, que genera la carpeta 'dist'.
RUN npm run build

# --- Etapa 2: Serve ---
# Usamos una imagen de Nginx súper ligera para servir los archivos estáticos.
FROM nginx:stable-alpine
WORKDIR /usr/share/nginx/html

# Eliminamos el index.html por defecto de Nginx.
RUN rm -f index.html

# Copiamos los archivos construidos desde la etapa anterior a la carpeta que Nginx sirve.
COPY --from=build /app/dist .

# Nginx por defecto escucha en el puerto 80, así que lo exponemos.
EXPOSE 80

# Comando para iniciar Nginx. Esto asegura que se mantenga corriendo.
CMD ["nginx", "-g", "daemon off;"]