- Organizar 48 imágenes en public/assets/infografias/ por bloques - Adaptar MarkdownViewer para procesar rutas de imágenes automáticamente - Actualizar Service Worker para cachear imágenes (offline-first) - Configurar Vite para incluir imágenes en build - Crear documentación: guías de integración, sugerencias de medios, estado de imágenes - Scripts de organización automática de imágenes Cambios técnicos: - MarkdownViewer normaliza rutas de imágenes (relativas → absolutas) - Service Worker cachea /assets/infografias/ automáticamente - Vite config actualizado para mantener estructura de carpetas - 48 imágenes organizadas: bloque-0 (9), bloque-2 (27), bloque-3 (9), bloque-7 (1), bloque-12 (2) Documentación: - GUIA_INTEGRAR_IMAGENES_PWA.md - GUIA_RUTAS_IMAGENES_MARKDOWN.md - SUGERENCIAS_MEDIOS_VISUALES.md - IMAGENES_NECESARIAS.md - ESTADO_FINAL_IMAGENES_PWA.md - RESUMEN_ORGANIZACION_IMAGENES.md
4.5 KiB
4.5 KiB
🚀 Guía de Deployment - EMERGES TES
Esta guía explica cómo desplegar EMERGES TES en un servidor propio (VPS Ubuntu).
📋 Requisitos del Servidor
- OS: Ubuntu 20.04+ o similar
- RAM: Mínimo 512MB (recomendado 1GB+)
- CPU: 1 core mínimo
- Espacio: 2GB+ para aplicación y dependencias
- Node.js: v18+ (solo para build, no necesario en producción)
- Nginx: Para servir archivos estáticos
🔧 Instalación Inicial
1. Instalar Node.js (para build)
# Usar nvm (recomendado)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 18
nvm use 18
# O instalar directamente
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
2. Instalar Nginx
sudo apt update
sudo apt install -y nginx
sudo systemctl enable nginx
sudo systemctl start nginx
3. Clonar y preparar proyecto
# Crear directorio
sudo mkdir -p /var/www/emerges-tes
sudo chown $USER:$USER /var/www/emerges-tes
# Clonar repositorio (o subir archivos)
cd /var/www/emerges-tes
git clone <tu-repo> .
# Instalar dependencias
npm ci
🏗️ Build de Producción
# Build estático
npm run build
# Verificar que se creó el directorio dist/
ls -la dist/
El directorio dist/ contiene todos los archivos estáticos listos para servir.
⚙️ Configuración Nginx
1. Crear configuración
sudo nano /etc/nginx/sites-available/emerges-tes
Copiar contenido de nginx.conf.example y ajustar:
server_name: tu dominioroot: ruta a/var/www/emerges-tes/dist
2. Activar sitio
sudo ln -s /etc/nginx/sites-available/emerges-tes /etc/nginx/sites-enabled/
sudo nginx -t # Verificar configuración
sudo systemctl reload nginx
3. Verificar permisos
sudo chown -R www-data:www-data /var/www/emerges-tes/dist
sudo chmod -R 755 /var/www/emerges-tes/dist
🔒 SSL con Let's Encrypt (Opcional pero Recomendado)
# Instalar Certbot
sudo apt install -y certbot python3-certbot-nginx
# Obtener certificado
sudo certbot --nginx -d emergestes.com -d www.emergestes.com
# Renovación automática (ya configurado)
sudo certbot renew --dry-run
🔄 Deploy Automático
Opción 1: Script de deploy
# Hacer ejecutable
chmod +x deploy.sh
# Ejecutar deploy
./deploy.sh
Opción 2: Deploy manual
# 1. Actualizar código
git pull origin main
# 2. Instalar dependencias (si hay cambios)
npm ci
# 3. Build
npm run build
# 4. Verificar
ls -la dist/
# 5. Nginx se sirve automáticamente desde dist/
# Si necesitas forzar recarga:
sudo systemctl reload nginx
📊 Monitoreo (Opcional)
PM2 (solo si necesitas servidor Node.js)
# Instalar PM2
npm install -g pm2
# Usar solo para preview/desarrollo
pm2 start ecosystem.config.js
pm2 save
pm2 startup # Configurar inicio automático
Nota: Para producción, Nginx sirviendo archivos estáticos es más eficiente que PM2.
🔍 Verificación Post-Deploy
-
Verificar que la app carga:
curl http://localhost -
Verificar rutas SPA:
- Visitar
/herramientas,/farmacos, etc. - Todas deben funcionar sin 404
- Visitar
-
Verificar Service Worker:
- Abrir DevTools > Application > Service Workers
- Debe estar registrado
-
Verificar PWA:
- Debe poder instalarse en móvil
- Debe funcionar offline
🐛 Troubleshooting
Error 502 Bad Gateway
- Verificar que Nginx está corriendo:
sudo systemctl status nginx - Verificar logs:
sudo tail -f /var/log/nginx/error.log
Rutas 404 en SPA
- Verificar que
try_filesen nginx incluye/index.html - Verificar que
baseenvite.config.tses correcto
Service Worker no funciona
- Verificar que
sw.jsestá endist/ - Verificar headers de cache en nginx
Build falla
- Verificar Node.js versión:
node --version(debe ser 18+) - Limpiar cache:
rm -rf node_modules dist && npm ci && npm run build
📝 Notas Importantes
- No necesitas Node.js corriendo en producción - Nginx sirve archivos estáticos
- El build se hace en el servidor - No subir
node_modulesnidist/al repo - Actualizaciones: Solo hacer
git pull+npm run build+ recargar Nginx - Backup: Considerar hacer backup de
dist/antes de cada deploy