From 5b88ac68501b0f688e0dfcd08af8cabeb4adc712 Mon Sep 17 00:00:00 2001 From: planetazuzu Date: Sun, 21 Dec 2025 08:36:14 +0100 Subject: [PATCH] =?UTF-8?q?docs:=20a=C3=B1adir=20gu=C3=ADa=20de=20desplieg?= =?UTF-8?q?ue=20en=20Vercel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Explicar por qué no se despliega automáticamente - 3 opciones de configuración (GitHub integration, CLI manual, GitHub Actions) - Troubleshooting común - Checklist de verificación --- VERCEL_DEPLOYMENT.md | 210 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 VERCEL_DEPLOYMENT.md diff --git a/VERCEL_DEPLOYMENT.md b/VERCEL_DEPLOYMENT.md new file mode 100644 index 00000000..12359c44 --- /dev/null +++ b/VERCEL_DEPLOYMENT.md @@ -0,0 +1,210 @@ +# 🚀 Guía de Despliegue en Vercel + +**Fecha:** 2024-12-19 + +--- + +## 🔍 PROBLEMA ACTUAL + +Las actualizaciones no se están desplegando automáticamente en Vercel porque: + +1. **Vercel no está conectado al repositorio de GitHub** (o el webhook no está activo) +2. **No hay despliegue automático configurado** desde GitHub +3. **Falta hacer un despliegue manual** o configurar la integración + +--- + +## ✅ SOLUCIÓN: Configurar Vercel + +### Opción 1: Conectar Vercel con GitHub (Recomendado) + +1. **Ir a [vercel.com](https://vercel.com)** e iniciar sesión + +2. **Importar proyecto:** + - Click en "Add New..." → "Project" + - Conectar con GitHub + - Seleccionar el repositorio: `planetazuzu/guia-tes-digital` + +3. **Configurar el proyecto:** + - **Framework Preset:** Vite + - **Root Directory:** `./` (raíz del proyecto) + - **Build Command:** `npm run build` + - **Output Directory:** `dist` + - **Install Command:** `npm ci` (o `npm install`) + +4. **Variables de entorno (si las hay):** + - Añadir en "Environment Variables" si es necesario + +5. **Deploy:** + - Click en "Deploy" + - Vercel detectará automáticamente los cambios futuros en `main` + +**Resultado:** Cada push a `main` desplegará automáticamente en Vercel. + +--- + +### Opción 2: Despliegue Manual con CLI + +Si prefieres desplegar manualmente: + +```bash +# 1. Instalar Vercel CLI (si no está instalado) +npm install -g vercel + +# 2. Iniciar sesión en Vercel +vercel login + +# 3. Desplegar (primera vez) +vercel + +# 4. Desplegar a producción +vercel --prod +``` + +**Nota:** Esto requiere tener Vercel CLI instalado y estar autenticado. + +--- + +### Opción 3: GitHub Actions (Automático) + +Crear un workflow de GitHub Actions para desplegar automáticamente: + +**Archivo:** `.github/workflows/vercel-deploy.yml` + +```yaml +name: Deploy to Vercel + +on: + push: + branches: + - main + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: '18' + + - name: Install dependencies + run: npm ci + + - name: Build + run: npm run build + + - name: Deploy to Vercel + uses: amondnet/vercel-action@v25 + with: + vercel-token: ${{ secrets.VERCEL_TOKEN }} + vercel-org-id: ${{ secrets.VERCEL_ORG_ID }} + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} + vercel-args: '--prod' +``` + +**Requisitos:** +- Añadir secrets en GitHub: `VERCEL_TOKEN`, `VERCEL_ORG_ID`, `VERCEL_PROJECT_ID` +- Obtener estos valores desde el dashboard de Vercel + +--- + +## 📋 CONFIGURACIÓN ACTUAL + +### `vercel.json` (Ya configurado ✅) + +El archivo `vercel.json` ya está configurado correctamente con: +- **SPA Routing:** Todas las rutas redirigen a `index.html` +- **Cache Headers:** + - `index.html` → no-cache (para actualizaciones) + - Assets estáticos → cache largo (1 año) + +### Build Command + +Vercel debe usar: +```bash +npm run build +``` + +Esto genera la carpeta `dist/` con los archivos estáticos. + +--- + +## 🔧 VERIFICACIÓN + +### 1. Verificar que Vercel está conectado: + +1. Ir a [vercel.com/dashboard](https://vercel.com/dashboard) +2. Ver si el proyecto `guia-tes-digital` aparece +3. Verificar que está conectado a `planetazuzu/guia-tes-digital` + +### 2. Verificar despliegues: + +1. En el dashboard de Vercel, ver la pestaña "Deployments" +2. Debe aparecer un despliegue por cada push a `main` +3. Si no hay despliegues recientes, el webhook no está activo + +### 3. Verificar configuración del proyecto: + +En Vercel Dashboard → Settings → General: +- **Framework Preset:** Vite +- **Build Command:** `npm run build` +- **Output Directory:** `dist` +- **Install Command:** `npm ci` + +--- + +## 🚨 TROUBLESHOOTING + +### Problema: "No se despliega automáticamente" + +**Solución:** +1. Verificar que Vercel está conectado al repositorio +2. Verificar que el webhook de GitHub está activo +3. Hacer un despliegue manual para forzar la actualización + +### Problema: "Build falla en Vercel" + +**Solución:** +1. Verificar logs en Vercel Dashboard +2. Asegurar que `package.json` tiene el script `build` +3. Verificar que Node.js versión es compatible (18+) + +### Problema: "Rutas SPA no funcionan" + +**Solución:** +- El `vercel.json` ya está configurado correctamente +- Si persiste, verificar que el archivo está en la raíz del proyecto + +--- + +## 📝 PRÓXIMOS PASOS + +1. **Conectar Vercel con GitHub** (Opción 1 - Recomendado) + - Es la forma más fácil y automática + - Cada push a `main` desplegará automáticamente + +2. **O hacer despliegue manual** (Opción 2) + - Si prefieres control manual + - Ejecutar `vercel --prod` después de cada push importante + +3. **O configurar GitHub Actions** (Opción 3) + - Para más control y visibilidad + - Requiere configurar secrets + +--- + +## ✅ CHECKLIST + +- [ ] Vercel está conectado al repositorio de GitHub +- [ ] El webhook está activo (verificar en GitHub Settings → Webhooks) +- [ ] La configuración del proyecto en Vercel es correcta +- [ ] El `vercel.json` está en la raíz (✅ ya está) +- [ ] El build funciona localmente (`npm run build`) +- [ ] Se ha hecho al menos un despliegue exitoso + +--- + +**Última actualización:** 2024-12-19