amayo/AmayoWeb/DEPLOY_GUIDE.md

🚀 Guía de Deploy - Amayo

📋 Arquitectura

┌─────────────────────────────────────────────────────────────┐
│                         Usuario                              │
└────────────────┬────────────────────────────────────────────┘
                 │
        ┌────────┴────────┐
        │                 │
        ▼                 ▼
┌───────────────┐  ┌──────────────────┐
│ docs.amayo.dev│  │  api.amayo.dev   │
│  (Frontend)   │  │   (Backend API)  │
│               │  │                  │
│  Archivos     │  │  Proxy NGINX     │
│  estáticos    │  │       ↓          │
│  (Vue build)  │  │  localhost:3000  │
└───────────────┘  │  (Bot Node.js)   │
                   └──────────────────┘

🔧 Configuración Actual

Componente	Dominio	Puerto	Servidor
Frontend Vue	docs.amayo.dev	80/443	Archivos estáticos
Backend API	api.amayo.dev	80/443 → 3000	Node.js (bot)

Importante: El bot ejecuta el servidor desde main.ts en el puerto 3000.

📝 Pasos de Deploy

1. Build del Frontend

cd AmayoWeb
npm run build

Esto genera la carpeta dist/ con los archivos compilados.

2. Copiar Archivos al Servidor VPS

# Crear directorio si no existe
sudo mkdir -p /var/www/docs.amayo.dev

# Copiar archivos del build
sudo cp -r 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

3. Configurar NGINX

A. Frontend (docs.amayo.dev)

# Copiar configuración
sudo cp nginx-docs.amayo.dev.conf /etc/nginx/sites-available/docs.amayo.dev

# Habilitar sitio
sudo ln -s /etc/nginx/sites-available/docs.amayo.dev /etc/nginx/sites-enabled/

# Verificar configuración
sudo nginx -t

B. Backend API (api.amayo.dev)

# Copiar configuración
sudo cp nginx-api.amayo.dev.conf /etc/nginx/sites-available/api.amayo.dev

# Habilitar sitio
sudo ln -s /etc/nginx/sites-available/api.amayo.dev /etc/nginx/sites-enabled/

# Verificar configuración
sudo nginx -t

C. Reiniciar NGINX

sudo systemctl restart nginx

4. Configurar Variables de Entorno del Bot

En tu servidor VPS, asegúrate de tener estas variables:

# Editar archivo .env en la raíz del proyecto
nano .env

Agregar:

# Puerto del servidor API (usado por el bot)
PORT=3000
API_PORT=3000
API_HOST=0.0.0.0

# Otras variables del bot
DISCORD_TOKEN=tu_token
DATABASE_URL=tu_database_url
# ... resto de variables

5. Iniciar/Reiniciar el Bot

El bot debe estar corriendo para que la API funcione:

# Opción 1: Con PM2 (recomendado)
pm2 restart amayo

# O si no está iniciado:
pm2 start npm --name amayo -- start

# Ver logs
pm2 logs amayo

# Opción 2: Directamente con npm
npm start

6. Verificar que Todo Funcione

A. Verificar Frontend

curl https://docs.amayo.dev
# Debe devolver HTML de tu app Vue

O abre en el navegador: https://docs.amayo.dev

B. Verificar Backend API

# Stats del bot
curl https://api.amayo.dev/api/bot/stats

# Debe devolver JSON con estadísticas
# {"servers":10,"users":1000,"commands":50}

C. Ver Logs de NGINX

# Frontend
sudo tail -f /var/log/nginx/docs.amayo.dev.access.log

# Backend
sudo tail -f /var/log/nginx/api.amayo.dev.access.log

# Errores
sudo tail -f /var/log/nginx/error.log

D. Ver Logs del Bot

pm2 logs amayo

🔄 Script de Deploy Automático

Puedes usar el script deploy.sh (necesitas crearlo):

#!/bin/bash

# Script de deploy para Amayo

echo "🚀 Iniciando deploy de Amayo..."

# 1. Build del frontend
echo "📦 Compilando frontend..."
cd AmayoWeb
npm run build

