Frontend Academy · Lección

Implementación en Vercel, Netlify y Cloudflare Pages

Conecte su repositorio a cada plataforma, configure los comandos de compilación y los directorios de salida y comprenda las implementaciones de preview para ramas.

Implementación en Vercel, Netlify y Cloudflare Pages es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

El trío moderno de plataformas de frontend

Vercel, Netlify y Cloudflare Pages son las principales plataformas para desplegar aplicaciones de frontend. Todas ofrecen: despliegues basados en Git, ramas de vista previa, dominios personalizados, CDN edge y funciones serverless. Elija una y manténgala.

Vercel — Diseñado para Next.js

Creado por el equipo de Next.js. Integración de primera categoría con Next.js: optimización de imágenes sin configuración, ISR, Edge Functions y Speed Insights. También admite Vite, Nuxt, Astro y la mayoría de los frameworks estáticos.

Despliegue en Vercel

Conecte un repositorio de GitHub, GitLab o Bitbucket. Vercel detecta automáticamente el framework, ejecuta build y realiza el despliegue.

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

Configuración de vercel.json

Modifique los valores predeterminados (comandos de compilación, redirecciones, encabezados y reescrituras).

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — El original

Fue pionero en los despliegues estáticos modernos. Ofrece una sólida gestión de formularios, identidad y analíticas. Netlify Functions y Edge Functions para serverless. Excelente compatibilidad con Vite, Hugo y Eleventy.

Despliegue en Netlify

Conecte un repositorio o arrastre y suelte una carpeta compilada. Configure el proyecto mediante el dashboard o netlify.toml.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

Netlify CLI

Desarrollo local con funciones serverless.

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

Realiza despliegues en la red edge global de Cloudflare. Pages Functions ofrece serverless sobre el runtime de Workers. Su nivel gratuito es generoso. Es excelente para Astro, Hono y Remix.

Despliegue en Cloudflare Pages

Conecte un repositorio mediante el dashboard de Cloudflare. También puede usar la CLI de wrangler.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

wrangler.toml para Pages

Cloudflare Pages utiliza wrangler.toml para configurar Workers y Functions.

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

Despliegues de vista previa

Las tres plataformas crean una URL única para cada rama de PR. Los revisores pueden hacer clic en ella y probar los cambios de forma aislada. Actualmente es el workflow estándar de los equipos.

Variables de entorno

Las tres ofrecen variables por entorno (producción, vista previa y desarrollo) mediante el dashboard o la CLI. Las variables del frontend deben llevar un prefijo (Vite: VITE_, Next: NEXT_PUBLIC_) para enviarse al navegador.

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

Dominios personalizados y SSL

Las tres gestionan automáticamente los certificados SSL (Let's Encrypt). Apunte su registro DNS A/CNAME a su destino; ellas emitirán y renovarán los certificados. Los dominios personalizados son gratuitos en todos los planes de pago.

Cómo elegir entre las tres

Vercel: la mejor para Next.js, con una DX pulida y un precio ligeramente más alto. Netlify: la mejor para formularios e identidad, con un ecosistema de plugins maduro. Cloudflare Pages: el mejor rendimiento edge, el coste más bajo a escala y una excelente integración con Workers. Las tres son excelentes.

Comprobación rápida

¿Cuál es la forma estándar de crear una URL de vista previa desplegable para un pull request en Vercel, Netlify o Cloudflare Pages?

Repaso: alojamiento de frontend

Vercel: la mejor integración con Next.js. Netlify: formularios, identidad y plugins. Cloudflare Pages: rendimiento edge y el coste más bajo. Las tres ofrecen despliegues automáticos basados en Git, URLs de vista previa por PR, variables de entorno por entorno, SSL automático y dominios personalizados. Se configuran mediante el dashboard o el archivo de configuración de cada plataforma (vercel.json, netlify.toml y wrangler.toml).

Preguntas frecuentes

¿La lección «Implementación en Vercel, Netlify y Cloudflare Pages» es gratis?

Sí — el texto completo de «Implementación en Vercel, Netlify y Cloudflare Pages» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Implementación en Vercel, Netlify y Cloudflare Pages»?

Conecte su repositorio a cada plataforma, configure los comandos de compilación y los directorios de salida y comprenda las implementaciones de preview para ramas. Practicas Frontend 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 Frontend Academy?

No se requiere experiencia previa. Frontend 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 2 de 4.

¿Cuánto tiempo toma la lección «Implementación en Vercel, Netlify y Cloudflare Pages»?

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 Frontend Academy?

Sí. Cada lección de Frontend 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

GitHub Actions para frontend: lint, test y build
Implementación en Vercel, Netlify y Cloudflare Pages
Variables de entorno en CI
Comprobaciones automatizadas con Lighthouse

← Volver a Frontend Academy