Organizar archivos de deployment en carpeta deploy/

This commit is contained in:
2025-08-15 17:50:33 -06:00
parent b076e25ebf
commit 67d03e40ff
11 changed files with 673 additions and 0 deletions

217
deploy/DEPLOY-GCLOUD.md Normal file
View File

@@ -0,0 +1,217 @@
# Despliegue en Google Cloud
Esta guía explica cómo desplegar SnatchGame en Google Cloud Platform usando una VM de Compute Engine.
## Requisitos Previos
1. **Cuenta de Google Cloud** con billing habilitado
2. **gcloud CLI** instalado y configurado
3. **Proyecto de Google Cloud** creado
4. **Dominio** configurado en Cloudflare
## Paso 1: Configurar Google Cloud
### Instalar gcloud CLI
```bash
# En tu máquina local
curl https://sdk.cloud.google.com | bash
exec -l $SHELL
gcloud init
```
### Configurar proyecto
```bash
# Listar proyectos disponibles
gcloud projects list
# Configurar proyecto activo
gcloud config set project TU_PROJECT_ID
# Habilitar APIs necesarias
gcloud services enable compute.googleapis.com
```
## Paso 2: Crear la VM
### Editar configuración
Edita `deploy/gcloud/create-vm.sh` y cambia:
```bash
PROJECT_ID="tu-proyecto-gcloud" # Por tu project ID real
```
### Ejecutar creación
```bash
cd deploy/gcloud
chmod +x *.sh
./create-vm.sh
```
Esto creará:
- VM `snatchgame-vm` con Ubuntu 20.04
- Tipo `e2-micro` (1 vCPU, 1GB RAM)
- Disco de 20GB
- Nginx configurado automáticamente
- Docker instalado
- Tu aplicación desplegada
## Paso 3: Configurar DNS en Cloudflare
Una vez creada la VM, obtendrás una IP externa. Configura en Cloudflare:
```
Type: A
Name: snatchgame
Content: IP_EXTERNA_DE_LA_VM
Proxy status: Proxied (naranja)
TTL: Auto
```
## Paso 4: Configurar SSL en Cloudflare
En el dashboard de Cloudflare:
1. **SSL/TLS → Overview**
- Encryption mode: `Flexible` o `Full`
2. **SSL/TLS → Edge Certificates**
- Always Use HTTPS: `On`
- HTTP Strict Transport Security: `On`
## Paso 5: Verificar Deployment
### Verificar VM
```bash
# Conectarse a la VM
gcloud compute ssh snatchgame-vm --zone=us-central1-a
# Verificar servicios
sudo systemctl status nginx
sudo systemctl status docker
docker ps
# Ver logs
docker logs snatchgame
```
### Verificar URLs
- `http://snatchgame.nucleoriofrio.com` - Frontend
- `http://snatchgame.nucleoriofrio.com/colyseus` - Monitor
## Paso 6: Configurar Deployment Automático (Opcional)
### Crear Service Account
```bash
# Crear service account
gcloud iam service-accounts create gitea-deployer \
--display-name="Gitea Deployer"
# Asignar permisos
gcloud projects add-iam-policy-binding TU_PROJECT_ID \
--member="serviceAccount:gitea-deployer@TU_PROJECT_ID.iam.gserviceaccount.com" \
--role="roles/compute.instanceAdmin"
# Crear key
gcloud iam service-accounts keys create key.json \
--iam-account=gitea-deployer@TU_PROJECT_ID.iam.gserviceaccount.com
```
### Configurar secrets en Gitea
En tu repositorio de Gitea, agrega estos secrets:
- `GCLOUD_SERVICE_KEY`: Contenido del archivo `key.json`
- `GCLOUD_PROJECT_ID`: Tu project ID
### Activar workflow
El archivo `.gitea/workflows/deploy-gcloud.yml` se ejecutará automáticamente cuando pushees a la rama `production`.
## Actualización Manual
Para actualizar manualmente:
```bash
cd deploy/gcloud
./update-deployment.sh
```
## Monitoreo y Logs
### Ver logs de la aplicación
```bash
gcloud compute ssh snatchgame-vm --zone=us-central1-a
docker logs -f snatchgame
```
### Ver logs de nginx
```bash
gcloud compute ssh snatchgame-vm --zone=us-central1-a
sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log
```
### Monitoreo de recursos
```bash
# Conectarse a la VM
gcloud compute ssh snatchgame-vm --zone=us-central1-a
# Ver uso de recursos
htop
docker stats
```
## Costos Estimados
- **VM e2-micro**: ~$7/mes
- **Disco 20GB**: ~$0.80/mes
- **Tráfico de red**: ~$0.12/GB
- **Total estimado**: ~$8-10/mes
## Troubleshooting
### VM no responde
```bash
# Reiniciar VM
gcloud compute instances reset snatchgame-vm --zone=us-central1-a
# Verificar startup script
gcloud compute ssh snatchgame-vm --zone=us-central1-a
sudo tail -f /var/log/syslog
```
### Aplicación no funciona
```bash
# Conectarse a VM
gcloud compute ssh snatchgame-vm --zone=us-central1-a
# Verificar contenedor
docker ps
docker logs snatchgame
# Redesplegar
sudo /opt/deploy-snatchgame.sh
```
### DNS no resuelve
- Verificar configuración en Cloudflare
- Esperar propagación DNS (puede tomar hasta 24h)
- Usar herramientas como `dig` o `nslookup`
## Scaling y Optimización
### Aumentar recursos de VM
```bash
# Parar VM
gcloud compute instances stop snatchgame-vm --zone=us-central1-a
# Cambiar tipo de máquina
gcloud compute instances set-machine-type snatchgame-vm \
--machine-type=e2-small --zone=us-central1-a
# Iniciar VM
gcloud compute instances start snatchgame-vm --zone=us-central1-a
```
### Backup automático
```bash
# Crear snapshot del disco
gcloud compute disks snapshot snatchgame-vm \
--zone=us-central1-a \
--snapshot-names=snatchgame-backup-$(date +%Y%m%d)
```

