Despliega Astro + Convex en Vercel: Configuración de Producción 2026

Ahora que has construido una aplicación de chat en tiempo real con Astro y Convex (Parte 1), es hora de desplegarla. En esta guía te muestro cómo desplegar tu aplicación Astro + Convex en Vercel con deploy keys de producción correctas, despliegues de vista previa aislados y una monitorización adecuada — todo actualizado para Astro 7.2, Convex 1.4x y Node 22.

Esta es la Parte 2 de la serie. Si aún no has construido la aplicación, empieza con la guía de la Parte 1.

¿Por qué desplegar una aplicación Astro + Convex en Vercel?

La versión corta: Vercel sirve el shell estático y Convex Cloud se encarga de todo lo que es tiempo real. Se complementan sin solaparse.

Qué proporciona Vercel

Qué gestiona Convex Cloud

La clave: el navegador se conecta a Convex directamente por WebSocket para los datos en tiempo real. Vercel solo sirve el bundle de HTML/CSS/JS. Por eso esta combinación funciona — cada plataforma hace lo que mejor sabe hacer.

Qué ha cambiado en esta edición de 2026

Si vuelves de la versión de 2025, esto es lo diferente:

• Astro 7.2 — Vite 8 + Rolldown, compilador de .astro basado en Rust, compilaciones un 15–61 % más rápidas. Requiere Node.js >= 22.12.0. Consulta los benchmarks de las compilaciones más rápidas de Astro 7.
• Convex 1.4x — gestión de despliegues desde la CLI (npx convex deployment create/select), deploy keys tipadas (prod:, preview:, dev:), alojamiento en la UE (Irlanda), y Convex ahora es open-source con opción de autoalojamiento.
• @astrojs/vercel v11 — requiere Astro 7+. Las antiguas exportaciones de subruta /serverless y /static se eliminaron en v10 — usa solo la importación por defecto.
• Vercel Marketplace — ahora puedes crear y pagar Convex directamente a través de Vercel.
• Despliegues de vista previa — la configuración del artículo original apuntaba silenciosamente las compilaciones de vista previa a los datos de producción. Esta edición lo corrige con deploy keys separadas.

Requisitos previos

Antes de empezar, asegúrate de tener:

Si empiezas desde cero, el camino más rápido:

npx create-convex@latest -t astro
cd my-app
npm run dev

Esto genera el patrón Astro + React + Tailwind v4 + Convex con la configuración withConvexProvider de la Parte 1.

Paso 1 — Prepara tu despliegue de producción de Convex

Crea un despliegue de producción

La forma más rápida: ejecuta npx convex deploy desde el directorio de tu proyecto:

cd your-project-directory
npx convex deploy

Esto crea un despliegue de producción si no existe, sube tus funciones y tu esquema, y genera una URL de producción.

Para más control, usa los comandos más nuevos de gestión de despliegues (Convex CLI v1.34.0+):

npx convex deployment create          # interactive: pick type, region, reference
npx convex deployment select          # switch which deployment the CLI targets
npx convex deployment usage           # see usage vs limits (v1.43.0+)

Genera una deploy key de Convex

1. Ve al Dashboard de Convex
2. Selecciona tu proyecto y navega a tu despliegue de producción
3. Ve a Deployment Settings → Deploy keys
4. Haz clic en Generate a deploy key (o “Generate Production Deploy Key”)
5. Selecciona el permiso deployment:deploy
6. Copia la clave — la necesitarás para Vercel

La clave tendrá el formato prod:your-deployment|abc123.... Convex usa deploy keys tipadas:

También puedes generar claves desde la CLI:

npx convex deployment token create my-ci-key --save-env

Nota sobre la región de la UE

Convex ahora ofrece EU West (Irlanda, aws-eu-west-1) en todos los planes, incluido el gratuito. Si estás en Europa, esto significa menor latencia para tus usuarios.

Paso 2 — Sube el código a GitHub

Flujo estándar de git, con un añadido: haz commit del directorio convex/_generated/:

git remote add origin [email protected]:youruser/your-repo.git
git branch -M main
git add -A
git commit -m "initial commit with convex generated code"
git push -u origin main

Paso 3 — Despliega en Vercel

