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.
This commit is contained in:
Shni
@@ -1,354 +0,0 @@
|
||||
# 🚀 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
|
||||
|
||||
```bash
|
||||
cd AmayoWeb
|
||||
npm run build
|
||||
```
|
||||
|
||||
Esto genera la carpeta `dist/` con los archivos compilados.
|
||||
|
||||
### 2. Copiar Archivos al Servidor VPS
|
||||
|
||||
```bash
|
||||
# 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)
|
||||
|
||||
```bash
|
||||
# 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)
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
sudo systemctl restart nginx
|
||||
```
|
||||
|
||||
### 4. Configurar Variables de Entorno del Bot
|
||||
|
||||
En tu servidor VPS, asegúrate de tener estas variables:
|
||||
|
||||
```bash
|
||||
# Editar archivo .env en la raíz del proyecto
|
||||
nano .env
|
||||
```
|
||||
|
||||
Agregar:
|
||||
|
||||
```env
|
||||
# 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:
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
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
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
pm2 logs amayo
|
||||
```
|
||||
|
||||
## 🔄 Script de Deploy Automático
|
||||
|
||||
Puedes usar el script `deploy.sh` (necesitas crearlo):
|
||||
|
||||
```bash
|
||||
#!/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:
|
||||
|
||||
```bash
|
||||
chmod +x deploy.sh
|
||||
```
|
||||
|
||||
Ejecutar:
|
||||
|
||||
```bash
|
||||
./deploy.sh
|
||||
```
|
||||
|
||||
## 🧪 Testing Local (Desarrollo)
|
||||
|
||||
### Iniciar Backend (Bot)
|
||||
|
||||
```bash
|
||||
# En la raíz del proyecto
|
||||
npm start
|
||||
# El bot iniciará el servidor en puerto 3000
|
||||
```
|
||||
|
||||
### Iniciar Frontend
|
||||
|
||||
```bash
|
||||
# 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:**
|
||||
```bash
|
||||
# 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:
|
||||
```nginx
|
||||
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:**
|
||||
```bash
|
||||
# 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:
|
||||
```bash
|
||||
pm2 save
|
||||
pm2 startup
|
||||
```
|
||||
|
||||
5. **Logs:** Siempre revisa los logs si algo no funciona:
|
||||
```bash
|
||||
# Logs del bot
|
||||
pm2 logs amayo
|
||||
|
||||
# Logs de NGINX
|
||||
sudo tail -f /var/log/nginx/error.log
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Última actualización:** Noviembre 2025
|
||||
@@ -1,262 +0,0 @@
|
||||
# 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
|
||||
@@ -1,274 +0,0 @@
|
||||
# Configuración de NGINX para Amayo
|
||||
|
||||
Esta guía te ayudará a configurar NGINX para servir tanto el frontend como el backend API con SSL.
|
||||
|
||||
## Dominios
|
||||
|
||||
- **Frontend (Vue):** `docs.amayo.dev` - Puerto 5173 (dev) / Archivos estáticos (prod)
|
||||
- **Backend API:** `api.amayo.dev` - Puerto 3001
|
||||
|
||||
## Configuración de NGINX
|
||||
|
||||
### 1. Frontend - docs.amayo.dev
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name docs.amayo.dev;
|
||||
|
||||
# Redirigir HTTP a HTTPS
|
||||
return 301 https://$server_name$request_uri;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
listen [::]:443 ssl http2;
|
||||
server_name docs.amayo.dev;
|
||||
|
||||
# Certificados SSL (generados con certbot)
|
||||
ssl_certificate /etc/letsencrypt/live/docs.amayo.dev/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/docs.amayo.dev/privkey.pem;
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers HIGH:!aNULL:!MD5;
|
||||
|
||||
# Ruta de archivos estáticos del build de Vue
|
||||
root /var/www/docs.amayo.dev;
|
||||
index index.html;
|
||||
|
||||
# Gzip compression
|
||||
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;
|
||||
|
||||
# SPA fallback - todas las rutas van a index.html
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Cache para assets estáticos
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# Security headers
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Backend API - api.amayo.dev
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name api.amayo.dev;
|
||||
|
||||
# Redirigir HTTP a HTTPS
|
||||
return 301 https://$server_name$request_uri;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
listen [::]:443 ssl http2;
|
||||
server_name api.amayo.dev;
|
||||
|
||||
# Certificados SSL (generados con certbot)
|
||||
ssl_certificate /etc/letsencrypt/live/api.amayo.dev/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/api.amayo.dev/privkey.pem;
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers HIGH:!aNULL:!MD5;
|
||||
|
||||
# Logs
|
||||
access_log /var/log/nginx/api.amayo.dev.access.log;
|
||||
error_log /var/log/nginx/api.amayo.dev.error.log;
|
||||
|
||||
# Proxy al servidor Node.js en puerto 3001
|
||||
location / {
|
||||
proxy_pass http://localhost:3001;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
|
||||
# Timeouts
|
||||
proxy_connect_timeout 60s;
|
||||
proxy_send_timeout 60s;
|
||||
proxy_read_timeout 60s;
|
||||
}
|
||||
|
||||
# CORS headers (si es necesario)
|
||||
add_header Access-Control-Allow-Origin "https://docs.amayo.dev" always;
|
||||
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
|
||||
add_header Access-Control-Allow-Headers "Authorization, Content-Type" always;
|
||||
add_header Access-Control-Allow-Credentials "true" always;
|
||||
|
||||
# Security headers
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
}
|
||||
```
|
||||
|
||||
## Pasos de Instalación
|
||||
|
||||
### 1. Crear archivos de configuración
|
||||
|
||||
```bash
|
||||
# Frontend
|
||||
sudo nano /etc/nginx/sites-available/docs.amayo.dev
|
||||
|
||||
# Backend
|
||||
sudo nano /etc/nginx/sites-available/api.amayo.dev
|
||||
```
|
||||
|
||||
### 2. Habilitar los sitios
|
||||
|
||||
```bash
|
||||
sudo ln -s /etc/nginx/sites-available/docs.amayo.dev /etc/nginx/sites-enabled/
|
||||
sudo ln -s /etc/nginx/sites-available/api.amayo.dev /etc/nginx/sites-enabled/
|
||||
```
|
||||
|
||||
### 3. Generar certificados SSL con Certbot
|
||||
|
||||
```bash
|
||||
# Instalar certbot si no lo tienes
|
||||
sudo apt update
|
||||
sudo apt install certbot python3-certbot-nginx
|
||||
|
||||
# Generar certificados
|
||||
sudo certbot --nginx -d docs.amayo.dev
|
||||
sudo certbot --nginx -d api.amayo.dev
|
||||
|
||||
# Verificar renovación automática
|
||||
sudo certbot renew --dry-run
|
||||
```
|
||||
|
||||
### 4. Verificar configuración y reiniciar NGINX
|
||||
|
||||
```bash
|
||||
# Verificar sintaxis
|
||||
sudo nginx -t
|
||||
|
||||
# Reiniciar NGINX
|
||||
sudo systemctl restart nginx
|
||||
|
||||
# Ver estado
|
||||
sudo systemctl status nginx
|
||||
```
|
||||
|
||||
## Deploy del Frontend
|
||||
|
||||
```bash
|
||||
cd AmayoWeb
|
||||
|
||||
# Build de producción
|
||||
npm run build
|
||||
|
||||
# Copiar archivos al servidor
|
||||
sudo rm -rf /var/www/docs.amayo.dev/*
|
||||
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
|
||||
```
|
||||
|
||||
## Iniciar el Backend API
|
||||
|
||||
```bash
|
||||
# Opción 1: Con PM2 (recomendado)
|
||||
pm2 start src/server/server.ts --name amayo-api --interpreter ts-node
|
||||
pm2 save
|
||||
pm2 startup
|
||||
|
||||
# Opción 2: Con node directamente
|
||||
cd /ruta/a/amayo
|
||||
node -r ts-node/register src/server/server.ts
|
||||
|
||||
# Opción 3: Con npm script (agrega a package.json)
|
||||
npm run start:api
|
||||
```
|
||||
|
||||
## Variables de Entorno
|
||||
|
||||
### Backend (.env en raíz del proyecto)
|
||||
|
||||
```env
|
||||
API_PORT=3001
|
||||
API_HOST=0.0.0.0
|
||||
NODE_ENV=production
|
||||
```
|
||||
|
||||
### Frontend (.env.production en AmayoWeb)
|
||||
|
||||
```env
|
||||
VITE_API_URL=https://api.amayo.dev
|
||||
VITE_DISCORD_CLIENT_ID=tu_client_id
|
||||
```
|
||||
|
||||
## Verificación
|
||||
|
||||
### Frontend
|
||||
```bash
|
||||
curl https://docs.amayo.dev
|
||||
# Debe devolver el HTML de tu aplicación Vue
|
||||
```
|
||||
|
||||
### Backend
|
||||
```bash
|
||||
curl https://api.amayo.dev/api/bot/stats
|
||||
# Debe devolver JSON con estadísticas del bot
|
||||
```
|
||||
|
||||
## Firewall
|
||||
|
||||
```bash
|
||||
# Permitir HTTP y HTTPS
|
||||
sudo ufw allow 80/tcp
|
||||
sudo ufw allow 443/tcp
|
||||
|
||||
# El puerto 3001 NO debe estar expuesto públicamente
|
||||
# NGINX hace el proxy internamente
|
||||
```
|
||||
|
||||
## Logs
|
||||
|
||||
```bash
|
||||
# Ver logs de NGINX
|
||||
sudo tail -f /var/log/nginx/access.log
|
||||
sudo tail -f /var/log/nginx/error.log
|
||||
sudo tail -f /var/log/nginx/api.amayo.dev.access.log
|
||||
|
||||
# Ver logs del backend con PM2
|
||||
pm2 logs amayo-api
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Error: 502 Bad Gateway
|
||||
- Verifica que el servidor Node.js esté corriendo en el puerto 3001
|
||||
- Verifica los logs: `pm2 logs amayo-api`
|
||||
|
||||
### Error: 404 Not Found en rutas de Vue
|
||||
- Asegúrate de tener el `try_files` configurado correctamente
|
||||
- Verifica que el archivo `index.html` esté en la raíz de `/var/www/docs.amayo.dev`
|
||||
|
||||
### Error: CORS
|
||||
- Verifica los headers en la configuración de NGINX
|
||||
- Asegúrate de que el backend también maneje CORS si es necesario
|
||||
|
||||
### Certificados SSL no se renuevan
|
||||
```bash
|
||||
sudo certbot renew --force-renewal
|
||||
sudo systemctl reload nginx
|
||||
```
|
||||
@@ -1,264 +0,0 @@
|
||||
# Guía de Configuración de Nginx para docs.amayo.dev
|
||||
|
||||
## 📋 Requisitos Previos
|
||||
|
||||
- Ubuntu/Debian VPS con acceso root o sudo
|
||||
- Nginx instalado
|
||||
- Dominio `docs.amayo.dev` apuntando a tu VPS
|
||||
- Certificado SSL (Let's Encrypt recomendado)
|
||||
|
||||
## 1. Instalar Nginx (si no está instalado)
|
||||
|
||||
```bash
|
||||
sudo apt update
|
||||
sudo apt install nginx
|
||||
sudo systemctl start nginx
|
||||
sudo systemctl enable nginx
|
||||
```
|
||||
|
||||
## 2. Crear directorio para la aplicación
|
||||
|
||||
```bash
|
||||
sudo mkdir -p /var/www/docs.amayo.dev/dist
|
||||
sudo chown -R $USER:$USER /var/www/docs.amayo.dev
|
||||
```
|
||||
|
||||
## 3. Crear configuración de Nginx
|
||||
|
||||
Crea el archivo de configuración:
|
||||
|
||||
```bash
|
||||
sudo nano /etc/nginx/sites-available/docs.amayo.dev
|
||||
```
|
||||
|
||||
Pega la siguiente configuración:
|
||||
|
||||
```nginx
|
||||
# Redirigir HTTP a HTTPS
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name docs.amayo.dev;
|
||||
|
||||
return 301 https://$server_name$request_uri;
|
||||
}
|
||||
|
||||
# Configuración HTTPS
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
listen [::]:443 ssl http2;
|
||||
server_name docs.amayo.dev;
|
||||
|
||||
# Certificados SSL
|
||||
ssl_certificate /etc/letsencrypt/live/docs.amayo.dev/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/docs.amayo.dev/privkey.pem;
|
||||
ssl_trusted_certificate /etc/letsencrypt/live/docs.amayo.dev/chain.pem;
|
||||
|
||||
# Configuración SSL moderna
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_prefer_server_ciphers on;
|
||||
ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384;
|
||||
ssl_session_cache shared:SSL:10m;
|
||||
ssl_session_timeout 10m;
|
||||
ssl_stapling on;
|
||||
ssl_stapling_verify on;
|
||||
|
||||
# Headers de seguridad
|
||||
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
|
||||
# Root y index
|
||||
root /var/www/docs.amayo.dev/dist;
|
||||
index index.html;
|
||||
|
||||
# Logs
|
||||
access_log /var/log/nginx/docs.amayo.dev.access.log;
|
||||
error_log /var/log/nginx/docs.amayo.dev.error.log;
|
||||
|
||||
# Configuración para SPA (Single Page Application)
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Proxy para API backend (ajusta el puerto según tu configuración)
|
||||
location /api {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
|
||||
# Timeouts
|
||||
proxy_connect_timeout 60s;
|
||||
proxy_send_timeout 60s;
|
||||
proxy_read_timeout 60s;
|
||||
}
|
||||
|
||||
# Cache para assets estáticos
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|webp)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# Desactivar logs para favicon y robots.txt
|
||||
location = /favicon.ico {
|
||||
log_not_found off;
|
||||
access_log off;
|
||||
}
|
||||
|
||||
location = /robots.txt {
|
||||
log_not_found off;
|
||||
access_log off;
|
||||
}
|
||||
|
||||
# Compresión Gzip
|
||||
gzip on;
|
||||
gzip_vary on;
|
||||
gzip_min_length 1024;
|
||||
gzip_comp_level 6;
|
||||
gzip_types text/plain text/css text/xml text/javascript application/json application/javascript application/xml+rss application/rss+xml font/truetype font/opentype application/vnd.ms-fontobject image/svg+xml;
|
||||
gzip_disable "msie6";
|
||||
|
||||
# Brotli compression (si está disponible)
|
||||
# brotli on;
|
||||
# brotli_comp_level 6;
|
||||
# brotli_types text/plain text/css text/xml text/javascript application/json application/javascript application/xml+rss;
|
||||
}
|
||||
```
|
||||
|
||||
## 4. Habilitar el sitio
|
||||
|
||||
```bash
|
||||
# Crear enlace simbólico
|
||||
sudo ln -s /etc/nginx/sites-available/docs.amayo.dev /etc/nginx/sites-enabled/
|
||||
|
||||
# Eliminar configuración por defecto (opcional)
|
||||
sudo rm /etc/nginx/sites-enabled/default
|
||||
```
|
||||
|
||||
## 5. Instalar Certbot para SSL (Let's Encrypt)
|
||||
|
||||
```bash
|
||||
sudo apt install certbot python3-certbot-nginx
|
||||
|
||||
# Obtener certificado
|
||||
sudo certbot --nginx -d docs.amayo.dev
|
||||
|
||||
# El certificado se renovará automáticamente
|
||||
```
|
||||
|
||||
## 6. Verificar configuración de Nginx
|
||||
|
||||
```bash
|
||||
sudo nginx -t
|
||||
```
|
||||
|
||||
Si todo está bien, deberías ver:
|
||||
```
|
||||
nginx: configuration file /etc/nginx/nginx.conf test is successful
|
||||
```
|
||||
|
||||
## 7. Reiniciar Nginx
|
||||
|
||||
```bash
|
||||
sudo systemctl restart nginx
|
||||
```
|
||||
|
||||
## 8. Configurar Firewall (si está activo)
|
||||
|
||||
```bash
|
||||
sudo ufw allow 'Nginx Full'
|
||||
sudo ufw allow OpenSSH
|
||||
sudo ufw enable
|
||||
sudo ufw status
|
||||
```
|
||||
|
||||
## 9. Verificar que funciona
|
||||
|
||||
```bash
|
||||
curl -I https://docs.amayo.dev
|
||||
```
|
||||
|
||||
Deberías ver un código 200 o 301.
|
||||
|
||||
## 📝 Comandos Útiles
|
||||
|
||||
### Verificar estado de Nginx
|
||||
```bash
|
||||
sudo systemctl status nginx
|
||||
```
|
||||
|
||||
### Ver logs en tiempo real
|
||||
```bash
|
||||
sudo tail -f /var/log/nginx/docs.amayo.dev.access.log
|
||||
sudo tail -f /var/log/nginx/docs.amayo.dev.error.log
|
||||
```
|
||||
|
||||
### Recargar configuración sin downtime
|
||||
```bash
|
||||
sudo nginx -t && sudo systemctl reload nginx
|
||||
```
|
||||
|
||||
### Renovar certificado SSL manualmente
|
||||
```bash
|
||||
sudo certbot renew
|
||||
```
|
||||
|
||||
## 🔒 Configuración PM2 para Backend (Opcional)
|
||||
|
||||
Si tienes un backend Node.js para la autenticación:
|
||||
|
||||
```bash
|
||||
# Instalar PM2
|
||||
npm install -g pm2
|
||||
|
||||
# Iniciar el servidor
|
||||
pm2 start server-example.js --name "amayo-auth"
|
||||
|
||||
# Configurar para iniciar al arranque
|
||||
pm2 startup
|
||||
pm2 save
|
||||
|
||||
# Ver logs
|
||||
pm2 logs amayo-auth
|
||||
|
||||
# Reiniciar
|
||||
pm2 restart amayo-auth
|
||||
```
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Error 502 Bad Gateway
|
||||
- Verifica que el backend esté corriendo: `pm2 status`
|
||||
- Revisa los logs: `sudo tail -f /var/log/nginx/error.log`
|
||||
|
||||
### Error 403 Forbidden
|
||||
- Verifica permisos: `sudo chown -R www-data:www-data /var/www/docs.amayo.dev`
|
||||
- Verifica que index.html existe en `/var/www/docs.amayo.dev/dist/`
|
||||
|
||||
### Error SSL
|
||||
- Renueva el certificado: `sudo certbot renew --force-renewal`
|
||||
- Verifica rutas de certificados en la configuración de Nginx
|
||||
|
||||
## 📊 Monitoreo (Opcional)
|
||||
|
||||
### Instalar herramientas de monitoreo
|
||||
```bash
|
||||
# GoAccess para análisis de logs
|
||||
sudo apt install goaccess
|
||||
goaccess /var/log/nginx/docs.amayo.dev.access.log --log-format=COMBINED
|
||||
|
||||
# Netdata para monitoreo en tiempo real
|
||||
bash <(curl -Ss https://my-netdata.io/kickstart.sh)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
¡Tu sitio debería estar funcionando en https://docs.amayo.dev! 🎉
|
||||
@@ -1,355 +0,0 @@
|
||||
# 🎨 Guía de Personalización - AmayoWeb
|
||||
|
||||
## 📝 Pasos Esenciales de Configuración
|
||||
|
||||
### 1. Configurar Variables de Entorno
|
||||
|
||||
Crea un archivo `.env` en la raíz de `AmayoWeb/`:
|
||||
|
||||
```env
|
||||
# Discord OAuth2
|
||||
VITE_DISCORD_CLIENT_ID=TU_CLIENT_ID_AQUI
|
||||
|
||||
# API URL (opcional si tienes backend)
|
||||
VITE_API_URL=https://docs.amayo.dev/api
|
||||
```
|
||||
|
||||
### 2. Cambiar Avatar del Bot
|
||||
|
||||
Edita `src/components/IslandNavbar.vue` (línea 36):
|
||||
|
||||
```javascript
|
||||
// Antes
|
||||
const botLogo = ref('https://cdn.discordapp.com/avatars/1234567890/avatar.png')
|
||||
|
||||
// Después - Usa tu avatar real
|
||||
const botLogo = ref('https://cdn.discordapp.com/avatars/TU_BOT_ID/TU_AVATAR_HASH.png')
|
||||
```
|
||||
|
||||
### 3. Actualizar Nombre del Bot
|
||||
|
||||
En el mismo archivo `IslandNavbar.vue` (línea 37):
|
||||
|
||||
```javascript
|
||||
// Cambia 'Amayo' por el nombre de tu bot si es diferente
|
||||
const botName = ref('TuBotName')
|
||||
```
|
||||
|
||||
### 4. Personalizar Textos del Hero
|
||||
|
||||
Edita `src/i18n/locales.js`:
|
||||
|
||||
```javascript
|
||||
// Español
|
||||
hero: {
|
||||
subtitle: 'Tu descripción personalizada aquí',
|
||||
// ... más textos
|
||||
}
|
||||
|
||||
// Inglés
|
||||
hero: {
|
||||
subtitle: 'Your custom description here',
|
||||
// ... more texts
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Ajustar Estadísticas
|
||||
|
||||
Edita `src/components/HeroSection.vue` (línea 42):
|
||||
|
||||
```javascript
|
||||
const stats = ref({
|
||||
servers: '1.2K', // Cambia por tus números reales
|
||||
users: '50K', // Cambia por tus números reales
|
||||
commands: '150' // Cambia por tus números reales
|
||||
})
|
||||
```
|
||||
|
||||
### 6. Configurar URL de Invitación
|
||||
|
||||
Edita `src/components/HeroSection.vue` (línea 115):
|
||||
|
||||
```javascript
|
||||
const inviteBot = () => {
|
||||
// Reemplaza YOUR_CLIENT_ID con tu Discord Client ID real
|
||||
window.open('https://discord.com/api/oauth2/authorize?client_id=TU_CLIENT_ID&permissions=8&scope=bot%20applications.commands', '_blank')
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 Personalización de Colores
|
||||
|
||||
### Cambiar el Tema por Defecto
|
||||
|
||||
Edita `src/composables/useTheme.js` (línea 36):
|
||||
|
||||
```javascript
|
||||
// Cambia 'red' por: 'blue', 'green', 'purple', 'orange'
|
||||
const currentTheme = ref('red')
|
||||
```
|
||||
|
||||
### Agregar un Nuevo Tema
|
||||
|
||||
En `src/composables/useTheme.js`, añade al objeto `themes`:
|
||||
|
||||
```javascript
|
||||
const themes = {
|
||||
// ... temas existentes
|
||||
cyan: {
|
||||
primary: '#00bcd4',
|
||||
secondary: '#0097a7',
|
||||
accent: '#00e5ff',
|
||||
gradient: 'linear-gradient(135deg, #00bcd4, #0097a7)',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Luego en `src/components/IslandNavbar.vue`, añade el tema al array:
|
||||
|
||||
```javascript
|
||||
const themes = [
|
||||
// ... temas existentes
|
||||
{ name: 'cyan', gradient: 'linear-gradient(135deg, #00bcd4, #0097a7)' },
|
||||
]
|
||||
```
|
||||
|
||||
### Personalizar Colores del Fondo
|
||||
|
||||
Edita `src/components/AnimatedBackground.vue`:
|
||||
|
||||
```css
|
||||
.layer-1 {
|
||||
/* Cambia los colores del gradiente */
|
||||
background: radial-gradient(circle at 30% 50%, #TU_COLOR 0%, transparent 50%);
|
||||
}
|
||||
```
|
||||
|
||||
## 🌐 Añadir Más Idiomas
|
||||
|
||||
### 1. Actualizar configuración de i18n
|
||||
|
||||
Edita `src/i18n/locales.js`:
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
es: { /* ... */ },
|
||||
en: { /* ... */ },
|
||||
// Nuevo idioma
|
||||
pt: {
|
||||
navbar: {
|
||||
getStarted: 'Começar',
|
||||
dashboard: 'Painel',
|
||||
},
|
||||
// ... más traducciones
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Actualizar selector de idioma
|
||||
|
||||
Edita `src/components/IslandNavbar.vue`:
|
||||
|
||||
```javascript
|
||||
const toggleLanguage = () => {
|
||||
const langs = ['es', 'en', 'pt']
|
||||
const currentIndex = langs.indexOf(locale.value)
|
||||
const nextIndex = (currentIndex + 1) % langs.length
|
||||
locale.value = langs[nextIndex]
|
||||
localStorage.setItem('language', locale.value)
|
||||
}
|
||||
```
|
||||
|
||||
## 📱 Ajustes Responsive
|
||||
|
||||
### Cambiar Breakpoints
|
||||
|
||||
Edita el CSS en los componentes:
|
||||
|
||||
```css
|
||||
/* Cambiar de 768px a tu preferencia */
|
||||
@media (max-width: 768px) {
|
||||
/* Estilos móviles */
|
||||
}
|
||||
|
||||
/* Agregar nuevos breakpoints */
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
/* Estilos tablet */
|
||||
}
|
||||
```
|
||||
|
||||
## 🔗 Configurar Links del Navbar
|
||||
|
||||
Edita `src/components/IslandNavbar.vue`:
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- Cambia los hrefs -->
|
||||
<a href="#tus-secciones" class="nav-btn primary">
|
||||
{{ t('navbar.getStarted') }}
|
||||
</a>
|
||||
<a href="/tu-dashboard" class="nav-btn secondary">
|
||||
{{ t('navbar.dashboard') }}
|
||||
</a>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 🎯 Personalizar Animaciones
|
||||
|
||||
### Velocidad del Typewriter
|
||||
|
||||
Edita `src/components/HeroSection.vue` (línea 62):
|
||||
|
||||
```javascript
|
||||
const typewriterEffect = () => {
|
||||
// Ajusta las velocidades (en milisegundos)
|
||||
const speed = isDeleting.value ? 50 : 100 // Cambia estos valores
|
||||
}
|
||||
```
|
||||
|
||||
### Velocidad de Animación del Fondo
|
||||
|
||||
Edita `src/components/AnimatedBackground.vue`:
|
||||
|
||||
```css
|
||||
.layer-1 {
|
||||
animation: slide1 15s infinite; /* Cambia 15s a tu preferencia */
|
||||
}
|
||||
```
|
||||
|
||||
## 🖼️ Añadir Más Características al Hero
|
||||
|
||||
Edita `src/components/HeroSection.vue`:
|
||||
|
||||
```html
|
||||
<div class="hero-visual">
|
||||
<!-- Añade más tarjetas flotantes -->
|
||||
<div class="floating-card card-4">
|
||||
<div class="card-icon">⚡</div>
|
||||
<div class="card-text">Nueva Característica</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.card-4 {
|
||||
top: 150px;
|
||||
right: 50px;
|
||||
animation: float 6s ease-in-out infinite 6s;
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 Backend Discord OAuth2
|
||||
|
||||
### Configurar el Backend
|
||||
|
||||
1. Copia `server-example.js` a tu carpeta de backend
|
||||
2. Instala dependencias:
|
||||
```bash
|
||||
npm install express axios cors dotenv jsonwebtoken
|
||||
```
|
||||
|
||||
3. Crea `.env` en tu backend:
|
||||
```env
|
||||
DISCORD_CLIENT_ID=tu_client_id
|
||||
DISCORD_CLIENT_SECRET=tu_client_secret
|
||||
JWT_SECRET=tu_secret_super_seguro
|
||||
NODE_ENV=production
|
||||
PORT=3000
|
||||
```
|
||||
|
||||
4. Ejecuta con PM2:
|
||||
```bash
|
||||
pm2 start server-example.js --name "amayo-auth"
|
||||
pm2 save
|
||||
```
|
||||
|
||||
## 🔒 Configurar Discord Developer Portal
|
||||
|
||||
1. Ve a https://discord.com/developers/applications
|
||||
2. Crea una nueva aplicación o selecciona la existente
|
||||
3. Ve a OAuth2 > General
|
||||
4. Añade Redirect URIs:
|
||||
- Desarrollo: `http://localhost:5173/auth/callback`
|
||||
- Producción: `https://docs.amayo.dev/auth/callback`
|
||||
5. Copia el Client ID y Client Secret
|
||||
6. Ve a Bot y copia el Token del bot (si lo necesitas)
|
||||
|
||||
## 🚀 Optimizaciones de Producción
|
||||
|
||||
### Lazy Loading de Componentes
|
||||
|
||||
En `src/router/index.js`:
|
||||
|
||||
```javascript
|
||||
{
|
||||
path: '/dashboard',
|
||||
component: () => import('../views/Dashboard.vue') // Carga perezosa
|
||||
}
|
||||
```
|
||||
|
||||
### Preload de Fuentes
|
||||
|
||||
En `index.html`:
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link rel="preload" href="/fonts/tu-fuente.woff2" as="font" type="font/woff2" crossorigin>
|
||||
</head>
|
||||
```
|
||||
|
||||
## 📈 Analytics (Opcional)
|
||||
|
||||
### Añadir Google Analytics
|
||||
|
||||
En `index.html`:
|
||||
|
||||
```html
|
||||
<head>
|
||||
<!-- Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=TU_ID"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'TU_ID');
|
||||
</script>
|
||||
</head>
|
||||
```
|
||||
|
||||
## 🎨 Fuentes Personalizadas
|
||||
|
||||
### Importar Google Fonts
|
||||
|
||||
En `src/App.vue` o `index.html`:
|
||||
|
||||
```html
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=TuFuente:wght@400;600;700&display=swap');
|
||||
</style>
|
||||
```
|
||||
|
||||
Luego en el CSS:
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: 'TuFuente', sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
## 🔔 Notificaciones (Próximamente)
|
||||
|
||||
Placeholder para cuando quieras añadir notificaciones:
|
||||
|
||||
```javascript
|
||||
// Instalar: npm install vue-toastification
|
||||
import Toast from "vue-toastification";
|
||||
import "vue-toastification/dist/index.css";
|
||||
|
||||
app.use(Toast, {
|
||||
position: "top-right",
|
||||
timeout: 3000
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
¡Con estas personalizaciones tendrás tu landing page única! 🎉
|
||||
@@ -1,69 +0,0 @@
|
||||
# Guía Rápida de Inicio - AmayoWeb
|
||||
|
||||
## 🚀 Inicio Rápido
|
||||
|
||||
### 1. Instalar dependencias
|
||||
```bash
|
||||
cd AmayoWeb
|
||||
npm install
|
||||
```
|
||||
|
||||
### 2. Configurar variables de entorno
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Edita el archivo `.env` con tus credenciales:
|
||||
```env
|
||||
VITE_DISCORD_CLIENT_ID=tu_discord_client_id
|
||||
```
|
||||
|
||||
### 3. Ejecutar en desarrollo
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Visita: http://localhost:5173
|
||||
|
||||
### 4. Build para producción
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
### 5. Deploy a VPS (Windows)
|
||||
```powershell
|
||||
.\deploy.ps1 -Server "user@tu-vps.com"
|
||||
```
|
||||
|
||||
## 🎨 Características Principales
|
||||
|
||||
✅ **Fondo animado** con gradientes rojos deslizantes
|
||||
✅ **Navbar island style** flotante
|
||||
✅ **Hero con efecto typewriter**
|
||||
✅ **Sistema de temas** (5 degradados diferentes)
|
||||
✅ **Internacionalización** ES/EN
|
||||
✅ **Autenticación Discord OAuth2**
|
||||
|
||||
## 📚 Documentación Completa
|
||||
|
||||
- **SETUP.md** - Guía completa de instalación y configuración
|
||||
- **NGINX_SETUP.md** - Configuración de Nginx en VPS
|
||||
- **server-example.js** - Ejemplo de backend para Discord OAuth2
|
||||
|
||||
## 🔧 Comandos Disponibles
|
||||
|
||||
```bash
|
||||
npm run dev # Servidor de desarrollo
|
||||
npm run build # Build para producción
|
||||
npm run preview # Preview del build
|
||||
```
|
||||
|
||||
## 🌐 URLs Importantes
|
||||
|
||||
- **Local**: http://localhost:5173
|
||||
- **Producción**: https://docs.amayo.dev
|
||||
- **Discord Developer Portal**: https://discord.com/developers/applications
|
||||
|
||||
## ❓ Necesitas ayuda?
|
||||
|
||||
Consulta los archivos de documentación o abre un issue en GitHub.
|
||||
@@ -1,254 +0,0 @@
|
||||
# ✨ Resumen de Cambios Aplicados
|
||||
|
||||
## 🎯 Solicitudes Completadas
|
||||
|
||||
### ✅ 1. Selector de Temas → Dropdown Menu
|
||||
**ANTES:**
|
||||
```
|
||||
[●] [●] [●] [●] [●] ← Círculos de colores en línea
|
||||
```
|
||||
|
||||
**AHORA:**
|
||||
```
|
||||
[🎨 ▼] ← Botón con dropdown
|
||||
├─ 🔴 Rojo ✓
|
||||
├─ 🔵 Azul
|
||||
├─ 🟢 Verde
|
||||
├─ 🟣 Púrpura
|
||||
└─ 🟠 Naranja
|
||||
```
|
||||
|
||||
**Mejoras:**
|
||||
- Menú desplegable elegante
|
||||
- Nombres de temas en español/inglés
|
||||
- Previsualización del tema actual
|
||||
- Indicador visual del tema activo
|
||||
- Se cierra automáticamente al hacer clic fuera
|
||||
|
||||
---
|
||||
|
||||
### ✅ 2. Textos de Características Corregidos
|
||||
**ANTES:**
|
||||
- 🎮 Minijuegos Divertidos
|
||||
- ⚔️ Sistema RPG Completo
|
||||
- 🏆 Logros y Recompensas
|
||||
|
||||
**AHORA:**
|
||||
- 🤝 Alianzas
|
||||
- 🎫 Tickets
|
||||
- ⚙️ Comandos Custom
|
||||
|
||||
**Traducciones incluidas en ES/EN**
|
||||
|
||||
---
|
||||
|
||||
### ✅ 3. Estadísticas Reales del Bot
|
||||
**ANTES:**
|
||||
```javascript
|
||||
const stats = {
|
||||
servers: '1.2K', // ← Valores estáticos
|
||||
users: '50K',
|
||||
commands: '150'
|
||||
}
|
||||
```
|
||||
|
||||
**AHORA:**
|
||||
```javascript
|
||||
// Se obtienen datos reales desde el backend
|
||||
const stats = await botService.getStats()
|
||||
// Actualización automática cada 5 minutos
|
||||
```
|
||||
|
||||
**Características:**
|
||||
- Conexión a API real (`/api/bot/stats`)
|
||||
- Formato inteligente de números (1234 → 1.2K)
|
||||
- Loading state mientras carga
|
||||
- Auto-refresh cada 5 minutos
|
||||
- Fallback si falla la conexión
|
||||
|
||||
**Archivo backend incluido:**
|
||||
- `server-bot-stats.js` - Ejemplo completo con Discord.js
|
||||
|
||||
---
|
||||
|
||||
### ✅ 4. Nombre del Bot Actualizado
|
||||
**ANTES:** Shinaky
|
||||
**AHORA:** Amayo ✨
|
||||
|
||||
Actualizado en:
|
||||
- Navbar (nombre y alt del avatar)
|
||||
- Documentación
|
||||
|
||||
---
|
||||
|
||||
## 📦 Archivos Nuevos Creados
|
||||
|
||||
```
|
||||
AmayoWeb/
|
||||
├── src/
|
||||
│ └── services/
|
||||
│ └── bot.js ← Servicio para estadísticas
|
||||
├── server-bot-stats.js ← Backend con Discord.js
|
||||
├── CHANGELOG.md ← Este resumen
|
||||
└── RESUMEN_CAMBIOS.md ← Resumen visual
|
||||
```
|
||||
|
||||
## 🔧 Archivos Modificados
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/
|
||||
│ ├── IslandNavbar.vue ← Dropdown de temas + nombre Amayo
|
||||
│ └── HeroSection.vue ← Estadísticas dinámicas + textos
|
||||
├── i18n/
|
||||
│ └── locales.js ← Nuevas traducciones
|
||||
└── services/
|
||||
└── bot.js ← Nuevo servicio
|
||||
|
||||
server-example.js ← Endpoint /api/bot/stats añadido
|
||||
```
|
||||
|
||||
## 🚀 Cómo Probar los Cambios
|
||||
|
||||
### Frontend (Ya está corriendo ✅)
|
||||
```bash
|
||||
# Visita en tu navegador
|
||||
http://localhost:5173
|
||||
```
|
||||
|
||||
**Verifica:**
|
||||
1. ✅ Click en el botón de temas (arriba derecha)
|
||||
2. ✅ Aparece dropdown con 5 opciones
|
||||
3. ✅ Las tarjetas dicen "Alianzas, Tickets, Comandos Custom"
|
||||
4. ✅ El navbar dice "Amayo"
|
||||
5. ✅ Las estadísticas muestran "..." mientras cargan
|
||||
|
||||
### Backend (Necesita configuración)
|
||||
|
||||
**Opción 1: Backend simple (sin estadísticas reales)**
|
||||
```bash
|
||||
# Las estadísticas mostrarán 0
|
||||
# El resto de la app funciona perfectamente
|
||||
```
|
||||
|
||||
**Opción 2: Backend con estadísticas reales**
|
||||
```bash
|
||||
# 1. Configurar variables de entorno
|
||||
cp .env.example .env
|
||||
# Edita .env y añade:
|
||||
# DISCORD_BOT_TOKEN=tu_token_aqui
|
||||
|
||||
# 2. Instalar Discord.js
|
||||
npm install discord.js
|
||||
|
||||
# 3. Ejecutar servidor
|
||||
node server-bot-stats.js
|
||||
|
||||
# 4. Verificar que funcione
|
||||
curl http://localhost:3000/api/bot/stats
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Comparación Visual
|
||||
|
||||
### Navbar Antes vs Ahora
|
||||
|
||||
**ANTES:**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ 🤖 Shinaky [●●●●●] 🇪🇸 [Comenzar] [Panel] │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**AHORA:**
|
||||
```
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ 🤖 Amayo [🎨▼] 🇪🇸 [Comenzar] [Panel] │
|
||||
│ └─ Dropdown con temas │
|
||||
└─────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Hero Antes vs Ahora
|
||||
|
||||
**ANTES:**
|
||||
```
|
||||
┌──────────────────────┐ ┌──────────────────┐
|
||||
│ 🎮 Minijuegos │ │ 1.2K+ Servidores│
|
||||
└──────────────────────┘ └──────────────────┘
|
||||
```
|
||||
|
||||
**AHORA:**
|
||||
```
|
||||
┌──────────────────────┐ ┌──────────────────┐
|
||||
│ 🤝 Alianzas │ │ ⏳ Cargando... │
|
||||
│ 🎫 Tickets │ │ (datos reales) │
|
||||
│ ⚙️ Comandos Custom │ └──────────────────┘
|
||||
└──────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Estadísticas del Cambio
|
||||
|
||||
| Métrica | Valor |
|
||||
|---------|-------|
|
||||
| Archivos creados | 3 |
|
||||
| Archivos modificados | 5 |
|
||||
| Líneas de código añadidas | ~500 |
|
||||
| Funcionalidades nuevas | 4 |
|
||||
| Bugs corregidos | 0 (todo nuevo) |
|
||||
| Performance | ✅ Mejorada |
|
||||
| UX | ✅ Mejorada |
|
||||
|
||||
---
|
||||
|
||||
## ✅ Checklist de Verificación
|
||||
|
||||
### Frontend
|
||||
- [x] Dropdown de temas funciona
|
||||
- [x] Temas se pueden cambiar
|
||||
- [x] Tema seleccionado se guarda en localStorage
|
||||
- [x] Textos actualizados (Alianzas, Tickets, etc.)
|
||||
- [x] Iconos correctos en las tarjetas
|
||||
- [x] Nombre "Amayo" visible
|
||||
- [x] Traducciones ES/EN funcionan
|
||||
- [x] Responsive design mantiene funcionalidad
|
||||
|
||||
### Backend (Pendiente de configurar)
|
||||
- [ ] Servidor Express corriendo
|
||||
- [ ] Bot de Discord conectado
|
||||
- [ ] Endpoint `/api/bot/stats` responde
|
||||
- [ ] Estadísticas reales se muestran en frontend
|
||||
- [ ] Auto-refresh funciona cada 5 minutos
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Estado Final
|
||||
|
||||
**Todo funcionando en desarrollo** ✅
|
||||
|
||||
Para ver los cambios en acción:
|
||||
1. Abre http://localhost:5173 en tu navegador
|
||||
2. Interactúa con el dropdown de temas
|
||||
3. Observa las nuevas características
|
||||
|
||||
**Para producción:**
|
||||
1. Configura el backend con las estadísticas reales
|
||||
2. Actualiza la URL del avatar del bot
|
||||
3. Ejecuta `npm run build`
|
||||
4. Deploy con el script `deploy.ps1`
|
||||
|
||||
---
|
||||
|
||||
## 📞 Necesitas Ayuda?
|
||||
|
||||
Consulta estos archivos:
|
||||
- `CHANGELOG.md` - Detalles técnicos de los cambios
|
||||
- `SETUP.md` - Guía de instalación completa
|
||||
- `NGINX_SETUP.md` - Configuración del servidor
|
||||
- `PERSONALIZACION.md` - Cómo personalizar más
|
||||
|
||||
---
|
||||
|
||||
**¡Todos los cambios solicitados han sido implementados exitosamente!** 🎊
|
||||
@@ -1,161 +0,0 @@
|
||||
# AmayoWeb - Nueva Landing Page
|
||||
|
||||
## 🎨 Características Implementadas
|
||||
|
||||
### ✅ Diseño Visual
|
||||
- **Fondo Animado**: Gradientes rojos con efecto de deslizamiento suave
|
||||
- **Grid Pattern**: Patrón de cuadrícula sutil sobre el fondo
|
||||
- **Navbar Island Style**: Navegación flotante con bordes redondeados
|
||||
- **Hero Section**: Con efecto typewriter animado
|
||||
|
||||
### 🌐 Internacionalización
|
||||
- Soporte para Español e Inglés
|
||||
- Selector de idioma en el navbar
|
||||
- Traducciones configurables en `src/i18n/locales.js`
|
||||
|
||||
### 🎨 Sistema de Temas
|
||||
- 5 temas predefinidos con degradados:
|
||||
- Rojo (por defecto)
|
||||
- Azul
|
||||
- Verde
|
||||
- Púrpura
|
||||
- Naranja
|
||||
- Selector visual con círculos de colores
|
||||
- Persistencia en localStorage
|
||||
|
||||
### 🔐 Autenticación Discord
|
||||
- Login con Discord OAuth2
|
||||
- Servicio de autenticación completo
|
||||
- Manejo de callbacks y tokens
|
||||
- Guard de navegación para rutas protegidas
|
||||
|
||||
## 📦 Instalación
|
||||
|
||||
```bash
|
||||
cd AmayoWeb
|
||||
npm install
|
||||
```
|
||||
|
||||
## ⚙️ Configuración
|
||||
|
||||
1. Copia el archivo de ejemplo de variables de entorno:
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
2. Configura las variables en `.env`:
|
||||
```env
|
||||
VITE_DISCORD_CLIENT_ID=tu_client_id_aqui
|
||||
VITE_API_URL=http://localhost:3000
|
||||
```
|
||||
|
||||
3. En Discord Developer Portal (https://discord.com/developers/applications):
|
||||
- Crea una nueva aplicación
|
||||
- Ve a OAuth2 > General
|
||||
- Añade las siguientes redirect URIs:
|
||||
- Desarrollo: `http://localhost:5173/auth/callback`
|
||||
- Producción: `https://docs.amayo.dev/auth/callback`
|
||||
- Copia el Client ID y añádelo al archivo `.env`
|
||||
|
||||
## 🚀 Desarrollo
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
El proyecto estará disponible en `http://localhost:5173`
|
||||
|
||||
## 🏗️ Build para Producción
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Los archivos compilados estarán en la carpeta `dist/`
|
||||
|
||||
## 🌐 Configuración de Nginx
|
||||
|
||||
Para servir la aplicación en tu VPS con el dominio `docs.amayo.dev`, añade esta configuración a Nginx:
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name docs.amayo.dev;
|
||||
|
||||
# Redirigir HTTP a HTTPS
|
||||
return 301 https://$server_name$request_uri;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
listen [::]:443 ssl http2;
|
||||
server_name docs.amayo.dev;
|
||||
|
||||
# Certificados SSL (Let's Encrypt)
|
||||
ssl_certificate /etc/letsencrypt/live/docs.amayo.dev/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/docs.amayo.dev/privkey.pem;
|
||||
|
||||
root /var/www/docs.amayo.dev/dist;
|
||||
index index.html;
|
||||
|
||||
# Configuración para SPA
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Proxy para API (si tienes backend)
|
||||
location /api {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
|
||||
# Cache para assets estáticos
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🚀 Deploy en VPS
|
||||
|
||||
1. Construye el proyecto:
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
2. Sube los archivos de `dist/` a tu VPS:
|
||||
```bash
|
||||
scp -r dist/* user@tu-vps:/var/www/docs.amayo.dev/dist/
|
||||
```
|
||||
|
||||
3. Asegúrate de que Nginx tenga permisos:
|
||||
```bash
|
||||
sudo chown -R www-data:www-data /var/www/docs.amayo.dev
|
||||
sudo chmod -R 755 /var/www/docs.amayo.dev
|
||||
```
|
||||
|
||||
4. Recarga Nginx:
|
||||
```bash
|
||||
sudo nginx -t
|
||||
sudo systemctl reload nginx
|
||||
```
|
||||
|
||||
## 📝 Personalización
|
||||
|
||||
### Cambiar el avatar del bot
|
||||
Edita `src/components/IslandNavbar.vue` línea 36:
|
||||
```javascript
|
||||
const botLogo = ref('TU_URL_DE_AVATAR_AQUI')
|
||||
```
|
||||
|
||||
### Añadir más temas
|
||||
Edita `src/composables/useTheme.js` y añade nuevos temas al objeto `themes`.
|
||||
|
||||
### Modificar textos
|
||||
Edita `src/i18n/locales.js` para cambiar los textos en español e inglés.
|
||||
@@ -1,318 +0,0 @@
|
||||
# 🔍 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
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
cat /var/www/docs.amayo.dev/index.html
|
||||
```
|
||||
|
||||
**Debería contener:**
|
||||
```html
|
||||
<!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
|
||||
|
||||
```bash
|
||||
# Ver configuración actual
|
||||
sudo cat /etc/nginx/sites-available/default | grep -A 30 "docs.amayo.dev"
|
||||
```
|
||||
|
||||
**Debe tener:**
|
||||
```nginx
|
||||
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
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# 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:
|
||||
|
||||
```bash
|
||||
# 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:
|
||||
|
||||
```bash
|
||||
sudo nano /etc/nginx/sites-available/default
|
||||
```
|
||||
|
||||
Buscar la sección de `docs.amayo.dev` y asegurarte que tenga:
|
||||
|
||||
```nginx
|
||||
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:
|
||||
|
||||
```bash
|
||||
# Verificar sintaxis
|
||||
sudo nginx -t
|
||||
|
||||
# Si OK, reiniciar
|
||||
sudo systemctl restart nginx
|
||||
```
|
||||
|
||||
### Solución 3: Verificar permisos
|
||||
|
||||
```bash
|
||||
# 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):
|
||||
|
||||
```powershell
|
||||
# 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):
|
||||
|
||||
```powershell
|
||||
# Copiar archivos al servidor
|
||||
scp -r dist/* shnimlz@tu_ip:/home/shnimlz/amayo-frontend/
|
||||
```
|
||||
|
||||
### En el VPS (Linux):
|
||||
|
||||
```bash
|
||||
# 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:
|
||||
|
||||
```bash
|
||||
# 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).
|
||||
@@ -1,340 +0,0 @@
|
||||
# 🎯 Comandos Exactos para el VPS
|
||||
|
||||
## ✅ Ya Tienes Configurado
|
||||
|
||||
```
|
||||
✓ Certificado SSL para api.amayo.dev
|
||||
✓ Certificado SSL para docs.amayo.dev (según tu configuración)
|
||||
✓ NGINX instalado
|
||||
```
|
||||
|
||||
## 📝 Pasos a Seguir
|
||||
|
||||
### 1. Configurar NGINX para docs.amayo.dev (Frontend Vue)
|
||||
|
||||
Editar el archivo de configuración existente:
|
||||
|
||||
```bash
|
||||
sudo nano /etc/nginx/sites-available/default
|
||||
```
|
||||
|
||||
**Reemplazar la configuración de `docs.amayo.dev` con esto:**
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name docs.amayo.dev;
|
||||
return 301 https://$host$request_uri;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
# IMPORTANTE: Cambiar a archivos estáticos
|
||||
root /var/www/docs.amayo.dev;
|
||||
index index.html;
|
||||
|
||||
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
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Cache assets
|
||||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# Security headers
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Configurar NGINX para api.amayo.dev (Backend)
|
||||
|
||||
En el mismo archivo o crear uno separado:
|
||||
|
||||
```bash
|
||||
sudo nano /etc/nginx/sites-available/default
|
||||
```
|
||||
|
||||
**Agregar o modificar la sección de `api.amayo.dev`:**
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name api.amayo.dev;
|
||||
return 301 https://$host$request_uri;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
listen [::]:443 ssl http2;
|
||||
server_name api.amayo.dev;
|
||||
|
||||
ssl_certificate /etc/letsencrypt/live/api.amayo.dev/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/api.amayo.dev/privkey.pem;
|
||||
include /etc/letsencrypt/options-ssl-nginx.conf;
|
||||
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
|
||||
|
||||
access_log /var/log/nginx/api.amayo.dev.access.log;
|
||||
error_log /var/log/nginx/api.amayo.dev.error.log;
|
||||
|
||||
# Proxy al bot en puerto 3000
|
||||
location / {
|
||||
proxy_pass http://127.0.0.1:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
|
||||
proxy_connect_timeout 60s;
|
||||
proxy_send_timeout 60s;
|
||||
proxy_read_timeout 60s;
|
||||
}
|
||||
|
||||
# CORS para el frontend
|
||||
add_header Access-Control-Allow-Origin "https://docs.amayo.dev" always;
|
||||
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
|
||||
add_header Access-Control-Allow-Headers "Authorization, Content-Type" always;
|
||||
add_header Access-Control-Allow-Credentials "true" always;
|
||||
|
||||
# Manejar preflight
|
||||
if ($request_method = 'OPTIONS') {
|
||||
add_header Access-Control-Allow-Origin "https://docs.amayo.dev" always;
|
||||
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
|
||||
add_header Access-Control-Allow-Headers "Authorization, Content-Type" always;
|
||||
add_header Access-Control-Max-Age 1728000;
|
||||
add_header Content-Type 'text/plain; charset=utf-8';
|
||||
add_header Content-Length 0;
|
||||
return 204;
|
||||
}
|
||||
|
||||
# Security headers
|
||||
add_header X-Frame-Options "SAMEORIGIN" always;
|
||||
add_header X-Content-Type-Options "nosniff" always;
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Verificar y Reiniciar NGINX
|
||||
|
||||
```bash
|
||||
# Verificar sintaxis
|
||||
sudo nginx -t
|
||||
|
||||
# Si está OK, reiniciar
|
||||
sudo systemctl restart nginx
|
||||
|
||||
# Ver estado
|
||||
sudo systemctl status nginx
|
||||
```
|
||||
|
||||
### 4. Crear Directorio para el Frontend
|
||||
|
||||
```bash
|
||||
# Crear directorio
|
||||
sudo mkdir -p /var/www/docs.amayo.dev
|
||||
|
||||
# Ajustar permisos
|
||||
sudo chown -R $USER:www-data /var/www/docs.amayo.dev
|
||||
sudo chmod -R 755 /var/www/docs.amayo.dev
|
||||
```
|
||||
|
||||
### 5. Deploy del Frontend (Desde tu PC Local)
|
||||
|
||||
En tu PC con Windows, en la carpeta `AmayoWeb`:
|
||||
|
||||
```powershell
|
||||
# Build
|
||||
npm run build
|
||||
|
||||
# El contenido estará en la carpeta dist/
|
||||
```
|
||||
|
||||
**Transferir archivos al VPS:**
|
||||
|
||||
Opción A - Con SCP desde PowerShell:
|
||||
```powershell
|
||||
scp -r dist/* shnimlz@tu_ip_servidor:/home/shnimlz/amayo-frontend/
|
||||
```
|
||||
|
||||
Opción B - Con WinSCP o FileZilla (interfaz gráfica)
|
||||
|
||||
**En el VPS, mover los archivos:**
|
||||
|
||||
```bash
|
||||
# Copiar archivos al directorio web
|
||||
sudo cp -r /home/shnimlz/amayo-frontend/* /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
|
||||
```
|
||||
|
||||
### 6. Verificar Variables de Entorno del Bot
|
||||
|
||||
En el servidor VPS:
|
||||
|
||||
```bash
|
||||
cd /ruta/a/tu/proyecto/amayo
|
||||
|
||||
# Editar .env
|
||||
nano .env
|
||||
```
|
||||
|
||||
Asegúrate de tener:
|
||||
|
||||
```env
|
||||
PORT=3000
|
||||
DISCORD_TOKEN=tu_token
|
||||
# ... resto de tus variables
|
||||
```
|
||||
|
||||
### 7. Verificar que el Bot Esté Corriendo
|
||||
|
||||
```bash
|
||||
# Si usas PM2
|
||||
pm2 status
|
||||
|
||||
# Ver logs
|
||||
pm2 logs amayo
|
||||
|
||||
# Reiniciar si es necesario
|
||||
pm2 restart amayo
|
||||
|
||||
# Si no usas PM2, verificar el proceso
|
||||
ps aux | grep node
|
||||
|
||||
# Verificar que esté en el puerto 3000
|
||||
netstat -tulpn | grep 3000
|
||||
```
|
||||
|
||||
### 8. Verificar que Todo Funcione
|
||||
|
||||
```bash
|
||||
# Verificar frontend
|
||||
curl https://docs.amayo.dev
|
||||
|
||||
# Verificar backend API
|
||||
curl https://api.amayo.dev/api/bot/stats
|
||||
|
||||
# Ver logs de NGINX
|
||||
sudo tail -f /var/log/nginx/docs.amayo.dev.access.log
|
||||
sudo tail -f /var/log/nginx/api.amayo.dev.access.log
|
||||
```
|
||||
|
||||
## 🔥 Comando Rápido de Deploy (Crear Script)
|
||||
|
||||
Crear archivo en el servidor:
|
||||
|
||||
```bash
|
||||
nano ~/deploy-amayo-frontend.sh
|
||||
```
|
||||
|
||||
Contenido:
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
|
||||
echo "🚀 Deploying Amayo Frontend..."
|
||||
|
||||
# Limpiar directorio
|
||||
sudo rm -rf /var/www/docs.amayo.dev/*
|
||||
|
||||
# Copiar nuevos archivos (ajusta la ruta según donde subas los archivos)
|
||||
sudo cp -r /home/shnimlz/amayo-frontend/* /var/www/docs.amayo.dev/
|
||||
|
||||
# Permisos
|
||||
sudo chown -R www-data:www-data /var/www/docs.amayo.dev
|
||||
sudo chmod -R 755 /var/www/docs.amayo.dev
|
||||
|
||||
# Reiniciar NGINX
|
||||
sudo systemctl reload nginx
|
||||
|
||||
echo "✅ Deploy completado!"
|
||||
echo "🌐 https://docs.amayo.dev"
|
||||
```
|
||||
|
||||
Hacer ejecutable:
|
||||
|
||||
```bash
|
||||
chmod +x ~/deploy-amayo-frontend.sh
|
||||
```
|
||||
|
||||
Usar:
|
||||
|
||||
```bash
|
||||
./deploy-amayo-frontend.sh
|
||||
```
|
||||
|
||||
## 🎯 Resumen de URLs
|
||||
|
||||
| Servicio | URL | Puerto Interno |
|
||||
|----------|-----|----------------|
|
||||
| Frontend | https://docs.amayo.dev | Archivos estáticos |
|
||||
| Backend API | https://api.amayo.dev | → localhost:3000 |
|
||||
|
||||
## 🔍 Troubleshooting Rápido
|
||||
|
||||
### El frontend no carga
|
||||
|
||||
```bash
|
||||
# Ver logs
|
||||
sudo tail -f /var/log/nginx/error.log
|
||||
|
||||
# Verificar archivos
|
||||
ls -la /var/www/docs.amayo.dev/
|
||||
|
||||
# Verificar NGINX
|
||||
sudo nginx -t
|
||||
```
|
||||
|
||||
### La API no responde (502)
|
||||
|
||||
```bash
|
||||
# Verificar bot
|
||||
pm2 status
|
||||
pm2 logs amayo
|
||||
|
||||
# Verificar puerto
|
||||
netstat -tulpn | grep 3000
|
||||
|
||||
# Reiniciar bot
|
||||
pm2 restart amayo
|
||||
```
|
||||
|
||||
### CORS errors
|
||||
|
||||
Verificar que la configuración de NGINX tenga los headers CORS correctos en la sección de `api.amayo.dev`.
|
||||
|
||||
---
|
||||
|
||||
**Notas:**
|
||||
- El bot se ejecuta en el puerto **3000** (no 3001)
|
||||
- El frontend son **archivos estáticos** de Vue
|
||||
- NGINX hace **proxy** del API al bot en puerto 3000
|
||||
@@ -1,178 +0,0 @@
|
||||
/**
|
||||
* Ejemplo de integración con Discord.js para obtener estadísticas reales
|
||||
*
|
||||
* Este archivo muestra cómo conectar tu backend Express con tu bot de Discord
|
||||
* para obtener estadísticas en tiempo real.
|
||||
*
|
||||
* INSTALACIÓN:
|
||||
* npm install discord.js
|
||||
*/
|
||||
|
||||
import { Client, GatewayIntentBits } from 'discord.js';
|
||||
import express from 'express';
|
||||
import cors from 'cors';
|
||||
|
||||
const app = express();
|
||||
|
||||
// Crear cliente de Discord
|
||||
const client = new Client({
|
||||
intents: [
|
||||
GatewayIntentBits.Guilds,
|
||||
GatewayIntentBits.GuildMembers,
|
||||
]
|
||||
});
|
||||
|
||||
// Login del bot
|
||||
client.login(process.env.DISCORD_BOT_TOKEN);
|
||||
|
||||
// Cuando el bot esté listo
|
||||
client.once('ready', () => {
|
||||
console.log(`✅ Bot conectado como ${client.user.tag}`);
|
||||
});
|
||||
|
||||
// Configuración CORS
|
||||
app.use(cors({
|
||||
origin: process.env.NODE_ENV === 'production'
|
||||
? 'https://docs.amayo.dev'
|
||||
: 'http://localhost:5173'
|
||||
}));
|
||||
|
||||
app.use(express.json());
|
||||
|
||||
/**
|
||||
* Endpoint para obtener estadísticas reales del bot
|
||||
*/
|
||||
app.get('/api/bot/stats', async (req, res) => {
|
||||
try {
|
||||
// Verificar que el bot esté conectado
|
||||
if (!client.isReady()) {
|
||||
return res.status(503).json({
|
||||
error: 'Bot is not connected',
|
||||
servers: 0,
|
||||
users: 0,
|
||||
commands: 0
|
||||
});
|
||||
}
|
||||
|
||||
// Obtener número de servidores
|
||||
const serverCount = client.guilds.cache.size;
|
||||
|
||||
// Obtener número total de usuarios únicos
|
||||
let totalUsers = 0;
|
||||
client.guilds.cache.forEach(guild => {
|
||||
totalUsers += guild.memberCount;
|
||||
});
|
||||
|
||||
// Obtener número de comandos
|
||||
// Opción 1: Si usas slash commands
|
||||
const commandCount = client.application?.commands.cache.size || 0;
|
||||
|
||||
// Opción 2: Si tienes un registro de comandos personalizado
|
||||
// const commandCount = Object.keys(yourCommandsObject).length;
|
||||
|
||||
// Responder con las estadísticas
|
||||
res.json({
|
||||
servers: serverCount,
|
||||
users: totalUsers,
|
||||
commands: commandCount,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching bot stats:', error);
|
||||
res.status(500).json({
|
||||
error: 'Failed to fetch bot stats',
|
||||
servers: 0,
|
||||
users: 0,
|
||||
commands: 0
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Endpoint para información detallada del bot
|
||||
*/
|
||||
app.get('/api/bot/info', async (req, res) => {
|
||||
try {
|
||||
if (!client.isReady()) {
|
||||
return res.status(503).json({ error: 'Bot is not connected' });
|
||||
}
|
||||
|
||||
res.json({
|
||||
name: client.user.username,
|
||||
id: client.user.id,
|
||||
avatar: client.user.displayAvatarURL({ size: 256 }),
|
||||
discriminator: client.user.discriminator,
|
||||
tag: client.user.tag,
|
||||
createdAt: client.user.createdAt,
|
||||
uptime: process.uptime(),
|
||||
ping: client.ws.ping
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching bot info:', error);
|
||||
res.status(500).json({ error: 'Failed to fetch bot info' });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Endpoint para obtener el top de servidores (opcional)
|
||||
*/
|
||||
app.get('/api/bot/top-guilds', async (req, res) => {
|
||||
try {
|
||||
if (!client.isReady()) {
|
||||
return res.status(503).json({ error: 'Bot is not connected' });
|
||||
}
|
||||
|
||||
const topGuilds = client.guilds.cache
|
||||
.sort((a, b) => b.memberCount - a.memberCount)
|
||||
.first(10)
|
||||
.map(guild => ({
|
||||
id: guild.id,
|
||||
name: guild.name,
|
||||
memberCount: guild.memberCount,
|
||||
icon: guild.iconURL({ size: 128 })
|
||||
}));
|
||||
|
||||
res.json(topGuilds);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching top guilds:', error);
|
||||
res.status(500).json({ error: 'Failed to fetch top guilds' });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Health check
|
||||
*/
|
||||
app.get('/api/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'ok',
|
||||
botConnected: client.isReady(),
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
});
|
||||
|
||||
// Iniciar servidor
|
||||
const PORT = process.env.PORT || 3000;
|
||||
app.listen(PORT, () => {
|
||||
console.log(`🚀 API server running on port ${PORT}`);
|
||||
});
|
||||
|
||||
// Manejo de errores del bot
|
||||
client.on('error', error => {
|
||||
console.error('Discord client error:', error);
|
||||
});
|
||||
|
||||
client.on('warn', warning => {
|
||||
console.warn('Discord client warning:', warning);
|
||||
});
|
||||
|
||||
// Manejo de cierre graceful
|
||||
process.on('SIGINT', () => {
|
||||
console.log('Closing bot connection...');
|
||||
client.destroy();
|
||||
process.exit(0);
|
||||
});
|
||||
|
||||
export { client, app };
|
||||
@@ -1,244 +0,0 @@
|
||||
/**
|
||||
* Servidor Express para manejar la autenticación de Discord OAuth2
|
||||
*
|
||||
* INSTALACIÓN:
|
||||
* npm install express axios cors dotenv jsonwebtoken
|
||||
*
|
||||
* CONFIGURACIÓN:
|
||||
* Crear archivo .env con:
|
||||
* DISCORD_CLIENT_ID=tu_client_id
|
||||
* DISCORD_CLIENT_SECRET=tu_client_secret
|
||||
* JWT_SECRET=tu_secret_para_jwt
|
||||
* PORT=3000
|
||||
*/
|
||||
|
||||
import express from 'express';
|
||||
import axios from 'axios';
|
||||
import cors from 'cors';
|
||||
import dotenv from 'dotenv';
|
||||
import jwt from 'jsonwebtoken';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
// Configuración CORS
|
||||
app.use(cors({
|
||||
origin: process.env.NODE_ENV === 'production'
|
||||
? 'https://docs.amayo.dev'
|
||||
: 'http://localhost:5173',
|
||||
credentials: true
|
||||
}));
|
||||
|
||||
app.use(express.json());
|
||||
|
||||
const DISCORD_CLIENT_ID = process.env.DISCORD_CLIENT_ID;
|
||||
const DISCORD_CLIENT_SECRET = process.env.DISCORD_CLIENT_SECRET;
|
||||
const JWT_SECRET = process.env.JWT_SECRET;
|
||||
const REDIRECT_URI = process.env.NODE_ENV === 'production'
|
||||
? 'https://docs.amayo.dev/auth/callback'
|
||||
: 'http://localhost:5173/auth/callback';
|
||||
|
||||
/**
|
||||
* Endpoint para intercambiar código OAuth2 por token
|
||||
*/
|
||||
app.post('/api/auth/discord/callback', async (req, res) => {
|
||||
const { code } = req.body;
|
||||
|
||||
if (!code) {
|
||||
return res.status(400).json({ error: 'Code is required' });
|
||||
}
|
||||
|
||||
try {
|
||||
// 1. Intercambiar código por access token
|
||||
const tokenResponse = await axios.post(
|
||||
'https://discord.com/api/oauth2/token',
|
||||
new URLSearchParams({
|
||||
client_id: DISCORD_CLIENT_ID,
|
||||
client_secret: DISCORD_CLIENT_SECRET,
|
||||
grant_type: 'authorization_code',
|
||||
code: code,
|
||||
redirect_uri: REDIRECT_URI,
|
||||
}),
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const { access_token, refresh_token, expires_in } = tokenResponse.data;
|
||||
|
||||
// 2. Obtener información del usuario
|
||||
const userResponse = await axios.get('https://discord.com/api/users/@me', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${access_token}`,
|
||||
},
|
||||
});
|
||||
|
||||
const discordUser = userResponse.data;
|
||||
|
||||
// 3. Obtener guilds del usuario (servidores)
|
||||
const guildsResponse = await axios.get('https://discord.com/api/users/@me/guilds', {
|
||||
headers: {
|
||||
Authorization: `Bearer ${access_token}`,
|
||||
},
|
||||
});
|
||||
|
||||
const guilds = guildsResponse.data;
|
||||
|
||||
// 4. Crear JWT token para tu aplicación
|
||||
const user = {
|
||||
id: discordUser.id,
|
||||
username: discordUser.username,
|
||||
discriminator: discordUser.discriminator,
|
||||
avatar: discordUser.avatar,
|
||||
email: discordUser.email,
|
||||
guilds: guilds.map(g => ({
|
||||
id: g.id,
|
||||
name: g.name,
|
||||
icon: g.icon,
|
||||
owner: g.owner,
|
||||
permissions: g.permissions
|
||||
}))
|
||||
};
|
||||
|
||||
const token = jwt.sign(
|
||||
{ userId: discordUser.id },
|
||||
JWT_SECRET,
|
||||
{ expiresIn: '7d' }
|
||||
);
|
||||
|
||||
// 5. Aquí puedes guardar el usuario en tu base de datos
|
||||
// await saveUserToDatabase(user);
|
||||
|
||||
res.json({
|
||||
token,
|
||||
user,
|
||||
discord: {
|
||||
access_token,
|
||||
refresh_token,
|
||||
expires_in
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Authentication error:', error.response?.data || error.message);
|
||||
res.status(500).json({
|
||||
error: 'Authentication failed',
|
||||
details: error.response?.data?.error_description || error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Endpoint para obtener usuario actual (protegido)
|
||||
*/
|
||||
app.get('/api/auth/me', authenticateToken, async (req, res) => {
|
||||
try {
|
||||
// Aquí puedes obtener el usuario de tu base de datos
|
||||
// const user = await getUserFromDatabase(req.userId);
|
||||
|
||||
res.json({
|
||||
id: req.userId,
|
||||
// ...otros datos del usuario
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ error: 'Failed to fetch user' });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Endpoint para refrescar el token de Discord
|
||||
*/
|
||||
app.post('/api/auth/refresh', async (req, res) => {
|
||||
const { refresh_token } = req.body;
|
||||
|
||||
if (!refresh_token) {
|
||||
return res.status(400).json({ error: 'Refresh token is required' });
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(
|
||||
'https://discord.com/api/oauth2/token',
|
||||
new URLSearchParams({
|
||||
client_id: DISCORD_CLIENT_ID,
|
||||
client_secret: DISCORD_CLIENT_SECRET,
|
||||
grant_type: 'refresh_token',
|
||||
refresh_token: refresh_token,
|
||||
}),
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
res.json(response.data);
|
||||
} catch (error) {
|
||||
console.error('Token refresh error:', error.response?.data || error.message);
|
||||
res.status(500).json({ error: 'Failed to refresh token' });
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Middleware para autenticar requests con JWT
|
||||
*/
|
||||
function authenticateToken(req, res, next) {
|
||||
const authHeader = req.headers['authorization'];
|
||||
const token = authHeader && authHeader.split(' ')[1];
|
||||
|
||||
if (!token) {
|
||||
return res.status(401).json({ error: 'Access token required' });
|
||||
}
|
||||
|
||||
jwt.verify(token, JWT_SECRET, (err, decoded) => {
|
||||
if (err) {
|
||||
return res.status(403).json({ error: 'Invalid or expired token' });
|
||||
}
|
||||
req.userId = decoded.userId;
|
||||
next();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Health check endpoint
|
||||
*/
|
||||
app.get('/api/health', (req, res) => {
|
||||
res.json({ status: 'ok', timestamp: new Date().toISOString() });
|
||||
});
|
||||
|
||||
/**
|
||||
* Endpoint para obtener estadísticas del bot
|
||||
* Conecta con tu cliente de Discord para obtener datos reales
|
||||
*/
|
||||
app.get('/api/bot/stats', async (req, res) => {
|
||||
try {
|
||||
// AQUÍ debes conectar con tu bot de Discord
|
||||
// Ejemplo usando discord.js client:
|
||||
// const client = getDiscordClient(); // Tu función para obtener el cliente
|
||||
|
||||
// Por ahora retornamos valores de ejemplo
|
||||
// Reemplaza esto con los valores reales de tu bot
|
||||
const stats = {
|
||||
servers: 1234, // client.guilds.cache.size
|
||||
users: 50000, // client.guilds.cache.reduce((a, g) => a + g.memberCount, 0)
|
||||
commands: 150 // número de comandos registrados
|
||||
};
|
||||
|
||||
res.json(stats);
|
||||
} catch (error) {
|
||||
console.error('Error fetching bot stats:', error);
|
||||
res.status(500).json({ error: 'Failed to fetch bot stats' });
|
||||
}
|
||||
});
|
||||
|
||||
// Iniciar servidor
|
||||
app.listen(PORT, () => {
|
||||
console.log(`🚀 Auth server running on port ${PORT}`);
|
||||
console.log(`Environment: ${process.env.NODE_ENV || 'development'}`);
|
||||
console.log(`Redirect URI: ${REDIRECT_URI}`);
|
||||
});
|
||||
|
||||
export default app;
|
||||
@@ -45,5 +45,8 @@ body {
|
||||
#app {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
@@ -189,10 +189,14 @@ const inviteBot = () => {
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typewriter {
|
||||
display: inline-block;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
@@ -284,8 +288,8 @@ const inviteBot = () => {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 40px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
@@ -297,11 +301,12 @@ const inviteBot = () => {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
min-width: 160px;
|
||||
min-width: 180px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.floating-card:hover {
|
||||
@@ -311,20 +316,20 @@ const inviteBot = () => {
|
||||
}
|
||||
|
||||
.card-1 {
|
||||
top: 60px;
|
||||
right: 20px;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.card-2 {
|
||||
top: 200px;
|
||||
right: 160px;
|
||||
top: 180px;
|
||||
right: 140px;
|
||||
animation: float 6s ease-in-out infinite 2s;
|
||||
}
|
||||
|
||||
.card-3 {
|
||||
bottom: 80px;
|
||||
right: 60px;
|
||||
bottom: 60px;
|
||||
right: 40px;
|
||||
animation: float 6s ease-in-out infinite 4s;
|
||||
}
|
||||
|
||||
@@ -362,28 +367,29 @@ const inviteBot = () => {
|
||||
|
||||
.hero-visual {
|
||||
height: 400px;
|
||||
padding-right: 20px;
|
||||
padding-right: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
padding: 20px;
|
||||
min-width: 140px;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.card-1 {
|
||||
top: 60px;
|
||||
right: 120px;
|
||||
top: 40px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.card-2 {
|
||||
top: 180px;
|
||||
right: 20px;
|
||||
right: 120px;
|
||||
}
|
||||
|
||||
.card-3 {
|
||||
bottom: 80px;
|
||||
right: 140px;
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
@@ -418,27 +424,28 @@ const inviteBot = () => {
|
||||
|
||||
.hero-visual {
|
||||
height: 300px;
|
||||
padding-right: 10px;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
padding: 16px;
|
||||
min-width: 120px;
|
||||
min-width: 110px;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
.card-1 {
|
||||
top: 40px;
|
||||
right: 80px;
|
||||
top: 20px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.card-2 {
|
||||
top: 140px;
|
||||
right: 10px;
|
||||
top: 130px;
|
||||
right: 80px;
|
||||
}
|
||||
|
||||
.card-3 {
|
||||
bottom: 60px;
|
||||
right: 100px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
@@ -446,7 +453,7 @@ const inviteBot = () => {
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
|
||||
Reference in New Issue
Block a user