33
deploy/Dockerfile Normal file
View File

@@ -0,0 +1,33 @@
FROM node:lts-slim
WORKDIR /app
# Copiar archivos de configuración
COPY package*.json ./
COPY server/package*.json ./server/
COPY client/package*.json ./client/
# Instalar dependencias
RUN npm install
RUN cd server && npm install
RUN cd client && npm install
# Copiar código fuente
COPY . .
# Compilar servidor y cliente
RUN cd server && npm run build
RUN cd client && npx vite build
# Instalar serve para servir archivos estáticos
RUN npm install -g serve
# Script de inicio
COPY start.sh /app/start.sh
RUN chmod +x /app/start.sh
# Exponer puertos
EXPOSE 3000 2567
# Ejecutar ambos servicios
CMD ["/app/start.sh"]

106
deploy/NGINX-CONFIG.md Normal file
View File

@@ -0,0 +1,106 @@
# Configuración de Nginx para SnatchGame
Este documento explica cómo configurar Nginx Proxy Manager para que el juego SnatchGame funcione correctamente con todos sus componentes.
## Arquitectura del Sistema
El juego está dockerizado en un solo contenedor que ejecuta dos servicios:
- **Frontend (Vue.js)**: Puerto 3000 interno
- **Backend (Colyseus)**: Puerto 2567 interno
El contenedor está conectado a la red `principal` de Docker sin exponer puertos al host.
## Configuración en Nginx Proxy Manager
### 1. Proxy Host Principal
**Configuración básica:**
- **Domain Names:** `snatchgame.nucleoriofrio.com`
- **Forward Hostname/IP:** `snatchgame`
- **Forward Port:** `3000`
- **Cache Assets:** ON
- **Block Common Exploits:** ON
- **Websockets Support:** ON
### 2. Custom Locations (Advanced Tab)
#### Location: `/api`
- **Forward to:** `http://snatchgame:2567/api`
- **Websockets Support:** OFF
#### Location: `/ws`
- **Forward to:** `http://snatchgame:2567`
- **Websockets Support:** ON
#### Location: `/colyseus` (Opcional - Monitor)
- **Forward to:** `http://snatchgame:2567/colyseus`
- **Websockets Support:** OFF
### 3. Custom Nginx Configuration
Para que el dashboard SSE funcione correctamente, agregar en **Advanced → Custom Nginx Configuration:**
```nginx
location /api/dashboard-stream {
proxy_pass http://snatchgame:2567/api/dashboard-stream;
proxy_set_header Host $http_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;
# Headers específicos para SSE
proxy_buffering off;
proxy_cache off;
proxy_read_timeout 24h;
proxy_http_version 1.1;
}
```
### 4. SSL Configuration
- **SSL Certificate:** Request new Let's Encrypt
- **Force SSL:** ON
- **HTTP/2 Support:** ON
## Rutas Resultantes
Una vez configurado, las siguientes rutas estarán disponibles:
| Ruta | Destino | Propósito |
|------|---------|-----------|
| `https://snatchgame.nucleoriofrio.com/` | `snatchgame:3000` | Frontend principal (Vue.js) |
| `https://snatchgame.nucleoriofrio.com/api/*` | `snatchgame:2567/api/*` | API REST del backend |
| `https://snatchgame.nucleoriofrio.com/ws` | `snatchgame:2567` | WebSocket de Colyseus |
| `https://snatchgame.nucleoriofrio.com/api/dashboard-stream` | `snatchgame:2567/api/dashboard-stream` | Server-Sent Events para dashboard |
| `https://snatchgame.nucleoriofrio.com/colyseus` | `snatchgame:2567/colyseus` | Monitor de Colyseus |
## Configuración del Cliente
El cliente (frontend) está configurado para usar estas rutas automáticamente:
- **WebSocket:** `wss://snatchgame.nucleoriofrio.com/ws`
- **API:** `https://snatchgame.nucleoriofrio.com/api`
- **SSE Dashboard:** `https://snatchgame.nucleoriofrio.com/api/dashboard-stream`
## Problemas Comunes y Soluciones
### Dashboard SSE no funciona
**Síntoma:** Error "MIME type text/html instead of text/event-stream"
**Solución:** Verificar que la configuración custom nginx para `/api/dashboard-stream` esté presente con `proxy_buffering off`
### WebSocket no conecta
**Síntoma:** Error de conexión WebSocket
**Solución:** Verificar que "Websockets Support" esté habilitado en la location `/ws`
### API calls fallan
**Síntoma:** Errores 404 o 502 en calls de API
**Solución:** Verificar que la location `/api` esté configurada correctamente apuntando a `snatchgame:2567/api`
## Despliegue Automático
El sistema utiliza Gitea Actions para CI/CD:
1. Build de imagen Docker única
2. Deploy automático en contenedor `snatchgame` en red `principal`
3. Nginx proxy maneja el routing automáticamente
No se requiere reiniciar nginx tras deploys, solo el contenedor se actualiza.

