shni/amayo
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
781f4398a442f29054354bbdafd43653eeb1a67c
amayo/README/TROUBLESHOOTING_FRONTEND.md
Shni 001e7a33a7 Add comprehensive setup and customization guides for AmayoWeb 
- Introduced NGINX setup instructions for hosting the frontend application.
- Added detailed personalization steps for customizing the AmayoWeb landing page.
- Created a quickstart guide for rapid deployment and development setup.
- Included troubleshooting documentation for frontend loading issues.
- Provided VPS setup commands for configuring NGINX and deploying the application.
2025-11-04 13:01:37 -06:00

7.5 KiB
Raw Blame History

🔍 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

# 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

cat /var/www/docs.amayo.dev/index.html

Debería contener:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/index-Cwegg0a4.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-Db_Iwe5l.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

3. Verificar configuración de NGINX

# Ver configuración actual
sudo cat /etc/nginx/sites-available/default | grep -A 30 "docs.amayo.dev"

Debe tener:

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

# 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

# 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:

# 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:

sudo nano /etc/nginx/sites-available/default

Buscar la sección de docs.amayo.dev y asegurarte que tenga:

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:

# Verificar sintaxis
sudo nginx -t

# Si OK, reiniciar
sudo systemctl restart nginx

Solución 3: Verificar permisos

# 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):

# 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):

# Copiar archivos al servidor
scp -r dist/* shnimlz@tu_ip:/home/shnimlz/amayo-frontend/

En el VPS (Linux):

# 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:

# 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).

Reference in New Issue View Git Blame Copy Permalink