Vercel Hosting y Deployment: La guía definitiva

¿Sigues buscando una solución de hosting moderna para tus proyectos web? Vercel es una de las plataformas de deployment más populares para aplicaciones web contemporáneas y probablemente también te convenza.

En este artículo encontrarás todo lo que necesitas saber sobre Vercel, o al menos eso espero.

Por qué existe este artículo

A lo largo de mi carrera he trabajado con muchos sistemas CMS, tanto usando como creando. Comencé con Contao, Typo3 y Wordpress, pero con el tiempo migré hacia otros frameworks. Actualmente trabajo mucho con Astro y Fast-API, un framework Python.

La verdad es que ya no siento que me falte un backend real, algo que sí necesitaba con Wordpress. Para sitios estáticos, especialmente blogs simples, los frameworks modernos ofrecen todo lo necesario.

¿Qué es Vercel?

Vercel es una plataforma en la nube para sitios web estáticos y funciones serverless. Originalmente conocida como ZEIT, ha evolucionado hasta convertirse en una de las principales plataformas de deployment para desarrollo web moderno. La plataforma es especialmente reconocida por su integración perfecta con Next.js, pero también soporta muchos otros frameworks como Astro, React, Vue, Svelte y más.

Vercel te ofrece:

Deployments automáticos desde repositorios Git
Global Edge Network para máximo rendimiento
Serverless Functions para lógica de backend
Preview Deployments para Pull Requests
Custom Domains y certificados SSL
Analytics y monitoreo de performance

¿Para qué necesitas Vercel?

Necesitas Vercel si:

Quieres alojar sitios web estáticos
Deseas desplegar aplicaciones serverless
Buscas pipelines CI/CD automáticos
Quieres garantizar performance global para tus usuarios
Necesitas Preview Deployments para tus equipos de desarrollo
Quieres usar Edge Functions para minimizar latencia
Prefieres empezar gratuitamente y pagar solo por lo que uses

Vercel es especialmente ideal para:

Desarrolladores frontend que quieren desplegar rápido
Startups que necesitan infraestructura escalable
Equipos ágiles que desplegan frecuentemente
Proyectos open-source que buscan soluciones de hosting estables

¿Dónde se utiliza Vercel?

Vercel es usado por algunas de las empresas más grandes del mundo:

Next.js - El mismo framework React se aloja en Vercel
React - La documentación oficial de React
Tailwind CSS - El popular framework CSS
TypeScript - El sitio web oficial de TypeScript
Vue.js - La documentación de Vue.js
Svelte - El sitio web de Svelte
Stripe - Partes de la documentación de Stripe
Duolingo - La plataforma de aprendizaje de idiomas
TikTok - Partes del sitio web de TikTok

Estas empresas eligen Vercel por su rendimiento, confiabilidad y facilidad de uso para desarrolladores.

Instalar y configurar Vercel

Instalar Vercel CLI

La forma más simple de usar Vercel es a través de la CLI. Instálala con npm:

npm install -g vercel

O con yarn:

yarn global add vercel

Crear una cuenta en Vercel

Ve a vercel.com
Haz clic en “Sign Up”
Regístrate con GitHub, GitLab, Bitbucket o email
Verifica tu dirección de email

Inicializar el proyecto

Navega a tu directorio de proyecto y ejecuta:

vercel login

Esto abrirá un navegador donde puedas iniciar sesión en Vercel. Después:

vercel

La CLI te hará algunas preguntas:

Set up and deploy? → Y
Which scope? → Elige tu cuenta
Link to existing project? → N (para proyectos nuevos)
What’s your project’s name? → Tu nombre de proyecto
In which directory is your code located? → . (o tu directorio de compilación)
Want to override the settings? → N (o Y para configuración personalizada)

Configurar la integración con Git

Para deployments automáticos, conecta tu repositorio Git:

Ve a vercel.com/dashboard
Haz clic en “Add New Project”
Importa tu repositorio de GitHub, GitLab o Bitbucket
Configura los ajustes de compilación
Haz clic en “Deploy”

A partir de ahora, cada push iniciará un nuevo deployment.

Combinar Vercel con otras herramientas

Vercel y Next.js

Next.js y Vercel están hechos el uno para el otro. Vercel fue creado por el equipo de Next.js y ofrece soporte óptimo:

// next.config.js
module.exports = {
  // Optimización automática para Vercel
  target: 'serverless',
  // Image optimization
  images: {
    domains: ['example.com'],
  },
}

Vercel y Astro

IRC-Coding.de actualmente utiliza Astro.

Los proyectos de Astro se despliegan fácilmente en Vercel: Actualmente estoy usando Coolify y Visual Studio Code.

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

export default defineConfig({
  // Adapter de Vercel para Serverless Functions
  adapter: astro({
    output: 'server',
  }),
});