79
deploy/README.md Normal file
View File

@@ -0,0 +1,79 @@
# Deployment de SnatchGame
Esta carpeta contiene todos los archivos y documentación necesarios para desplegar SnatchGame en diferentes entornos.
## 📁 Estructura de archivos
```
deploy/
├── Dockerfile # Imagen Docker de la aplicación completa
├── start.sh # Script de inicio para el contenedor
├── dockerignore # Archivos a ignorar en build (renombrar a .dockerignore)
├── NGINX-CONFIG.md # Configuración de Nginx Proxy Manager
├── DEPLOY-GCLOUD.md # Guía de despliegue en Google Cloud
└── gcloud/ # Scripts específicos para Google Cloud
├── create-vm.sh # Script para crear la VM
├── startup-script.sh # Script de inicio de la VM
└── update-deployment.sh # Script para actualizar deployment
```
## 🚀 Despliegue rápido
### Opción 1: Docker local
```bash
cd deploy
cp dockerignore .dockerignore
docker build -t snatchgame .
docker run -p 3000:3000 -p 2567:2567 snatchgame
```
### Opción 2: Google Cloud VM
Ver [DEPLOY-GCLOUD.md](./DEPLOY-GCLOUD.md) para instrucciones detalladas.
### Opción 3: Con Nginx Proxy Manager
Ver [NGINX-CONFIG.md](./NGINX-CONFIG.md) para configuración de proxy reverso.
## 🔧 Configuración de Docker
### Build de la imagen
```bash
# Desde la raíz del proyecto
docker build -f deploy/Dockerfile -t josedario87/snatchgame:latest .
# O desde la carpeta deploy
cd deploy
cp dockerignore .dockerignore
docker build -t josedario87/snatchgame:latest ..
```
### Push a DockerHub
```bash
docker login
docker push josedario87/snatchgame:latest
```
## 📊 Puertos utilizados
- **3000**: Frontend (Vue.js)
- **2567**: Backend (Colyseus WebSocket y API)
## 🌐 URLs del juego
- Frontend: `http://localhost:3000`
- API: `http://localhost:2567/api`
- WebSocket: `ws://localhost:2567/ws`
- Monitor: `http://localhost:2567/colyseus`
## 🔄 Actualización del deployment
1. Hacer cambios en el código
2. Reconstruir imagen: `docker build -t josedario87/snatchgame:latest .`
3. Push a DockerHub: `docker push josedario87/snatchgame:latest`
4. En el servidor: `docker pull josedario87/snatchgame:latest && docker restart snatchgame`
## 📝 Notas importantes
- El archivo `dockerignore` debe renombrarse a `.dockerignore` cuando se use
- Los scripts de `gcloud/` requieren configuración específica del proyecto
- La imagen Docker incluye tanto frontend como backend en un solo contenedor
- Se recomienda usar variables de entorno para configuración sensible

