feat: Add welcome component with documentation, tooling, ecosystem, community, and support sections
feat: Create WelcomeItem component for displaying welcome messages feat: Implement various icon components for the welcome section feat: Add theme management functionality with multiple color themes feat: Integrate internationalization support with Spanish and English locales feat: Set up Vue Router with authentication callback handling feat: Implement authentication service for Discord OAuth2 login feat: Create bot service for fetching bot statistics and information feat: Add AuthCallback view for handling authentication responses chore: Configure Vite for development and production environments
This commit is contained in:
Shni
262
AmayoWeb/DOMAIN_SETUP.md
Normal file
262
AmayoWeb/DOMAIN_SETUP.md
Normal file
@@ -0,0 +1,262 @@
|
||||
# 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
|
||||
|
||||
```typescript
|
||||
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`
|
||||
```javascript
|
||||
// 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`
|
||||
```javascript
|
||||
// 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`
|
||||
|
||||
```javascript
|
||||
// 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:
|
||||
|
||||
```css
|
||||
.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:**
|
||||
```bash
|
||||
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:**
|
||||
```bash
|
||||
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:**
|
||||
```bash
|
||||
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:**
|
||||
```bash
|
||||
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`:
|
||||
```env
|
||||
API_PORT=3001
|
||||
API_HOST=0.0.0.0
|
||||
NODE_ENV=production
|
||||
```
|
||||
|
||||
### Frontend (AmayoWeb/.env)
|
||||
|
||||
Crear `.env`:
|
||||
```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:
|
||||
|
||||
```bash
|
||||
# Frontend
|
||||
sudo certbot --nginx -d docs.amayo.dev
|
||||
|
||||
# Backend
|
||||
sudo certbot --nginx -d api.amayo.dev
|
||||
```
|
||||
|
||||
### Renovación automática:
|
||||
|
||||
```bash
|
||||
# Verificar
|
||||
sudo certbot renew --dry-run
|
||||
|
||||
# Forzar renovación
|
||||
sudo certbot renew --force-renewal
|
||||
sudo systemctl reload nginx
|
||||
```
|
||||
|
||||
## 🧪 Testing de Endpoints
|
||||
|
||||
### Verificar Backend API:
|
||||
|
||||
```bash
|
||||
# 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:
|
||||
|
||||
```bash
|
||||
# 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
|
||||
Reference in New Issue
Block a user