119 lines
2.7 KiB
Markdown
119 lines
2.7 KiB
Markdown
# 🛠️ Guía de Desarrollo - RepoDructor
|
|
|
|
## 🚨 PROBLEMA SOLUCIONADO: WebSocket HMR
|
|
|
|
### **El problema era:**
|
|
Nuxt intentaba conectarse directamente a `wss://musica.nucleoriofrio.com:3000/` saltándose el proxy nginx.
|
|
|
|
### **Solución implementada:**
|
|
Configuré HMR para usar el proxy correctamente:
|
|
```typescript
|
|
// nuxt.config.ts
|
|
vite: {
|
|
server: {
|
|
hmr: {
|
|
host: 'musica.nucleoriofrio.com',
|
|
clientPort: 443, // Puerto HTTPS del proxy
|
|
protocol: 'wss' // WebSocket seguro
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## 🔧 CONFIGURACIÓN NGINX ACTUALIZADA
|
|
|
|
**Archivo:** `nginx-dev-config.txt`
|
|
|
|
**Cambios clave:**
|
|
- ✅ Soporte WebSocket para `/_nuxt/`
|
|
- ✅ Soporte DevTools para `/__nuxt_devtools__/`
|
|
- ✅ Headers `Upgrade` y `Connection "upgrade"`
|
|
- ✅ Sin headers de seguridad que bloqueen DevTools
|
|
|
|
## 🚀 PARA APLICAR LA SOLUCIÓN:
|
|
|
|
### 1. **Actualiza nginx:**
|
|
- Copia el contenido de `nginx-dev-config.txt`
|
|
- Pégalo en Nginx Proxy Manager → Custom Configuration
|
|
- Guarda y reinicia
|
|
|
|
### 2. **Reinicia el servidor:**
|
|
```bash
|
|
# Mata el proceso actual
|
|
pkill -f "npm run dev"
|
|
|
|
# Inicia de nuevo
|
|
npm run dev
|
|
```
|
|
|
|
### 3. **Verifica que funcione:**
|
|
- ✅ No más errores `ERR_SSL_PROTOCOL_ERROR`
|
|
- ✅ HMR funciona (cambios se aplican automáticamente)
|
|
- ✅ DevTools accesible (Shift + Alt + D)
|
|
|
|
## 🔄 OPCIÓN ALTERNATIVA (Si WebSocket sigue fallando)
|
|
|
|
Si aún tienes problemas, puedes deshabilitar HMR completamente:
|
|
|
|
```typescript
|
|
// nuxt.config.ts - Versión sin HMR
|
|
vite: {
|
|
server: {
|
|
hmr: false // Deshabilita HMR WebSocket
|
|
}
|
|
}
|
|
```
|
|
|
|
**Pros:** Sin errores de WebSocket
|
|
**Contras:** Debes recargar manualmente la página para ver cambios
|
|
|
|
## 🎯 ESTADO ACTUAL
|
|
|
|
### **✅ Funcionando:**
|
|
- 🎵 Reproducción de música
|
|
- 📱 PWA instalable
|
|
- 🔒 Proxy nginx
|
|
- 🎨 UI completa
|
|
|
|
### **🔧 En desarrollo:**
|
|
- ⚡ Hot Module Replacement (HMR)
|
|
- 🛠️ DevTools integration
|
|
|
|
## 📝 COMANDOS ÚTILES
|
|
|
|
```bash
|
|
# Desarrollo normal
|
|
npm run dev
|
|
|
|
# Build para producción
|
|
npm run build
|
|
npm start
|
|
|
|
# Verificar puerto 3000
|
|
lsof -i:3000
|
|
|
|
# Matar procesos en puerto 3000
|
|
pkill -f "npm run dev"
|
|
```
|
|
|
|
## 🐛 TROUBLESHOOTING
|
|
|
|
### **Error: "WebSocket connection failed"**
|
|
1. Verifica que nginx tenga la configuración de `nginx-dev-config.txt`
|
|
2. Asegúrate de que incluya headers `Upgrade` y `Connection`
|
|
3. Reinicia nginx y el servidor de desarrollo
|
|
|
|
### **Error: "X-Frame-Options DENY"**
|
|
1. Verifica que nginx NO tenga headers de seguridad
|
|
2. El middleware solo aplica X-Frame-Options a `/api/music/`
|
|
3. DevTools necesita poder crear iframes
|
|
|
|
### **Error: "Port 3000 already in use"**
|
|
```bash
|
|
# Encuentra y mata el proceso
|
|
lsof -ti:3000 | xargs kill -9
|
|
```
|
|
|
|
---
|
|
|
|
**🎵 ¡Desarrollo con RepoDructor optimizado para proxy nginx!** |