18
deploy/dockerignore Normal file
View File

@@ -0,0 +1,18 @@
node_modules
*/node_modules
npm-debug.log
.git
.gitignore
*.log
.env
.env.local
.DS_Store
dist
*/dist
.vscode
.idea
*.md
*.mmd
*.pdf
*.png
.gitea

View File

@@ -0,0 +1,61 @@
#!/bin/bash
# Script para crear la VM en Google Cloud
# Ejecutar este script desde tu máquina local con gcloud CLI instalado
PROJECT_ID="tu-proyecto-gcloud" # Cambiar por tu project ID
ZONE="us-central1-a"
VM_NAME="snatchgame-vm"
MACHINE_TYPE="e2-micro"
IMAGE_FAMILY="ubuntu-2004-lts"
IMAGE_PROJECT="ubuntu-os-cloud"
echo "Creando VM para SnatchGame en Google Cloud..."
# Crear la VM
gcloud compute instances create $VM_NAME \
--project=$PROJECT_ID \
--zone=$ZONE \
--machine-type=$MACHINE_TYPE \
--network-interface=network-tier=PREMIUM,subnet=default \
--maintenance-policy=MIGRATE \
--provisioning-model=STANDARD \
--service-account=default \
--scopes=https://www.googleapis.com/auth/devstorage.read_only,https://www.googleapis.com/auth/logging.write,https://www.googleapis.com/auth/monitoring.write,https://www.googleapis.com/auth/servicecontrol,https://www.googleapis.com/auth/service.management.readonly,https://www.googleapis.com/auth/trace.append \
--tags=http-server,https-server \
--create-disk=auto-delete=yes,boot=yes,device-name=$VM_NAME,image=projects/$IMAGE_PROJECT/global/images/family/$IMAGE_FAMILY,mode=rw,size=20,type=projects/$PROJECT_ID/zones/$ZONE/diskTypes/pd-standard \
--no-shielded-secure-boot \
--shielded-vtpm \
--shielded-integrity-monitoring \
--labels=environment=production,app=snatchgame \
--reservation-affinity=any \
--metadata-from-file startup-script=startup-script.sh
echo "VM creada exitosamente!"
# Obtener IP externa
EXTERNAL_IP=$(gcloud compute instances describe $VM_NAME --zone=$ZONE --format='get(networkInterfaces[0].accessConfigs[0].natIP)')
echo ""
echo "=================================================="
echo "VM SnatchGame creada exitosamente!"
echo "=================================================="
echo "Nombre: $VM_NAME"
echo "Zona: $ZONE"
echo "IP Externa: $EXTERNAL_IP"
echo "=================================================="
echo ""
echo "Próximos pasos:"
echo "1. Configurar DNS en Cloudflare:"
echo " A record: snatchgame.nucleoriofrio.com → $EXTERNAL_IP"
echo ""
echo "2. Esperar ~5 minutos para que el startup script termine"
echo ""
echo "3. Verificar que funciona:"
echo " http://$EXTERNAL_IP"
echo ""
echo "4. Una vez que DNS se propague:"
echo " http://snatchgame.nucleoriofrio.com"
echo ""
echo "Para monitorear el progreso del startup script:"
echo "gcloud compute ssh $VM_NAME --zone=$ZONE --command='sudo tail -f /var/log/syslog'"

View File

