- 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.
8.1 KiB
🚀 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:
- Verifica que el bot esté conectado a Discord
- Revisa los endpoints en
src/server/handler.ts - Verifica que
require("../main").botfuncione 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.devcreada y habilitada - Configuración de NGINX para
api.amayo.devcreada 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
-
Puerto 3000: El bot ejecuta el servidor en este puerto desde
main.ts. No cambiar sin actualizar la configuración. -
Separación de Dominios:
docs.amayo.dev→ Archivos estáticos (Vue)api.amayo.dev→ Proxy a Node.js (puerto 3000)
-
CORS: El backend acepta requests solo desde
docs.amayo.deven producción. -
PM2: Asegúrate de que el bot esté configurado para reiniciarse automáticamente:
pm2 save pm2 startup -
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