Aquí es donde desplegamos tu aplicación Astro + Convex en Vercel. La sobrescritura del comando de compilación es la clave: le dice a Convex que inyecte la URL del despliegue y suba las funciones antes de que Astro compile.

Añade el adaptador de Vercel para Astro

npx astro add vercel

Esto instala @astrojs/vercel v11 y lo añade a tu astro.config.mjs.

Importante: @astrojs/vercel v10+ eliminó las exportaciones de subruta /serverless y /static. Usa la importación por defecto:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel';

export default defineConfig({
  adapter: vercel(),
});

Si más adelante necesitas SSR u opciones avanzadas:

export default defineConfig({
  output: 'server',
  adapter: vercel({
    maxDuration: 30,
    // isr: true,
    // middlewareMode: 'edge',    // replaces old edgeMiddleware: true
    // skewProtection: true,
  }),
});

Configura los ajustes de compilación

1. Ve a vercel.com/new e inicia sesión con GitHub
2. Haz clic en Import junto a tu repositorio — Vercel detecta Astro automáticamente
3. Configura los ajustes de compilación:

Qué hace el comando de compilación: npx convex deploy lee CONVEX_DEPLOY_KEY, inyecta CONVEX_URL en el entorno de compilación, sube tus funciones y tu esquema al despliegue de producción y después ejecuta npm run build. Astro recoge CONVEX_URL en tiempo de compilación (vía astro:env de la Parte 1) y la incorpora en el bundle del cliente.

Configura la variable de entorno CONVEX_DEPLOY_KEY

Haz clic en Environment Variables en los ajustes del proyecto de Vercel y añade:

Despliega

1. Revisa tu comando de compilación y la variable de entorno
2. Haz clic en Deploy
3. Vercel compila el proyecto — esto tarda un par de minutos
4. Tu sitio está en vivo en https://your-project.vercel.app

Verifica que funciona: abre la URL y luego abre la misma URL en una segunda pestaña del navegador. Envía un mensaje en una pestaña — debería aparecer al instante en la otra. Eso confirma que la conexión en tiempo real de Convex funciona contra tu despliegue de producción.

Alternativa con Vercel Marketplace (opcional)

npx convex login --vercel
npm create convex@latest -- --with-vercel-json

Paso 4 — Configura los despliegues de vista previa de Vercel

Esta es la mayor mejora de corrección respecto al artículo de 2025. La configuración original usaba una única deploy key de producción — lo que significaba que el frontend de cada Preview Deployment de Vercel apuntaba al backend de Convex de producción. Las apps de vista previa leían y escribían datos de producción.

Genera una deploy key de Preview separada

1. En el Dashboard de Convex, ve a la página Settings de tu proyecto
2. Haz clic en Generate Preview Deploy Key
3. Copia la clave — tendrá un prefijo preview:

En los ajustes de tu proyecto de Vercel, añade una segunda variable de entorno:

Sí, el mismo nombre de variable con valores distintos limitados a entornos diferentes. Vercel lo gestiona: las compilaciones de Production obtienen la clave de producción y las de Preview obtienen la clave de vista previa.

Siembra datos en los backends de vista previa nuevos

Opcionalmente, siembra datos en los backends de vista previa nuevos con el flag --preview-run:

npx convex deploy --cmd 'npm run build' --preview-run 'seedMessages'

Esto ejecuta la función seedMessages después de desplegar en un nuevo backend de vista previa. Útil para datos de demostración o smoke tests.

También puedes controlar la reutilización de backends de vista previa con --preview-create y --preview-name.

Vida útil de los despliegues de vista previa

Los despliegues de vista previa se eliminan automáticamente tras un período determinado:

Los despliegues de vista previa siguen en beta a septiembre de 2026. Funcionan, pero espera algún que otro detalle sin pulir.

Paso 5 — Añade un dominio personalizado

Configura en Vercel

1. Ve al dashboard de tu proyecto → Settings → Domains
2. Haz clic en Add Domain
3. Introduce tu dominio (p. ej., myapp.example.com)
4. Vercel te da las instrucciones de DNS — añade el registro CNAME en tu proveedor de DNS
5. Los certificados SSL se aprovisionan automáticamente con redirecciones HTTP → HTTPS

La propagación de DNS suele tardar 5–10 minutos. Cuando el estado muestre “Valid” en Vercel, has terminado.