Vercel y Docker

También puedes desplegar contenedores Docker en Vercel:

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

Vercel y bases de datos

Vercel se integra con muchas bases de datos:

PostgreSQL (Neon, Supabase, PlanetScale)
MySQL (PlanetScale)
MongoDB (MongoDB Atlas)
Redis (Upstash, Redis Cloud)
Firebase (Firestore)

Ejemplo práctico: Desplegar un proyecto Astro en Vercel

Veamos un ejemplo concreto: desplegar un blog de Astro en Vercel.

Paso 1: Crear proyecto Astro

npm create astro@latest mein-blog
cd mein-blog
npm install

Paso 2: Probar el proyecto localmente

npm run dev

Abre http://localhost:4321 en tu navegador.

Paso 3: Configurar Vercel

Crea un archivo vercel.json en la raíz del proyecto:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "devCommand": "npm run dev",
  "installCommand": "npm install"
}

Paso 4: Crear repositorio Git

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/dein-username/mein-blog.git
git push -u origin main

Paso 5: Desplegar en Vercel

Ve a vercel.com/dashboard
Haz clic en “Add New Project”
Selecciona tu repositorio de GitHub
Vercel detecta automáticamente Astro y configura todo:
- Framework Preset: Astro
- Build Command: astro build
- Output Directory: dist
Haz clic en “Deploy”

Paso 6: Configurar un dominio personalizado

Ve a los ajustes del proyecto
Haz clic en “Domains”
Añade tu dominio (por ejemplo, mein-blog.de)
Configura los registros DNS:
- A Record: 76.76.21.21
- CNAME: cname.vercel-dns.com

Paso 7: Configurar variables de entorno

Si necesitas variables de entorno:

Ve a Settings → Environment Variables
Añade tus variables:
- API_KEY: Tu clave API
- DATABASE_URL: La URL de tu base de datos
Guarda y redeploya

Paso 8: Aprovechar los Preview Deployments

Vercel crea automáticamente un Preview Deployment para cada Pull Request:

Crea una rama nueva:
```
git checkout -b feature/neuer-artikel
```

Realiza cambios y haz commit:

git add .
git commit -m "Neuer Artikel"
git push origin feature/neuer-artikel

Crea un Pull Request en GitHub
Vercel genera automáticamente un Preview Deployment
Prueba el preview antes de hacer merge

20 Preguntas y respuestas

1. ¿Es Vercel gratuito?

Sí, Vercel ofrece un plan gratuito generoso con deployments estáticos ilimitados, 100 GB de ancho de banda por mes y 100 GB de Edge Cache. Las Serverless Functions tienen limitaciones en el plan gratuito.

2. ¿Cuál es la diferencia entre Vercel y Netlify?

Ambas ofrecen funciones similares, pero Vercel está más optimizado para Next.js, mientras que Netlify se especializa más en Jamstack y Headless CMS. Vercel tiene una red Edge más potente, Netlify ofrece mejores plugins de build.

3. ¿Puedo alojar bases de datos en Vercel?

Vercel no aloja bases de datos directamente, pero se integra perfectamente con muchos proveedores de bases de datos como Neon (PostgreSQL), PlanetScale (MySQL), MongoDB Atlas y Upstash (Redis).

4. ¿Cuánto tiempo tarda un deployment en Vercel?

Típicamente 30-60 segundos para sitios estáticos y 1-2 minutos para aplicaciones con un proceso de build. Vercel utiliza caché para acelerar los deployments.

5. ¿Vercel soporta PHP?

No de forma nativa, pero puedes desplegar PHP mediante Serverless Functions o contenedores Docker en Vercel. Para proyectos PHP puros, otros hostings son más adecuados.

6. ¿Qué son las Edge Functions?

Las Edge Functions son funciones serverless que se ejecutan en el edge de la infraestructura de Vercel. Esto minimiza la latencia, ya que la ejecución del código ocurre más cerca del usuario.

7. ¿Puedo alojar WordPress en Vercel?

Sí, pero no es lo ideal. WordPress requiere PHP y MySQL, lo que es complejo en Vercel. Los hostings especializados en WordPress o WP Engine son mejores opciones.

8. ¿Cuánto cuesta el plan Pro de Vercel?

El plan Pro cuesta $20 por mes por usuario y ofrece ancho de banda ilimitado, soporte prioritario, análiticas avanzadas y más.

9. ¿Vercel soporta WebSockets?

Sí, Vercel admite WebSockets a través de Serverless Functions y Edge Functions, pero con ciertas limitaciones. Para aplicaciones en tiempo real puro, servicios especializados son mejores.

10. ¿Puedo usar dominios propios en Vercel?

Sí, Vercel admite dominios personalizados ilimitados con certificados SSL automáticos (Let’s Encrypt). También puedes usar subdominios y dominios comodín.

