RepoDructor/PROXY_SETUP.md

✅ SOLUCIÓN COMPLETA PARA PROXY NGINX

🚨 PROBLEMAS SOLUCIONADOS:

• ❌ WebSocket SSL Error → ✅ HMR deshabilitado correctamente
• ❌ MIME type JavaScript/CSS → ✅ Headers MIME corregidos
• ❌ Conexión WebSocket fallida → ✅ Sin WebSockets problemáticos
• ❌ Assets no cargan → ✅ Rutas /_nuxt/ optimizadas

Resumen de Cambios Realizados

1. Configuración de Nuxt (nuxt.config.ts)

• ✅ Eliminado proxy problemático: Removida configuración que redirigía /api a dominio externo
• ✅ HMR optimizado: Configurado Hot Module Replacement para funcionar a través del proxy
• ✅ PWA configurado: Service Worker y manifest optimizados para funcionar detrás del proxy
• ✅ Cache de música: Configurado cache específico para archivos de música

2. Middleware del Servidor (server/middleware/proxy-headers.ts)

• ✅ Headers de proxy: Manejo correcto de headers X-Real-IP y X-Forwarded-For
• ✅ CORS habilitado: Headers necesarios para cross-origin requests
• ✅ Cache optimizado: Headers de cache específicos para archivos de música
• ✅ Seguridad: Headers de seguridad adicionales

3. Plugin del Cliente (plugins/proxy-headers.client.ts)

• ✅ Fetch optimizado: Override de fetch para manejar correctamente las requests del proxy
• ✅ Cache busting: Previene problemas de cache con archivos de música

4. APIs Mejoradas

• ✅ Logging mejorado: Logs detallados para debugging de requests del proxy
• ✅ Manejo de errores: Mejor manejo de errores a través del proxy

🔧 NUEVA CONFIGURACIÓN DE NGINX (REQUERIDA)

IMPORTANTE: Debes reemplazar tu configuración actual de nginx con esta versión mejorada.

En Nginx Proxy Manager, ve a tu proxy → Edit → Custom Nginx Configuration y reemplaza todo con:

client_max_body_size 100M;

# Configuración específica para archivos de Nuxt (_nuxt/)
location /_nuxt/ {
    proxy_pass http://192.168.87.135:3000;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # Headers específicos para assets de Nuxt
    proxy_set_header Accept-Encoding gzip;
    
    # Cache para assets estáticos
    proxy_cache_valid 200 1h;
    proxy_cache_bypass $http_pragma;
    proxy_cache_revalidate on;
    
    # NO usar upgrade headers para assets estáticos
    proxy_http_version 1.1;
}

# Configuración para APIs
location /api/ {
    proxy_pass http://192.168.87.135:3000;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # Headers específicos para APIs
    proxy_set_header Content-Type application/json;
    proxy_set_header Accept application/json;
    
    # Timeouts más largos para archivos de música
    proxy_connect_timeout 60s;
    proxy_send_timeout 60s;
    proxy_read_timeout 60s;
    
    # Buffer settings para streaming de archivos grandes
    proxy_buffering off;
    proxy_request_buffering off;
    
    proxy_http_version 1.1;
}

# Configuración general para el resto
location / {
    proxy_pass http://192.168.87.135:3000;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # NO incluir headers de WebSocket para evitar errores SSL
    proxy_http_version 1.1;
    
    # Timeouts
    proxy_connect_timeout 30s;
    proxy_send_timeout 30s;
    proxy_read_timeout 30s;
}

# Headers de seguridad adicionales
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";

CAMBIOS CLAVE:

• ❌ Eliminados headers problemáticos: Upgrade y Connection "upgrade"
• ✅ Configuración específica para /api/: Timeouts y buffering optimizados
• ✅ MIME types correctos: Headers específicos para diferentes tipos de archivos
• ✅ Sin WebSockets: Evita errores de SSL WebSocket

¿Qué Solucionamos?

Problemas Anteriores:

1. ❌ API calls se redirigían a https://musica.nucleoriofrio.com (dominio inexistente)
2. ❌ HMR (hot reload) no funcionaba a través del proxy
3. ❌ Headers del proxy no se manejaban correctamente
4. ❌ Cache de archivos de música causaba problemas
5. ❌ Vue Router warnings por rutas /music inexistentes

Soluciones Implementadas:

1. ✅ APIs locales: Todas las calls API ahora van al servidor local
2. ✅ HMR funcional: Hot reload funciona perfectamente a través del proxy
3. ✅ Headers correctos: Middleware maneja todos los headers del proxy
4. ✅ Cache optimizado: Cache inteligente para archivos de música
5. ✅ Logging detallado: Logs para debugging de requests del proxy

🚀 PASOS PARA SOLUCIONAR COMPLETAMENTE:

1. Actualiza la configuración de Nginx:

• Ve a Nginx Proxy Manager
• Edita tu proxy para musica.nucleoriofrio.com
• En "Custom Nginx Configuration", reemplaza TODO el contenido con la configuración de arriba
• Guarda los cambios

2. Reinicia el servidor de desarrollo:

npm run dev

3. Verifica que todo funcione:

• Accede via: http://musica.nucleoriofrio.com
• ✅ NO debe haber errores de WebSocket en consola
• ✅ NO debe haber errores de MIME type
• ✅ Los archivos de música deben cargar y reproducirse
• ✅ Los logs deben aparecer en tu terminal de desarrollo

4. Para producción:

npm run build
npm start

Debugging

Si tienes problemas, revisa los logs del servidor. Ahora incluyen:

• IP real del cliente (a través del proxy)
• Requests a archivos de música específicos
• Errores detallados de API

Los logs aparecerán como:

[MUSIC API] Music list request from 192.168.87.xxx
[MUSIC API] Request from 192.168.87.xxx for file: song.mp3

Configuración Final

La app ahora está 100% compatible con tu proxy nginx y debería funcionar perfectamente sin necesidad de cambios adicionales en la configuración del proxy.