Paso 6 — Monitoriza y analiza tu aplicación en producción

Vercel Web Analytics

El antiguo precio de “20 $/mes” ya no existe. Vercel Web Analytics ahora está disponible en todos los planes con 50.000 eventos/mes incluidos, y después 3 $ por cada 100.000 eventos. Un add-on Plus opcional cuesta 10 $/mes.

Para configurarlo en Astro:

npm i @vercel/analytics

Añade el componente a tu layout:

---
// src/layouts/Base.astro
import Analytics from '@vercel/analytics/astro';
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <Analytics />
  </head>
  <body><slot /></body>
</html>

Luego actívalo en el dashboard de Vercel: Analytics → Enable.

Speed Insights y logs de runtime

• Speed Insights básico es gratis en todos los planes. Plus cuesta 10 $/proyecto/mes para métricas avanzadas.
• Runtime Logs está disponible en planes Pro+ para depurar la ejecución de funciones serverless.

Monitorización de Convex

En el Dashboard de Convex:

• Pestaña Logs — monitoriza la ejecución de funciones en tiempo real
• Health & Insights — métricas de rendimiento y seguimiento de errores
• Usage Analytics — operaciones de base de datos y recuento de llamadas a funciones

Desde la CLI:

npx convex insights          # quick health check (v1.32.0+)
npx convex deployment usage  # usage vs limits

npx convex env set SENDGRID_API_KEY 'your-key'
npx convex env list
npx convex env default set MY_KEY 'value'  # project defaults for new deployments

Verifica el despliegue y resolución de problemas

Verifica tu despliegue

Errores comunes y soluciones

npx convex deploy --cmd-url-env-var-name CUSTOM_CONVEX_URL --cmd 'npm run build'

npx convex dev      # regenerates and watches for changes
npx convex codegen  # one-shot regeneration

Costes y límites

Ambas plataformas tienen niveles gratuitos reales, pero con matices que conviene conocer de antemano.

Precios de Convex

Excedentes en Free/Starter: 2,20 $ por cada 1M adicional de llamadas a funciones, 0,22 $/GB de almacenamiento.

El alojamiento en la UE añade un multiplicador de 1,3x sobre los precios de recursos de pago, y el uso incluido del nivel gratuito no se aplica a los despliegues en la UE. Si te preocupan los costes y estás en Europa, empieza con US East y migra más tarde si la latencia importa.

Precios de Vercel

Vía de escape: autoalojamiento

Convex ahora es open-source (get-convex/convex-backend, ~12,5k estrellas). Puedes autoalojarlo con Docker o un binario precompilado, usando SQLite o Postgres como backend. Esta es la vía de escape si te quedas corto con el nivel gratuito o necesitas control total.

Para la configuración detallada, consulta autoalojar Convex con Docker Compose y los benchmarks de Convex autoalojado frente al nivel gratuito en la nube.

Si también quieres autoalojar el frontend, proveedores como Hetzner ofrecen VPS europeos asequibles. Echa un vistazo a alojar Astro en tu propio VPS y a alternativas autoalojadas a Vercel como Coolify para esa vía.

Los precios de los VPS subieron en general en 2026 — si estás replanteándote una máquina alquilada, mira qué cambió y cuándo gana un mini PC.

Conclusión

Has desplegado tu aplicación Astro + Convex en Vercel con una configuración lista para producción. Esto es lo que tienes:

• Despliegue de producción con deploy keys tipadas correctas limitadas al entorno adecuado
• Despliegues de vista previa aislados de los datos de producción — cada PR obtiene su propio backend de Convex
• Dominio personalizado con SSL automático
• Monitorización mediante Vercel Web Analytics (gratis, 50K eventos/mes) y los logs del Dashboard de Convex
• Costes claros — ambos niveles gratuitos son reales, con rutas de actualización conocidas

El flujo de trabajo de desarrollo sigue siendo simple: desarrolla en local con npm run dev y npx convex dev, haz push a GitHub y Vercel se encarga del resto. Los despliegues de vista previa te dan un entorno de staging por pull request sin infraestructura extra.

Si Vercel no es la opción adecuada, también puedes desplegar tu sitio Astro en Cloudflare o probar a desplegar Astro estático en Bunny.net. La configuración de Convex sigue siendo la misma — solo cambia el alojamiento del frontend.