11. ¿Qué sucede si supero mi límite de deployments?

En el plan gratuito, los deployments se ralentizan después de 100 por mes. En el plan Pro, los deployments son ilimitados. Puedes actualizar en cualquier momento.

12. ¿Qué tan seguro es Vercel?

Vercel es muy seguro con protección DDoS, certificados SSL automáticos, cumplimiento SOC 2 y auditorías de seguridad periódicas. Tus datos se almacenan y transmiten de forma segura.

13. ¿Puedo usar Vercel sin Git?

Sí, con la Vercel CLI puedes desplegar proyectos directamente sin Git. Sin embargo, se recomienda la integración con Git para deployments automáticos y versionamiento.

14. ¿Cuál es la diferencia entre Static y Serverless en Vercel?

Los sitios Static son archivos HTML/CSS/JS pre-renderizados que se entregan extremadamente rápido. Las Serverless Functions son ejecuciones de código dinámico bajo demanda.

15. ¿Vercel soporta TypeScript?

Sí, Vercel soporta TypeScript nativamente y puede compilar TypeScript automáticamente durante el proceso de build. No se requiere configuración adicional.

16. ¿Cómo puedo monitorear mis deployments?

Vercel ofrece un dashboard con historial de deployments, logs, análiticas y métricas de rendimiento. También puedes usar integraciones con herramientas como Sentry o Datadog.

17. ¿Puedo usar Vercel para E-Commerce?

Sí, Vercel se utiliza frecuentemente para frontends de E-Commerce (por ejemplo, con Shopify, Stripe o Medusa). Pero para la parte backend necesitas una solución separada.

18. ¿Qué es el Vercel Edge Network?

El Vercel Edge Network consta de más de 35 centros de datos en todo el mundo. Tu contenido se entrega automáticamente a la ubicación más cercana para máximo rendimiento.

19. ¿Puedo usar Cron Jobs en Vercel?

Sí, con Vercel Cron Jobs puedes configurar tareas periódicas. Configúralas en el archivo vercel.json o a través del dashboard.

20. ¿Cómo migro de otro hosting a Vercel?

Exporta tu base de código, configura Vercel, establece las variables de entorno, despliega en Vercel y actualiza los registros DNS. Vercel ofrece asistentes de migración para ciertas plataformas.

Alternativa: Coolify como solución self-hosted

Ya leíste sobre Coolify en el artículo, que es una alternativa interesante a Vercel. Coolify es una plataforma PaaS de código abierto que puedes alojar tú mismo.

Coolify vs. Vercel

Coolify (Self-Hosted):

Ventajas: Control total, sin costos mensuales, privacidad de datos, todos tus datos en tu servidor
Desventajas: Requiere administración del servidor, sin red Edge global, más mantenimiento
Ideal para: Desarrolladores con experiencia en servidores, proyectos con requisitos de privacidad estrictos, desarrolladores conscientes del presupuesto

Vercel (Managed Cloud):

Ventajas: Sin mantenimiento de servidor, red Edge global, SSL automático, Preview Deployments, fácil configuración
Desventajas: Costos mensuales con tráfico alto, datos en servidores de Vercel, menos control
Ideal para: Desarrollo rápido, equipos sin experiencia en DevOps, rendimiento global

Visual Studio Code: El editor, no la solución de hosting

Visual Studio Code es un editor de código, no una solución de hosting. Puedes usar VS Code con ambos:

Con Vercel: Instala la extensión de Vercel para deployments directos desde VS Code
Con Coolify: Usa VS Code para desarrollar y despliega mediante Git o CLI a tu servidor Coolify

VS Code es tu espacio de trabajo, la elección del hosting (Vercel vs. Coolify) es una decisión separada.

¿Cuándo deberías elegir cada uno?

Elige Vercel si:

Quieres comenzar rápido sin administrar servidores
El rendimiento global es importante
Necesitas Preview Deployments para equipos
Tu presupuesto permite servicios managed cloud

Elige Coolify si:

Quieres control total sobre tu infraestructura
La privacidad de datos y el cumplimiento son críticos
Puedes administrar servidores o estás dispuesto a aprender
Quieres ahorrar costos a largo plazo

Vercel es una excelente opción para proyectos web modernos. La plataforma te proporciona todo lo que necesitas para deployments rápidos, rendimiento global e infraestructura escalable. Vercel destaca especialmente en combinación con frameworks como Astro, Next.js o React. Si aún no has trabajado con Vercel, pruébalo. El plan gratuito es generoso y puedes tener tu primer deployment en vivo en cuestión de minutos. ¡Mucho éxito con tu próximo proyecto en Vercel!

Täglicher Artikel

Vercel Hosting y Deployment: Guía Completa