amayo/AmayoWeb/DOMAIN_SETUP.md

Configuración de Dominios - Amayo

📋 Resumen de Cambios

Se han configurado dos dominios separados para el frontend y backend:

Dominios Configurados

Servicio	Dominio	Puerto (Dev)	Puerto (Prod)
Frontend (Vue)	docs.amayo.dev	5173	80/443
Backend API	api.amayo.dev	3001	80/443

✅ Archivos Modificados

1. Backend - src/server/server.ts

Cambios:

• Puerto cambiado a 3001 (antes 3000)
• Agregado soporte para variables de entorno API_PORT y API_HOST
• Agregado mensaje de inicio con información de dominios

const PORT = parseInt(process.env.API_PORT || '3001', 10);
const HOST = process.env.API_HOST || '0.0.0.0';

2. Frontend - Servicios API

src/services/bot.js

// Antes
const API_URL = 'https://docs.amayo.dev'

// Ahora
const API_URL = 'https://api.amayo.dev'      // Producción
const API_URL = 'http://localhost:3001'       // Desarrollo

src/services/auth.js

// Antes
const API_URL = 'https://docs.amayo.dev/api'

// Ahora
const API_URL = 'https://api.amayo.dev/api'  // Producción
const API_URL = 'http://localhost:3001/api'  // Desarrollo

3. Vite Config - vite.config.js

// Proxy actualizado para desarrollo
proxy: {
  '/api': {
    target: 'http://localhost:3001',  // Antes: https://docs.amayo.dev
    changeOrigin: true,
  }
}

4. Floating Cards - HeroSection.vue

Reposicionados para evitar empalme con el hero principal:

.card-1 { top: 60px; right: 20px; }     /* Más pegado a la derecha */
.card-2 { top: 200px; right: 160px; }   /* Centro-derecha */
.card-3 { bottom: 80px; right: 60px; }  /* Abajo-derecha */

🚀 Cómo Usar

Desarrollo Local

1. Iniciar el backend:

   cd amayo
   npm run start:api
   # O con ts-node directamente:
   ts-node src/server/server.ts
   

   ✅ Backend corriendo en http://localhost:3001

2. Iniciar el frontend:

   cd AmayoWeb
   npm run dev
   

   ✅ Frontend corriendo en http://localhost:5173

3. Verificar:

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:3001/api/bot/stats

Producción

1. Build del frontend:

   cd AmayoWeb
   npm run build
   

2. Configurar NGINX:

   • Ver NGINX_CONFIG.md para configuración completa
   • Generar certificados SSL con certbot

3. Iniciar backend con PM2:

   pm2 start src/server/server.ts --name amayo-api --interpreter ts-node
   pm2 save
   pm2 startup
   

🔧 Variables de Entorno

Backend (raíz del proyecto)

Crear .env:

API_PORT=3001
API_HOST=0.0.0.0
NODE_ENV=production

Frontend (AmayoWeb/.env)

Crear .env:

VITE_DISCORD_CLIENT_ID=tu_client_id
VITE_API_URL=http://localhost:3001

Para producción, el código detecta automáticamente el entorno y usa https://api.amayo.dev.

🔐 Certificados SSL

Generar certificados con Certbot:

# Frontend
sudo certbot --nginx -d docs.amayo.dev

# Backend  
sudo certbot --nginx -d api.amayo.dev

Renovación automática:

# Verificar
sudo certbot renew --dry-run

# Forzar renovación
sudo certbot renew --force-renewal
sudo systemctl reload nginx

🧪 Testing de Endpoints

Verificar Backend API:

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

# Info del bot
curl https://api.amayo.dev/api/bot/info

# Health check
curl https://api.amayo.dev/health

Verificar Frontend:

# Homepage
curl https://docs.amayo.dev

# Debe devolver HTML de la aplicación Vue

📊 Flujo de Datos

Usuario
   ↓
docs.amayo.dev (Frontend Vue)
   ↓
   ↓ Hace peticiones a:
   ↓
api.amayo.dev (Backend Node.js)
   ↓
   ↓ Accede a:
   ↓
Bot de Discord (main.ts)

🔍 Troubleshooting

Frontend no puede conectar con API

Síntoma: Error de CORS o 404 en requests

Solución:

1. Verifica que el backend esté corriendo: curl http://localhost:3001/api/bot/stats
2. Revisa logs del backend: pm2 logs amayo-api
3. Verifica configuración de CORS en NGINX

Backend no responde

Síntoma: 502 Bad Gateway

Solución:

1. Verifica que el proceso esté corriendo: pm2 status
2. Reinicia el backend: pm2 restart amayo-api
3. Revisa logs: pm2 logs amayo-api

SSL no funciona

Síntoma: Certificado inválido o conexión no segura

Solución:

1. Verifica certificados: sudo certbot certificates
2. Renueva certificados: sudo certbot renew
3. Reinicia NGINX: sudo systemctl restart nginx

Floating cards se empalman

Síntoma: Las tarjetas se sobreponen al texto

Solución: Ya están reposicionadas en este commit. Si persiste:

1. Ajusta valores en HeroSection.vue
2. Modifica los valores de right, top, bottom

📝 Checklist de Deploy

• Backend corriendo en puerto 3001
• Frontend compilado (npm run build)
• Archivos copiados a /var/www/docs.amayo.dev
• NGINX configurado para ambos dominios
• Certificados SSL generados con certbot
• PM2 configurado para auto-restart
• Firewall permite puertos 80/443
• DNS apunta a la IP del servidor
• Verificar endpoints con curl
• Probar login con Discord
• Verificar estadísticas en vivo

🎯 Próximos Pasos

1. ✅ Floating cards reposicionadas
2. ✅ Dominios configurados
3. ⏳ Generar certificados SSL
4. ⏳ Configurar NGINX en VPS
5. ⏳ Deploy de frontend y backend
6. ⏳ Pruebas en producción

---

Última actualización: Noviembre 2025