From 8c6d7c9dd6a23cc9f5f3e275e3e20776832adc04 Mon Sep 17 00:00:00 2001 From: Shni Date: Tue, 4 Nov 2025 12:54:58 -0600 Subject: [PATCH] =?UTF-8?q?feat:=20Mejorar=20configuraci=C3=B3n=20de=20NGI?= =?UTF-8?q?NX=20y=20agregar=20gu=C3=ADa=20de=20diagn=C3=B3stico=20para=20e?= =?UTF-8?q?l=20frontend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AmayoWeb/TROUBLESHOOTING_FRONTEND.md | 318 +++++++++++++++++++++++++++ AmayoWeb/nginx-api.amayo.dev.conf | 36 ++- 2 files changed, 334 insertions(+), 20 deletions(-) create mode 100644 AmayoWeb/TROUBLESHOOTING_FRONTEND.md diff --git a/AmayoWeb/TROUBLESHOOTING_FRONTEND.md b/AmayoWeb/TROUBLESHOOTING_FRONTEND.md new file mode 100644 index 0000000..a2e43a0 --- /dev/null +++ b/AmayoWeb/TROUBLESHOOTING_FRONTEND.md @@ -0,0 +1,318 @@ +# 🔍 Diagnóstico: Frontend No Carga + +## ✅ Build Exitoso + +Tu build se completó correctamente: +``` +✓ built in 3.20s +dist/index.html 0.51 kB +dist/assets/index-Db_Iwe5l.css 12.44 kB +dist/assets/index-Cwegg0a4.js 48.55 kB +dist/assets/vendor-C0oSq11a.js 150.64 kB +``` + +## 🌐 Puertos Usados + +### Frontend (docs.amayo.dev) + +**Desarrollo:** +- Puerto: `5173` (Vite dev server) +- URL: `http://localhost:5173` + +**Producción:** +- Puerto: `443` (HTTPS) / `80` (HTTP redirige a HTTPS) +- Son archivos estáticos servidos por NGINX +- No usa Node.js, solo NGINX sirve los archivos HTML/JS/CSS +- URL: `https://docs.amayo.dev` + +### Backend API (api.amayo.dev) + +**Producción:** +- Puerto externo: `443` (HTTPS) +- Puerto interno: `3000` (Node.js - Bot) +- NGINX hace proxy de `443` → `3000` +- URL: `https://api.amayo.dev` + +## 🐛 Por Qué No Sale Nada + +### Posibles Causas: + +1. **Los archivos no están en el lugar correcto** +2. **NGINX no está configurado correctamente** +3. **Falta el archivo index.html en el directorio** +4. **Permisos incorrectos** +5. **Configuración de NGINX no tiene `try_files`** + +## 🔧 Comandos de Diagnóstico en el VPS + +### 1. Verificar que los archivos existen + +```bash +# Ver archivos en el directorio web +ls -la /var/www/docs.amayo.dev/ + +# Debería mostrar: +# index.html +# assets/ (carpeta con JS y CSS) +``` + +**Esperado:** +``` +total 16 +drwxr-xr-x 3 www-data www-data 4096 Nov 4 12:00 . +drwxr-xr-x 3 root root 4096 Nov 4 11:55 .. +drwxr-xr-x 2 www-data www-data 4096 Nov 4 12:00 assets +-rw-r--r-- 1 www-data www-data 510 Nov 4 12:00 index.html +``` + +### 2. Ver el contenido de index.html + +```bash +cat /var/www/docs.amayo.dev/index.html +``` + +**Debería contener:** +```html + + + + + + + Vite App + + + + +
+ + +``` + +### 3. Verificar configuración de NGINX + +```bash +# Ver configuración actual +sudo cat /etc/nginx/sites-available/default | grep -A 30 "docs.amayo.dev" +``` + +**Debe tener:** +```nginx +server { + listen 443 ssl http2; + server_name docs.amayo.dev; + + # IMPORTANTE: root debe apuntar al directorio correcto + root /var/www/docs.amayo.dev; + index index.html; + + # IMPORTANTE: try_files para SPA + location / { + try_files $uri $uri/ /index.html; + } +} +``` + +### 4. Ver logs de NGINX + +```bash +# Ver errores +sudo tail -f /var/log/nginx/error.log + +# Ver accesos +sudo tail -f /var/log/nginx/docs.amayo.dev.access.log +``` + +### 5. Probar con curl + +```bash +# Debe devolver HTML +curl -I https://docs.amayo.dev + +# Ver contenido completo +curl https://docs.amayo.dev +``` + +## 🛠️ Soluciones + +### Solución 1: Verificar que los archivos estén copiados + +En tu VPS: + +```bash +# Ver qué hay en el directorio +ls -la /var/www/docs.amayo.dev/ + +# Si está vacío, copiar archivos del build +# (Asumiendo que subiste los archivos a /home/shnimlz/amayo-frontend/) +sudo cp -r /home/shnimlz/amayo/AmayoWeb/dist/* /var/www/docs.amayo.dev/ + +# Ajustar permisos +sudo chown -R www-data:www-data /var/www/docs.amayo.dev +sudo chmod -R 755 /var/www/docs.amayo.dev +``` + +### Solución 2: Corregir configuración de NGINX + +Editar configuración: + +```bash +sudo nano /etc/nginx/sites-available/default +``` + +Buscar la sección de `docs.amayo.dev` y asegurarte que tenga: + +```nginx +server { + listen 443 ssl http2; + listen [::]:443 ssl http2; + server_name docs.amayo.dev; + + ssl_certificate /etc/letsencrypt/live/docs.amayo.dev/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/docs.amayo.dev/privkey.pem; + include /etc/letsencrypt/options-ssl-nginx.conf; + ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; + + # CAMBIAR ESTO: NO debe haber proxy_pass + root /var/www/docs.amayo.dev; + index index.html; + + # Logs + access_log /var/log/nginx/docs.amayo.dev.access.log; + error_log /var/log/nginx/docs.amayo.dev.error.log; + + # Gzip + gzip on; + gzip_vary on; + gzip_min_length 1024; + gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript; + + # SPA fallback - IMPORTANTE + location / { + try_files $uri $uri/ /index.html; + } + + # Cache + location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { + expires 1y; + add_header Cache-Control "public, immutable"; + } +} +``` + +Guardar (Ctrl+O, Enter, Ctrl+X) y reiniciar: + +```bash +# Verificar sintaxis +sudo nginx -t + +# Si OK, reiniciar +sudo systemctl restart nginx +``` + +### Solución 3: Verificar permisos + +```bash +# Archivos deben ser legibles por www-data +sudo chown -R www-data:www-data /var/www/docs.amayo.dev +sudo chmod -R 755 /var/www/docs.amayo.dev + +# Verificar +ls -la /var/www/docs.amayo.dev/ +``` + +## 📝 Procedimiento Completo de Deploy + +### En tu PC (Windows): + +```powershell +# 1. Build +cd C:\Users\Shnimlz\Documents\GitHub\amayo\AmayoWeb +npm run build + +# 2. Los archivos están en dist/ +# Subir al servidor con SCP o WinSCP +``` + +### Con SCP (desde PowerShell): + +```powershell +# Copiar archivos al servidor +scp -r dist/* shnimlz@tu_ip:/home/shnimlz/amayo-frontend/ +``` + +### En el VPS (Linux): + +```bash +# 1. Ir al proyecto +cd ~/amayo/AmayoWeb + +# 2. Si subiste con SCP a /home/shnimlz/amayo-frontend/ +# O si ya tienes el build en el repo, usar: +sudo cp -r dist/* /var/www/docs.amayo.dev/ + +# 3. Permisos +sudo chown -R www-data:www-data /var/www/docs.amayo.dev +sudo chmod -R 755 /var/www/docs.amayo.dev + +# 4. Verificar +ls -la /var/www/docs.amayo.dev/ + +# 5. Reiniciar NGINX +sudo systemctl restart nginx + +# 6. Probar +curl https://docs.amayo.dev +``` + +## 🎯 Checklist Rápido + +- [ ] Archivos del build copiados a `/var/www/docs.amayo.dev/` +- [ ] Existe `/var/www/docs.amayo.dev/index.html` +- [ ] Existe `/var/www/docs.amayo.dev/assets/` con archivos JS y CSS +- [ ] Permisos correctos (`www-data:www-data`, `755`) +- [ ] NGINX tiene `root /var/www/docs.amayo.dev;` +- [ ] NGINX tiene `try_files $uri $uri/ /index.html;` +- [ ] NO hay `proxy_pass` en la config de docs.amayo.dev +- [ ] `sudo nginx -t` pasa sin errores +- [ ] NGINX reiniciado: `sudo systemctl restart nginx` +- [ ] `curl https://docs.amayo.dev` devuelve HTML + +## 🔴 ERROR COMÚN + +**Si ves "502 Bad Gateway":** Significa que NGINX está intentando hacer proxy a un servidor que no existe. Esto pasa si la configuración tiene `proxy_pass` en lugar de `root`. + +**Solución:** Cambiar `proxy_pass` por `root /var/www/docs.amayo.dev;` + +## 📞 Si Nada Funciona + +Muéstrame la salida de estos comandos: + +```bash +# 1. Ver archivos +ls -la /var/www/docs.amayo.dev/ + +# 2. Ver configuración +sudo cat /etc/nginx/sites-available/default | grep -A 40 "docs.amayo.dev" + +# 3. Ver logs +sudo tail -20 /var/log/nginx/error.log + +# 4. Probar curl +curl -I https://docs.amayo.dev +``` + +Con esa información podré ayudarte mejor. + +--- + +## 📊 Resumen de Puertos + +| Servicio | Entorno | Puerto | Descripción | +|----------|---------|--------|-------------| +| Frontend Dev | Desarrollo | 5173 | Vite dev server (local) | +| Frontend Prod | Producción | 443 (HTTPS) | NGINX sirve archivos estáticos | +| Backend API | Producción | 443 → 3000 | NGINX proxy a Node.js | +| Bot/API Interno | Producción | 3000 | Node.js server (interno) | + +**El frontend NO usa ningún puerto Node.js en producción**, solo archivos estáticos servidos por NGINX en el puerto 443 (HTTPS). diff --git a/AmayoWeb/nginx-api.amayo.dev.conf b/AmayoWeb/nginx-api.amayo.dev.conf index b6c9067..9ecd811 100644 --- a/AmayoWeb/nginx-api.amayo.dev.conf +++ b/AmayoWeb/nginx-api.amayo.dev.conf @@ -11,8 +11,9 @@ server { } server { - listen 443 ssl http2; - listen [::]:443 ssl http2; + listen 443 ssl; + listen [::]:443 ssl; + http2 on; server_name api.amayo.dev; # Certificados SSL (generados con certbot) @@ -27,6 +28,11 @@ server { # Proxy al servidor Node.js en puerto 3000 (el bot ejecuta server.ts) location / { + # Manejar preflight OPTIONS + if ($request_method = 'OPTIONS') { + return 204; + } + proxy_pass http://127.0.0.1:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; @@ -41,27 +47,17 @@ server { proxy_connect_timeout 60s; proxy_send_timeout 60s; proxy_read_timeout 60s; - } - # CORS headers para permitir requests desde el frontend - add_header Access-Control-Allow-Origin "https://docs.amayo.dev" always; - add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always; - add_header Access-Control-Allow-Headers "Authorization, Content-Type" always; - add_header Access-Control-Allow-Credentials "true" always; - - # Manejar preflight requests - if ($request_method = 'OPTIONS') { + # CORS headers add_header Access-Control-Allow-Origin "https://docs.amayo.dev" always; add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always; add_header Access-Control-Allow-Headers "Authorization, Content-Type" always; - add_header Access-Control-Max-Age 1728000; - add_header Content-Type 'text/plain; charset=utf-8'; - add_header Content-Length 0; - return 204; - } + add_header Access-Control-Allow-Credentials "true" always; + add_header Access-Control-Max-Age 1728000 always; - # Security headers - add_header X-Frame-Options "SAMEORIGIN" always; - add_header X-Content-Type-Options "nosniff" always; - add_header X-XSS-Protection "1; mode=block" always; + # Security headers + add_header X-Frame-Options "SAMEORIGIN" always; + add_header X-Content-Type-Options "nosniff" always; + add_header X-XSS-Protection "1; mode=block" always; + } }