# 2. Copiar archivos
echo "📤 Copiando archivos al servidor..."
sudo rm -rf /var/www/docs.amayo.dev/*
sudo cp -r dist/* /var/www/docs.amayo.dev/
sudo chown -R www-data:www-data /var/www/docs.amayo.dev
sudo chmod -R 755 /var/www/docs.amayo.dev

# 3. Reiniciar NGINX
echo "🔄 Reiniciando NGINX..."
sudo nginx -t && sudo systemctl reload nginx

# 4. Reiniciar bot (para aplicar cambios del backend)
echo "🤖 Reiniciando bot..."
pm2 restart amayo

echo "✅ Deploy completado!"
echo "🌐 Frontend: https://docs.amayo.dev"
echo "🌐 Backend: https://api.amayo.dev"

Hacer ejecutable:

chmod +x deploy.sh

Ejecutar:

./deploy.sh

🧪 Testing Local (Desarrollo)

Iniciar Backend (Bot)

# En la raíz del proyecto
npm start
# El bot iniciará el servidor en puerto 3000

Iniciar Frontend

# En carpeta AmayoWeb
cd AmayoWeb
npm run dev
# Frontend en http://localhost:5173

El frontend se conectará automáticamente al backend en localhost:3000 gracias al proxy de Vite.

🔍 Troubleshooting

Error: "502 Bad Gateway" en api.amayo.dev

Causa: El bot no está corriendo o no está en el puerto 3000.

Solución:

# Verificar que el bot esté corriendo
pm2 status

# Verificar el puerto
netstat -tulpn | grep 3000

# Reiniciar el bot
pm2 restart amayo

# Ver logs
pm2 logs amayo

Error: "404 Not Found" en rutas de Vue

Causa: Falta la configuración try_files en NGINX.

Solución: Asegúrate de que el archivo de configuración tenga:

location / {
    try_files $uri $uri/ /index.html;
}

Error: CORS al hacer requests desde el frontend

Causa: Headers CORS no configurados correctamente.

Solución: Verifica que el archivo nginx-api.amayo.dev.conf tenga los headers CORS configurados.

Frontend muestra valores en 0

Causa: El bot no está devolviendo datos o no puede acceder a la instancia del bot.

Solución:

1. Verifica que el bot esté conectado a Discord
2. Revisa los endpoints en src/server/handler.ts
3. Verifica que require("../main").bot funcione correctamente

Certificados SSL no válidos

Causa: Certificados no generados o expirados.

Solución:

# Verificar certificados
sudo certbot certificates

# Renovar
sudo certbot renew

# Reiniciar NGINX
sudo systemctl restart nginx

📊 Checklist de Deploy

• Build del frontend completado (npm run build)
• Archivos copiados a /var/www/docs.amayo.dev
• Configuración de NGINX para docs.amayo.dev creada y habilitada
• Configuración de NGINX para api.amayo.dev creada y habilitada
• Certificados SSL configurados para ambos dominios
• Variables de entorno configuradas en el servidor
• Bot corriendo en puerto 3000
• NGINX reiniciado
• Verificado frontend: curl https://docs.amayo.dev
• Verificado backend: curl https://api.amayo.dev/api/bot/stats
• Probado login con Discord
• Verificadas estadísticas en vivo

🎯 URLs Finales

• 🌐 Frontend: https://docs.amayo.dev
• 🔌 Backend API: https://api.amayo.dev
• 📊 Stats: https://api.amayo.dev/api/bot/stats
• ℹ️ Info: https://api.amayo.dev/api/bot/info

📝 Notas Importantes

1. Puerto 3000: El bot ejecuta el servidor en este puerto desde main.ts. No cambiar sin actualizar la configuración.

2. Separación de Dominios:

   • docs.amayo.dev → Archivos estáticos (Vue)
   • api.amayo.dev → Proxy a Node.js (puerto 3000)

3. CORS: El backend acepta requests solo desde docs.amayo.dev en producción.

4. PM2: Asegúrate de que el bot esté configurado para reiniciarse automáticamente:

   pm2 save
   pm2 startup
   

5. Logs: Siempre revisa los logs si algo no funciona:

   # Logs del bot
   pm2 logs amayo
   
   # Logs de NGINX
   sudo tail -f /var/log/nginx/error.log
   

---

Última actualización: Noviembre 2025