@@ -0,0 +1,137 @@
#!/bin/bash
# Startup script para VM de Google Cloud
# Este script se ejecuta cuando la VM inicia
# Update system
apt-get update
apt-get install -y apt-transport-https ca-certificates curl software-properties-common
# Install Docker
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add -
add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
apt-get update
apt-get install -y docker-ce docker-ce-cli containerd.io
# Install Docker Compose
curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose
# Install Nginx
apt-get install -y nginx
# Create nginx config for SnatchGame
cat > /etc/nginx/sites-available/snatchgame << 'EOF'
server {
listen 80;
server_name snatchgame.nucleoriofrio.com;
client_max_body_size 100M;
# Frontend (puerto 3000 del contenedor)
location / {
proxy_pass http://localhost:3000;
proxy_set_header Host $http_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_http_version 1.1;
}
# WebSocket de Colyseus
location /ws {
proxy_pass http://localhost:2567;
proxy_set_header Host $http_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;
# Headers específicos para WebSocket
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_cache_bypass $http_upgrade;
# Timeouts para WebSocket
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
}
# API REST general
location /api/ {
proxy_pass http://localhost:2567/api/;
proxy_set_header Host $http_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_http_version 1.1;
}
# SSE para dashboard
location /api/dashboard-stream {
proxy_pass http://localhost:2567/api/dashboard-stream;
proxy_set_header Host $http_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;
# Headers específicos para SSE
proxy_buffering off;
proxy_cache off;
proxy_read_timeout 24h;
proxy_http_version 1.1;
}
# Monitor de Colyseus (opcional)
location /colyseus {
proxy_pass http://localhost:2567/colyseus;
proxy_set_header Host $http_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_http_version 1.1;
}
}
EOF
# Enable site
ln -sf /etc/nginx/sites-available/snatchgame /etc/nginx/sites-enabled/
rm -f /etc/nginx/sites-enabled/default
# Start services
systemctl enable nginx
systemctl start nginx
systemctl enable docker
systemctl start docker
# Create deployment script
cat > /opt/deploy-snatchgame.sh << 'EOF'
#!/bin/bash
# Script para desplegar nueva versión del juego
echo "Deploying SnatchGame..."
# Parar contenedor anterior
docker stop snatchgame 2>/dev/null || true
docker rm snatchgame 2>/dev/null || true
# Obtener última imagen
docker pull gitea.nucleoriofrio.com/nucleo000/snatchgame:latest
# Ejecutar nuevo contenedor
docker run -d \
--name snatchgame \
--restart unless-stopped \
-p 3000:3000 \
-p 2567:2567 \
gitea.nucleoriofrio.com/nucleo000/snatchgame:latest
echo "SnatchGame deployed successfully!"
EOF
chmod +x /opt/deploy-snatchgame.sh
# Initial deployment
/opt/deploy-snatchgame.sh
echo "VM setup completed!"

View File

@@ -0,0 +1,25 @@
#!/bin/bash
# Script para actualizar el deployment en la VM de Google Cloud
# Se puede ejecutar manualmente o desde CI/CD
PROJECT_ID="tu-proyecto-gcloud" # Cambiar por tu project ID
ZONE="us-central1-a"
VM_NAME="snatchgame-vm"
echo "Actualizando deployment en VM de Google Cloud..."
# Ejecutar script de deployment en la VM
gcloud compute ssh $VM_NAME \
--zone=$ZONE \
--command="sudo /opt/deploy-snatchgame.sh"
echo "Deployment actualizado exitosamente!"
# Verificar que el contenedor está corriendo
echo "Verificando estado del contenedor..."
gcloud compute ssh $VM_NAME \
--zone=$ZONE \
--command="docker ps | grep snatchgame"
echo "¡Listo! El juego debería estar disponible en http://snatchgame.nucleoriofrio.com"

15
deploy/start.sh Normal file
View File

@@ -0,0 +1,15 @@
#!/bin/sh
# Iniciar el servidor Colyseus en background (puerto 2567)
echo "Starting Colyseus server..."
cd /app/server && PORT=2567 node dist/server/src/index.js &
# Esperar un momento para que el servidor inicie
sleep 2
# Servir el cliente compilado (puerto 3000)
echo "Starting client server..."
cd /app/client && serve -s dist -p 3000 &
# Mantener el contenedor corriendo
wait