wallabicher/web/NGINX_CONFIG.md

Configuración de Nginx y Assets

Arquitectura

Usuario
  ↓
nginx (proxy principal) :80
  ├─→ /api → backend:3001
  ├─→ /ws → backend:3001
  ├─→ /dashboard → dashboard:80
  └─→ / → landing:80

Configuración de rutas

1. Dashboard (Vue + Vite)

Base URL: /dashboard/

• Vite config: base: '/dashboard/' (siempre)
• Vue Router: createWebHistory('/dashboard')
• Nginx interno: Sirve desde /usr/share/nginx/html/dashboard/
• Assets: Se construyen con prefijo /dashboard/ automáticamente por Vite

Flujo de peticiones:

Usuario → http://localhost/dashboard/
  ↓
nginx proxy → http://dashboard:80/dashboard/
  ↓
nginx dashboard → /usr/share/nginx/html/dashboard/index.html

Assets:

Usuario → http://localhost/dashboard/assets/index-abc123.js
  ↓
nginx proxy → http://dashboard:80/dashboard/assets/index-abc123.js
  ↓
nginx dashboard → /usr/share/nginx/html/dashboard/assets/index-abc123.js

2. Landing (Astro)

Base URL: /

• Astro config: Sin base (raíz por defecto)
• Nginx interno: Sirve desde /usr/share/nginx/html/
• Nginx config: web/landing/nginx.conf
• Assets: Se construyen para la raíz

Flujo de peticiones:

Usuario → http://localhost/
  ↓
nginx proxy → http://landing:80/
  ↓
nginx landing → /usr/share/nginx/html/index.html

Assets (ej: logo.jpg):

Usuario → http://localhost/logo.jpg
  ↓
nginx proxy → http://landing:80/logo.jpg
  ↓
nginx landing → /usr/share/nginx/html/logo.jpg

Puertos

Desarrollo local

Dashboard (Vue):  http://localhost:3000
Backend (API):    http://localhost:3001
Landing (Astro):  http://localhost:3002

Producción (Docker)

nginx (proxy):    :80 (externo)
  ├─ dashboard:   :80 (interno)
  ├─ backend:     :3001 (interno)
  └─ landing:     :80 (interno)

Desarrollo local

Para desarrollo local, el proxy de Vite está configurado solo para mode === 'development':

# Terminal 1: Backend
cd web/backend
npm run dev
# → API en http://localhost:3001

# Terminal 2: Dashboard
cd web/dashboard
npm run dev
# → Dashboard en http://localhost:3000
# → Vite proxy activo: /api → localhost:3001, /ws → localhost:3001

# Terminal 3: Landing
cd web/landing
npm run dev
# → Landing en http://localhost:3002

# Producción (Docker)
docker-compose up -d
# → Todo en http://localhost:80

Reconstruir después de cambios

Si cambias la configuración de nginx o los archivos de configuración:

# Reconstruir solo el dashboard
docker-compose build dashboard

# Reconstruir solo la landing
docker-compose build landing

# Reconstruir todo
docker-compose build

# Reiniciar servicios
docker-compose up -d

Troubleshooting

Assets 404 en dashboard

1. Verificar que Vite construyó con base: '/dashboard/'
2. Verificar que el Dockerfile copia a /usr/share/nginx/html/dashboard
3. Verificar que nginx-dashboard.conf tiene la location /dashboard/

Assets 404 en landing

1. Verificar que Astro construyó sin base (raíz)
2. Verificar que el Dockerfile copia a /usr/share/nginx/html/
3. Verificar que nginx landing usa root /usr/share/nginx/html

Service Worker no se registra

El Service Worker debe estar en /dashboard/sw.js y registrarse con scope /dashboard/