Archivo `Dockerfile`

Este archivo es una "receta" fundamental para Docker, que le indica cómo construir una imagen de tu aplicación. Una imagen Docker es un paquete ligero, independiente y ejecutable que incluye todo lo necesario para ejecutar un software, incluyendo el código, un tiempo de ejecución, bibliotecas, variables de entorno y archivos de configuración.

Descripción: Dockerfile contiene una serie de instrucciones para ensamblar tu aplicación en una imagen de Docker. Utiliza un enfoque de construcción multi-etapas (multi-stage build) para optimizar el tamaño de la imagen final. Primero, construye la aplicación React/Vite, y luego copia los artefactos resultantes a una imagen Nginx más ligera para servir el contenido estático.
Propósito: Automatizar el proceso de empaquetar tu aplicación frontend en un contenedor Docker. Esto asegura que la aplicación se ejecute de manera consistente en cualquier entorno (desarrollo, pruebas, producción con Docker), eliminando problemas de "funciona en mi máquina" y creando una imagen optimizada para el despliegue.
Instrucciones Clave:
- Etapa de Construcción (builder):
  - FROM node:18-alpine AS builder: Define la primera etapa, usando una imagen ligera de Node.js (basada en Alpine Linux) como entorno para construir la aplicación. Se le asigna el alias builder.
  - WORKDIR /app: Establece /app como el directorio de trabajo predeterminado dentro de esta etapa.
  - COPY package*.json ./: Copia package.json y package-lock.json (o yarn.lock) al contenedor. Esto es crucial para que Docker pueda cachear la capa de instalación de dependencias de forma eficiente.
  - RUN npm install: Ejecuta el comando para instalar todas las dependencias del proyecto.
  - COPY . .: Copia el resto del código fuente de tu aplicación frontend al directorio de trabajo. Los archivos especificados en .dockerignore se excluyen de esta copia.
  - RUN npm run build: Ejecuta el script de build definido en tu package.json. Este comando compilará tu aplicación Vite y generará los archivos estáticos listos para producción (normalmente en la carpeta dist/).
- Etapa de Servido (nginx):
  - FROM nginx:stable-alpine: Define la segunda etapa, usando una imagen oficial de Nginx muy ligera. Nginx es un servidor web altamente eficiente, ideal para servir archivos estáticos de aplicaciones SPA.
  - COPY nginx.conf /etc/nginx/conf.d/default.conf: Copia un archivo de configuración personalizado de Nginx (que se asume está en la raíz de tu proyecto) al contenedor. Este archivo es crucial para las SPAs (Single Page Applications) de React, ya que le dice a Nginx cómo redirigir todas las rutas a index.html para que React Router maneje el enrutamiento del lado del cliente.
  - COPY --from=builder /app/dist /usr/share/nginx/html: Esta instrucción es la esencia del build multi-etapas. Copia los archivos estáticos (el resultado del npm run build) desde la etapa builder (--from=builder /app/dist) al directorio donde Nginx sirve los archivos (/usr/share/nginx/html). Esto asegura que la imagen final solo contenga lo esencial.
  - EXPOSE 80: Declara que el contenedor escuchará en el puerto 80 (el puerto HTTP estándar para servidores web).
  - CMD ["nginx", "-g", "daemon off;"]: Define el comando predeterminado que se ejecutará cuando se inicie un contenedor a partir de esta imagen. Inicia Nginx y lo mantiene en primer plano.
Rol en el Proyecto (Contexto Docker): Este Dockerfile es la piedra angular del despliegue basado en contenedores para tu aplicación frontend. Permite que tu aplicación React/Vite sea empaquetada como un microservicio ligero y ejecutable, facilitando su integración en pipelines de CI/CD (Integración y Despliegue Continuos) y su ejecución en cualquier plataforma de contenedores (Docker Swarm, Kubernetes, etc.).

typescript

# Dockerfile

# --- Etapa 1: Construcción de la Aplicación Frontend ---
# Usamos una imagen Node.js ligera (basada en Alpine) para construir la aplicación.
# El alias 'builder' nos permite referenciar esta etapa más adelante.
FROM node:18-alpine AS builder

# Establecemos el directorio de trabajo dentro del contenedor para esta etapa.
WORKDIR /app

# Copiamos los archivos de manifiesto de dependencias (package.json y package-lock.json).
# Esto es vital para que Docker pueda cachear la capa de instalación de dependencias de forma eficiente.
COPY package*.json ./

# Instamos todas las dependencias del proyecto.
# Si package.json no ha cambiado, esta capa se utilizará desde la caché de Docker, acelerando futuras construcciones.
RUN npm install

# Copiamos el resto del código fuente de la aplicación al directorio de trabajo.
# Los archivos especificados en .dockerignore serán excluidos.
COPY . .

# Ejecutamos el comando de build de Vite.
# Este script está definido en package.json y compilará la aplicación, generando los archivos estáticos en 'dist/'.
RUN npm run build


# --- Etapa 2: Servir la Aplicación Estática con Nginx ---
# Usamos una imagen oficial y muy ligera de Nginx para servir los archivos compilados.
FROM nginx:stable-alpine

# Copiamos un archivo de configuración personalizado de Nginx.
# Este archivo (asumimos que está en la raíz de tu proyecto) es esencial para el enrutamiento de SPAs.
# Le dice a Nginx cómo redirigir todas las rutas a index.html.
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copiamos los artefactos de la compilación (los archivos estáticos) desde la etapa 'builder'.
# '/usr/share/nginx/html' es el directorio por defecto donde Nginx busca los archivos web.
COPY --from=builder /app/dist /usr/share/nginx/html

# Declaramos el puerto en el que Nginx escuchará.
# El puerto 80 es el puerto HTTP estándar.
EXPOSE 80

# Definimos el comando predeterminado que se ejecutará cuando se inicie un contenedor.
# "nginx -g 'daemon off;'" mantiene Nginx en primer plano, necesario para Docker.
CMD ["nginx", "-g", "daemon off;"]

Archivo Dockerfile #

Archivo `Dockerfile`