0Pricing
React Academy · Lección

Desplegar en Vercel: configuración cero y URL de preview

Conecte un repositorio de GitHub a Vercel, configure las variables de entorno y utilice despliegues de preview.

Desplegar en Vercel: configuración cero y URL de preview es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

¿Por qué Vercel?

Vercel es la plataforma creada por el equipo de Next.js. Ofrece despliegues sin configuración: conecte un repositorio de GitHub y Vercel detectará automáticamente el framework, lo compilará y lo desplegará con cada push.

Conexión de un repositorio

Importe un repositorio de GitHub, GitLab o Bitbucket desde el panel de Vercel. Vercel detecta el framework (Next.js, Vite, CRA) y configura automáticamente los ajustes de compilación.

Configuración del proyecto

Vercel detecta automáticamente el framework, el comando de compilación (npm run build), el directorio de salida (.next, dist) y el comando de instalación (npm install). Si es necesario, puede sobrescribir estos valores en la configuración del proyecto.

Variables de entorno

Añada variables de entorno en el panel de Vercel, en Configuración del proyecto → Variables de entorno. Establezca valores diferentes para los entornos de producción, preview y desarrollo.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Despliegues de preview

Cada push de una rama de git y cada solicitud de cambios obtiene una URL de preview única (por ejemplo, myapp-git-feature-xyz.vercel.app). Compártala para su revisión antes de fusionar los cambios; no necesita un entorno de staging manual.

Dominios personalizados

Añada un dominio personalizado en el panel de Vercel. Apunte su DNS (un registro A o CNAME) a las direcciones IP de Vercel y Vercel gestionará automáticamente la provisión del certificado SSL.

Configuración de vercel.json

Perfeccione el comportamiento del despliegue: redirecciones, encabezados, reescrituras y selección de región.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

CLI de Vercel

Use la CLI de Vercel para desplegar desde la terminal, descargar localmente las variables de entorno y gestionar proyectos.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

Funciones serverless

Los archivos de api/ (Pages Router) o app/api/*/route.ts (App Router) se despliegan automáticamente como funciones serverless en el runtime edge o de Node.js de Vercel.

Hooks de despliegue

Cree hooks de despliegue (URL de webhook) para activar despliegues desde servicios externos; resulta útil para los cambios de contenido de un CMS que deban volver a desplegar el sitio.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

Despliegue de un monorepo

En un monorepo de Nx o Turborepo, establezca el directorio raíz de Vercel en la carpeta de la aplicación específica y configure el comando de compilación para que use el ejecutor de tareas del monorepo.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

Comprobación rápida

¿Qué es un despliegue de preview de Vercel?

Repaso

Conecte un repositorio de Git a Vercel para realizar despliegues sin configuración. Cada rama obtiene una URL de preview. Gestione las variables de entorno por entorno desde el panel, use vercel.json para las redirecciones y los encabezados, y la CLI de Vercel para realizar despliegues desde la terminal y descargar variables de entorno.

Preguntas frecuentes

¿La lección «Desplegar en Vercel: configuración cero y URL de preview» es gratis?

Sí — el texto completo de «Desplegar en Vercel: configuración cero y URL de preview» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Desplegar en Vercel: configuración cero y URL de preview»?

Conecte un repositorio de GitHub a Vercel, configure las variables de entorno y utilice despliegues de preview. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Desplegar en Vercel: configuración cero y URL de preview»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Desplegar en Vercel: configuración cero y URL de preview
  2. Alojar una SPA de React en AWS S3 y CloudFront
  3. Contenerizar una aplicación React/Next.js
  4. CI/CD de GitHub Actions para React
← Volver a React Academy