Guía Completa: Astro con Docker y Tailwind

Esta es una guía super sencilla para entender qué es Docker, cómo levantar este proyecto y por qué necesitamos nginx.

📦 ¿Qué es Docker?

Docker es una herramienta que nos permite empaquetar nuestra aplicación junto con todo lo que necesita para funcionar (dependencias, configuraciones, etc.) en un "contenedor".

Imagínate que tu aplicación es como una comida para llevar: Docker es la caja que contiene todo lo necesario para que funcione perfectamente en cualquier lugar, sin importar qué computadora uses.

Ventajas de usar Docker:

• ✅ Consistencia: Funciona igual en tu computadora, en el servidor y en la de tu compañero
• ✅ Aislamiento: No interfiere con otras aplicaciones
• ✅ Portabilidad: Se puede mover fácilmente entre diferentes ambientes
• ✅ Reproducibilidad: Siempre obtienes el mismo resultado

🚀 Cómo levantar el proyecto

Opción 1: Desarrollo local (sin Docker)

# Instalar dependencias
npm install

# Levantar en modo desarrollo
npm run dev

Opción 2: Con Docker (como en producción)

# Construir la imagen de Docker
docker build -t astro-app .

# Ejecutar el contenedor
docker run -p 8080:8080 astro-app

Después de esto, abre tu navegador en http://localhost:8080

🔧 ¿Por qué necesitamos nginx?

Cuando desarrollamos localmente, Astro tiene su propio servidor integrado. Pero en producción necesitamos algo más robusto y eficiente.

¿Qué es nginx?

nginx es un servidor web super rápido y ligero que se encarga de:

1. Servir archivos estáticos: HTML, CSS, JS, imágenes
2. Manejar múltiples conexiones: Miles de usuarios al mismo tiempo
3. Comprimir archivos: Para que carguen más rápido
4. Manejar errores: Como páginas 404
5. Seguridad: Protección básica contra ataques

¿Por qué no usar solo Node.js?

• 🐌 Node.js es más lento sirviendo archivos estáticos
• 🔧 nginx está optimizado específicamente para esto
• 💪 nginx consume menos memoria y CPU
• 🛡️ nginx tiene mejor manejo de seguridad

📄 Explicación del archivo nginx.conf

Nuestro archivo de configuración de nginx está en nginx/nginx.conf. Vamos línea por línea:

worker_processes 1;

¿Qué hace? Define cuántos procesos de nginx usar. Con 1 es suficiente para aplicaciones pequeñas.

events {
  worker_connections 1024;
}

¿Qué hace? Cada proceso puede manejar hasta 1024 conexiones simultáneas.

http {
  server {
    listen 8080;
    server_name _;

¿Qué hace? nginx escucha en el puerto 8080 y acepta cualquier nombre de dominio.

    root /usr/share/nginx/html;
    index index.html index.htm;

¿Qué hace? Define dónde están los archivos de nuestra aplicación y qué archivo mostrar por defecto.

    gzip on;
    gzip_min_length 1000;
    gzip_types text/plain text/css application/json application/javascript...;

¿Qué hace? Activa la compresión para archivos mayores a 1000 bytes. Esto hace que la página cargue más rápido.

    location / {
        try_files $uri $uri/index.html =404;
    }

¿Qué hace? Esta es la parte más importante. Le dice a nginx:

1. Primero, busca el archivo exacto que se pidió
2. Si no existe, busca una carpeta con ese nombre y muestra su index.html
3. Si tampoco existe, muestra error 404

Esto es crucial para aplicaciones SPA (Single Page Applications) como las de Astro.

🐳 Explicación del Dockerfile

Nuestro Dockerfile tiene dos etapas:

Etapa 1: Build (construcción)

FROM node:lts AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

¿Qué hace? Instala dependencias y construye la aplicación para producción.

Etapa 2: Runtime (ejecución)

FROM nginx:alpine AS runtime
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 8080

¿Qué hace? Toma los archivos construidos y los sirve con nginx.

¿Por qué dos etapas?

• 🎯 Imagen más pequeña: Solo incluimos lo necesario para producción
• 🗑️ Sin basura: No incluimos Node.js ni dependencias de desarrollo
• ⚡ Más rápida: Menos archivos = descargas más rápidas

🌟 Resumen

1. Docker empaqueta nuestra aplicación para que funcione en cualquier lugar
2. nginx sirve nuestros archivos de forma súper eficiente
3. El Dockerfile construye primero y luego sirve (optimización)
4. La configuración de nginx maneja rutas, compresión y errores

¡Y eso es todo! Ahora tienes una aplicación Astro completamente containerizada y lista para producción. 🎉