86c17728c4
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
275 lines
6.5 KiB
Markdown
275 lines
6.5 KiB
Markdown
# 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
|
|
```
|