1 line
No EOL
14 KiB
Markdown
1 line
No EOL
14 KiB
Markdown
# Deployment Walkthrough - Poster Provisioning\n\nGuía completa paso a paso para hacer deployment del poster optimizado a producción.\n\n## 🎯 Objetivos del Deployment\n\nAl completar este walkthrough tendrás:\n\n- ✅ **Build de producción** optimizado y validado\n- ✅ **Servidor configurado** con compresión y cache\n- ✅ **SSL/HTTPS** activo para seguridad\n- ✅ **CDN** opcional para performance global\n- ✅ **Monitoring** básico configurado\n- ✅ **Rollback plan** en caso de problemas\n\n**Tiempo estimado:** 30-45 minutos\n\n---\n\n## 📋 Pre-requisitos\n\n### Recursos Necesarios\n\n- [ ] **Servidor web** (VPS, shared hosting, cloud)\n- [ ] **Dominio** registrado y configurado\n- [ ] **SSH acceso** al servidor\n- [ ] **Certificado SSL** (gratuito con Let's Encrypt)\n\n### Herramientas Locales\n\n- [ ] **Nushell** 0.105.2+ instalado\n- [ ] **Build system** funcionando\n- [ ] **SSH client** configurado\n- [ ] **rsync** instalado (para deployment)\n\n### Información del Servidor\n\n```bash\n# Anota esta información:\nDEPLOY_HOST="tu-dominio.com"\nDEPLOY_PATH="/var/www/provisioning-poster"\nDEPLOY_USER="deploy" # o tu usuario SSH\nSSH_PORT="22" # puerto SSH (por defecto 22)\n```\n\n---\n\n## 🚀 Fase 1: Preparación del Build (10 minutos)\n\n### Paso 1.1: Build de Producción Final\n\n```bash\n# Limpiar build anterior\nnu scripts/dev.nu clean\n\n# Build completo con análisis\nnu scripts/prod.nu full\n\n# Verificar que build fue exitoso\nls -la dist/\n```\n\n**Verificar que se generaron estos archivos:**\n\n```plaintext\ndist/\n├── index.html ✅ HTML optimizado\n├── assets/\n│ ├── css/\n│ │ ├── main.min.css ✅ CSS minificado\n│ │ └── main.min.css.gz ✅ CSS comprimido\n│ └── svg/\n│ └── sprites.svg ✅ SVG optimizado\n├── .htaccess ✅ Configuración Apache\n├── nginx.conf ✅ Configuración Nginx\n├── deploy.sh ✅ Script de deployment\n└── robots.txt ✅ SEO robots\n```\n\n### Paso 1.2: Validación Local\n\n```bash\n# Test local del build de producción\nnu scripts/dev.nu preview --port 8080\n\n# Abrir http://localhost:8080 y verificar:\n# ✅ Poster se ve correctamente\n# ✅ Animaciones funcionan\n# ✅ Layout responsive\n# ✅ Carga rápida\n```\n\n### Paso 1.3: Análisis de Performance Final\n\n```bash\n# Métricas finales\nnu scripts/prod.nu --analyze\n\n# Deberías ver:\n# Performance Score: A o A+\n# Total size: ~70KB\n# Gzipped: ~18KB\n```\n\n### Paso 1.4: Backup de Seguridad\n\n```bash\n# Crear backup del build\ntar -czf poster-production-$(date +%Y%m%d-%H%M).tar.gz dist/\n\n# Verificar backup\nls -lh poster-production-*.tar.gz\n```\n\n---\n\n## 🔧 Fase 2: Configuración del Servidor (15 minutos)\n\n### Paso 2.1: Conectar al Servidor\n\n```bash\n# Test de conexión SSH\nssh $DEPLOY_USER@$DEPLOY_HOST\n\n# Si es primera conexión, añadir SSH key\nssh-keygen -t rsa -b 4096 -C "deployment-key"\nssh-copy-id $DEPLOY_USER@$DEPLOY_HOST\n```\n\n### Paso 2.2: Preparar Directorio en Servidor\n\n```bash\n# En el servidor, crear estructura\nssh $DEPLOY_USER@$DEPLOY_HOST << 'EOF'\n# Crear directorio web\nsudo mkdir -p /var/www/provisioning-poster\n\n# Configurar permisos\nsudo chown -R $USER:www-data /var/www/provisioning-poster\nsudo chmod -R 755 /var/www/provisioning-poster\n\n# Crear backup directory\nsudo mkdir -p /var/www/backups/provisioning-poster\nsudo chown -R $USER:www-data /var/www/backups/provisioning-poster\n\n# Verificar directorios\nls -la /var/www/\nEOF\n```\n\n### Paso 2.3: Configurar Servidor Web\n\n#### Para Apache\n\n```bash\n# Copiar configuración Apache\nscp dist/.htaccess $DEPLOY_USER@$DEPLOY_HOST:/var/www/provisioning-poster/\n\n# Configurar Virtual Host\nssh $DEPLOY_USER@$DEPLOY_HOST << 'EOF'\nsudo tee /etc/apache2/sites-available/provisioning-poster.conf > /dev/null << 'VHOST'\n<VirtualHost *:80>\n ServerName tu-dominio.com\n DocumentRoot /var/www/provisioning-poster\n\n # Logs\n ErrorLog ${APACHE_LOG_DIR}/provisioning-poster_error.log\n CustomLog ${APACHE_LOG_DIR}/provisioning-poster_access.log combined\n\n # Configuración optimizada\n <Directory /var/www/provisioning-poster>\n AllowOverride All\n Require all granted\n\n # Security headers\n Header always set X-Content-Type-Options nosniff\n Header always set X-Frame-Options DENY\n Header always set X-XSS-Protection "1; mode=block"\n </Directory>\n</VirtualHost>\nVHOST\n\n# Habilitar sitio\nsudo a2ensite provisioning-poster\nsudo a2enmod headers rewrite deflate expires\nsudo systemctl restart apache2\nEOF\n```\n\n#### Para Nginx\n\n```bash\n# Copiar configuración Nginx\nscp dist/nginx.conf $DEPLOY_USER@$DEPLOY_HOST:/tmp/\n\n# Configurar server block\nssh $DEPLOY_USER@$DEPLOY_HOST << 'EOF'\nsudo tee /etc/nginx/sites-available/provisioning-poster > /dev/null << 'NGINX'\nserver {\n listen 80;\n server_name tu-dominio.com;\n root /var/www/provisioning-poster;\n index index.html;\n\n # Logs\n access_log /var/log/nginx/provisioning-poster_access.log;\n error_log /var/log/nginx/provisioning-poster_error.log;\n\n # Include optimizations from build system\n include /tmp/nginx.conf;\n\n # Main location\n location / {\n try_files $uri $uri/ =404;\n }\n}\nNGINX\n\n# Habilitar sitio\nsudo ln -sf /etc/nginx/sites-available/provisioning-poster /etc/nginx/sites-enabled/\nsudo nginx -t\nsudo systemctl restart nginx\nEOF\n```\n\n---\n\n## 🔐 Fase 3: Configuración SSL/HTTPS (10 minutos)\n\n### Paso 3.1: Instalar Certbot (Let's Encrypt)\n\n```bash\nssh $DEPLOY_USER@$DEPLOY_HOST << 'EOF'\n# Ubuntu/Debian\nsudo apt update\nsudo apt install certbot\n\n# Para Apache\nsudo apt install python3-certbot-apache\n\n# Para Nginx\nsudo apt install python3-certbot-nginx\nEOF\n```\n\n### Paso 3.2: Obtener Certificado SSL\n\n```bash\n# Para Apache\nssh $DEPLOY_USER@$DEPLOY_HOST "sudo certbot --apache -d tu-dominio.com"\n\n# Para Nginx\nssh $DEPLOY_USER@$DEPLOY_HOST "sudo certbot --nginx -d tu-dominio.com"\n\n# Verificar certificado\nssh $DEPLOY_USER@$DEPLOY_HOST "sudo certbot certificates"\n```\n\n### Paso 3.3: Configurar Renovación Automática\n\n```bash\nssh $DEPLOY_USER@$DEPLOY_HOST << 'EOF'\n# Test renovación\nsudo certbot renew --dry-run\n\n# Configurar cron para renovación automática\necho "0 12 * * * root certbot renew --quiet" | sudo tee -a /etc/crontab\nEOF\n```\n\n---\n\n## 📦 Fase 4: Deployment Automático (5 minutos)\n\n### Paso 4.1: Configurar Variables de Entorno\n\n```bash\n# Configurar variables localmente\nexport DEPLOY_HOST="tu-dominio.com"\nexport DEPLOY_PATH="/var/www/provisioning-poster"\nexport DEPLOY_USER="deploy"\n\n# Hacer permanente (opcional)\ncat >> ~/.bashrc << EOF\nexport DEPLOY_HOST="tu-dominio.com"\nexport DEPLOY_PATH="/var/www/provisioning-poster"\nexport DEPLOY_USER="deploy"\nEOF\n```\n\n### Paso 4.2: Primer Deployment\n\n```bash\n# Hacer script ejecutable\nchmod +x dist/deploy.sh\n\n# Primer deployment manual\n./dist/deploy.sh\n\n# Verificar que archivos se copiaron\nssh $DEPLOY_USER@$DEPLOY_HOST "ls -la /var/www/provisioning-poster/"\n```\n\n### Paso 4.3: Verificar Deployment\n\n```bash\n# Test básico HTTP\ncurl -I http://tu-dominio.com\n\n# Test HTTPS\ncurl -I https://tu-dominio.com\n\n# Test específico del poster\ncurl -s https://tu-dominio.com | grep -o "<title>.*</title>"\n```\n\n---\n\n## ✅ Fase 5: Validación y Testing (10 minutos)\n\n### Paso 5.1: Checklist de Funcionalidad\n\n```bash\n# Abrir https://tu-dominio.com en navegador\n# Verificar:\n# ✅ Página carga correctamente\n# ✅ SSL certificado válido (candado verde)\n# ✅ Logo animado funciona\n# ✅ Gradientes de texto funcionan\n# ✅ Layout responsive en móvil\n# ✅ Performance buena (DevTools)\n```\n\n### Paso 5.2: Test de Performance Web\n\n```bash\n# Test con curl (basic)\ntime curl -s https://tu-dominio.com > /dev/null\n\n# Test headers de compresión\ncurl -H "Accept-Encoding: gzip" -I https://tu-dominio.com\n\n# Deberías ver:\n# Content-Encoding: gzip\n# Content-Length: ~18000 (18KB comprimido)\n```\n\n### Paso 5.3: Test con Herramientas Online\n\n- **PageSpeed Insights**: <https://pagespeed.web.dev/>\n- **GTmetrix**: <https://gtmetrix.com/>\n- **WebPageTest**: <https://www.webpagetest.org/>\n\n**Métricas objetivo:**\n\n- Performance Score: 90+\n- First Contentful Paint: <1.5s\n- Largest Contentful Paint: <2.5s\n- Total Blocking Time: <300ms\n\n### Paso 5.4: Test de Seguridad\n\n- **SSL Test**: <https://www.ssllabs.com/ssltest/>\n- **Security Headers**: <https://securityheaders.com/>\n\n**Objetivo:** Grado A en ambos tests\n\n---\n\n## 🔄 Fase 6: Automatización y Monitoring (10 minutos)\n\n### Paso 6.1: Script de Deployment Mejorado\n\n```bash\n# Crear script avanzado local\ncat > deploy-advanced.sh << 'EOF'\n#!/bin/bash\nset -e\n\necho "🚀 Deploying Provisioning Poster..."\n\n# Variables\nTIMESTAMP=$(date +%Y%m%d-%H%M%S)\nBACKUP_DIR="/var/www/backups/provisioning-poster"\n\n# Build production\necho "📦 Building production version..."\nnu scripts/prod.nu full\n\n# Backup current version on server\necho "💾 Creating backup..."\nssh $DEPLOY_USER@$DEPLOY_HOST "\n if [ -d $DEPLOY_PATH ]; then\n sudo tar -czf $BACKUP_DIR/backup-$TIMESTAMP.tar.gz -C $DEPLOY_PATH .\n echo 'Backup created: backup-$TIMESTAMP.tar.gz'\n fi\n"\n\n# Deploy new version\necho "📡 Uploading files..."\nrsync -avz --delete \n --exclude="*.map" \n --exclude="build-manifest.json" \n dist/ $DEPLOY_USER@$DEPLOY_HOST:$DEPLOY_PATH/\n\n# Test deployment\necho "✅ Testing deployment..."\nsleep 2\ncurl -f -s https://$DEPLOY_HOST > /dev/null || {\n echo "❌ Deployment test failed!"\n echo "🔄 Rolling back..."\n ssh $DEPLOY_USER@$DEPLOY_HOST "\n cd $DEPLOY_PATH &&\n sudo tar -xzf $BACKUP_DIR/backup-$TIMESTAMP.tar.gz\n "\n exit 1\n}\n\necho "✅ Deployment successful!"\necho "🌐 Site: https://$DEPLOY_HOST"\nEOF\n\nchmod +x deploy-advanced.sh\n```\n\n### Paso 6.2: Monitoring Básico\n\n```bash\n# Script de health check\ncat > health-check.sh << 'EOF'\n#!/bin/bash\n\nSITE="https://tu-dominio.com"\nEXPECTED_SIZE=30000 # ~30KB HTML esperado\n\n# Test HTTP status\nHTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" $SITE)\nif [ "$HTTP_STATUS" != "200" ]; then\n echo "❌ Site down! HTTP status: $HTTP_STATUS"\n exit 1\nfi\n\n# Test content size\nCONTENT_SIZE=$(curl -s $SITE | wc -c)\nif [ "$CONTENT_SIZE" -lt "$EXPECTED_SIZE" ]; then\n echo "⚠️ Content too small: ${CONTENT_SIZE}B (expected >${EXPECTED_SIZE}B)"\n exit 1\nfi\n\n# Test specific content\nif ! curl -s $SITE | grep -q "Provisioning"; then\n echo "❌ Content missing! Provisioning title not found"\n exit 1\nfi\n\necho "✅ Site healthy: HTTP $HTTP_STATUS, ${CONTENT_SIZE}B"\nEOF\n\nchmod +x health-check.sh\n\n# Test health check\n./health-check.sh\n```\n\n### Paso 6.3: Cron Job para Monitoring\n\n```bash\n# Configurar monitoring automático en servidor\nssh $DEPLOY_USER@$DEPLOY_HOST << 'EOF'\n# Crear script de monitoring en servidor\ncat > /home/$USER/site-monitor.sh << 'MONITOR'\n#!/bin/bash\nSITE="https://$(hostname -f)"\nLOG="/var/log/site-monitor.log"\n\nif curl -f -s $SITE > /dev/null; then\n echo "$(date): ✅ Site OK" >> $LOG\nelse\n echo "$(date): ❌ Site DOWN" >> $LOG\n # Opcional: enviar email/notificación\nfi\nMONITOR\n\nchmod +x /home/$USER/site-monitor.sh\n\n# Configurar cron (cada 15 minutos)\n(crontab -l 2>/dev/null; echo "*/15 * * * * /home/$USER/site-monitor.sh") | crontab -\nEOF\n```\n\n---\n\n## 📊 Métricas de Éxito\n\n### Performance Objetivos Alcanzados\n\n- ✅ **Tamaño total**: 70KB (-42% vs original)\n- ✅ **Tamaño gzipped**: ~18KB\n- ✅ **Performance Score**: A/A+\n- ✅ **Load time (3G)**: <2s\n- ✅ **SSL Grade**: A\n- ✅ **Security Headers**: A\n\n### Funcionalidad Validada\n\n- ✅ **Animaciones**: Logo giratorio funciona\n- ✅ **Gradientes**: Texto con efectos\n- ✅ **Responsive**: Mobile/desktop\n- ✅ **HTTPS**: SSL activo\n- ✅ **Compresión**: Gzip habilitado\n- ✅ **Cache**: Headers configurados\n\n### Infraestructura Lista\n\n- ✅ **Auto-deployment**: Script configurado\n- ✅ **Backup system**: Automático\n- ✅ **SSL renewal**: Auto-renovación\n- ✅ **Monitoring**: Health checks\n- ✅ **Rollback**: Plan de contingencia\n\n---\n\n## 🎯 Workflow de Mantenimiento\n\n### Deploy de Cambios\n\n```bash\n# 1. Hacer cambios en src/\n# 2. Test local\nnu scripts/dev.nu --watch\n\n# 3. Build y deploy\n./deploy-advanced.sh\n\n# 4. Verificar\n./health-check.sh\n```\n\n### Rollback de Emergency\n\n```bash\n# Ver backups disponibles\nssh $DEPLOY_USER@$DEPLOY_HOST "ls -la /var/www/backups/provisioning-poster/"\n\n# Rollback al backup más reciente\nssh $DEPLOY_USER@$DEPLOY_HOST "\n cd $DEPLOY_PATH &&\n sudo tar -xzf /var/www/backups/provisioning-poster/backup-TIMESTAMP.tar.gz\n"\n```\n\n### Monitoring Rutinario\n\n```bash\n# Check semanal\n./health-check.sh\n\n# Logs del servidor\nssh $DEPLOY_USER@$DEPLOY_HOST "tail -f /var/log/nginx/provisioning-poster_access.log"\n\n# SSL status\nssh $DEPLOY_USER@$DEPLOY_HOST "sudo certbot certificates"\n```\n\n---\n\n## 🏆 ¡Deployment Completado\n\n🎉 **¡Felicitaciones!** Has completado exitosamente el deployment del poster Provisioning:\n\n### ✅ Lo que has logrado\n\n- **Poster optimizado** funcionando en producción\n- **42% reducción** de tamaño vs versión original\n- **SSL/HTTPS** configurado y auto-renovado\n- **Compresión y cache** habilitados\n- **Monitoring básico** funcionando\n- **Backup automático** configurado\n- **Deployment pipeline** establecido\n\n### 🌟 Performance Final\n\n- **URL**: <https://tu-dominio.com>\n- **Load time**: <2s on 3G\n- **Size**: 70KB (18KB gzipped)\n- **Score**: A+ en performance\n- **Uptime**: Monitoreado cada 15min\n\n### 🔄 Próximos Pasos (Opcional)\n\n1. **CDN**: CloudFlare para distribución global\n2. **Analytics**: Google Analytics o alternativa\n3. **Monitoring avanzado**: Uptime Robot, StatusCake\n4. **CI/CD**: GitHub Actions para auto-deploy\n5. **Performance monitoring**: Core Web Vitals\n\n¡El poster está listo para audiencia global con performance optimizada! 🚀 |