Saltearse al contenido

Despliega tu proyecto de Astro en Vercel

Puedes usar Vercel para desplegar tu proyecto de Astro a su red global edge sin configuración adicional.

Esta guía incluye instrucciones para desplegar tu proyecto en Vercel a través de la interfaz web o la línea de comandos (CLI) de Vercel.

Tu proyecto de Astro puede ser desplegado en Vercel como un sitio estático, o como un sitio renderizado en el servidor (SSR).

Tu proyecto de Astro es un sitio estático por defecto. No necesitas ninguna configuración adicional para desplegar un sitio estático de Astro en Vercel.

Para habilitar SSR en tu proyecto de Astro y desplegar en Vercel:

Añade el adaptador de Vercel a tu proyecto de Astro con el siguiente comando astro add que se muestra debajo. Este instalará el adaptador y hará los cambios apropiados a tu archivo astro.config.mjs en un solo paso.

Ventana de terminal
npx astro add vercel

Si prefieres instalar el adaptador manualmente, sigue los siguientes dos pasos:

  1. Añade el adaptador de @astrojs/vercel a las dependencias de tu proyecto usando tu gestor de paquetes preferido. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

    Ventana de terminal
    npm install @astrojs/vercel
  2. Añade dos líneas nuevas a tu archivo de configuración del proyecto astro.config.mjs.

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import vercel from '@astrojs/vercel/serverless';
    export default defineConfig({
    output: 'server',
    adapter: vercel(),
    });

Puedes desplegar en Vercel a través de la interfaz web o utilizando la interfaz de línea de comandos (CLI) de Vercel. El proceso es el mismo para sitios de Astro estáticos y SSR.

  1. Envía tu código a un repositorio en remoto de Git (GitHub, GitLab, BitBucket).
  2. Importa tu proyecto en Vercel.
  3. Vercel detectará automáticamente Astro y establecerá la configuración necesaria.
  4. ¡Tu aplicación está desplegada! (p. ej. astro.vercel.app)

Una vez que tu proyecto ha sido importado y desplegado, todos los envíos subsecuentes en las ramas de git generarán Preview Deployments, y todos los cambios hechos a la rama de producción (comúnmente “main”) resultarán en Production Deployments.

Aprende más sobre la integración de Git de Vercel.
  1. Instala la CLI de Vercel y ejecuta vercel para desplegar.

    Ventana de terminal
    npm install -g vercel
    vercel
  2. Vercel detectará automáticamente Astro y establecerá la configuración necesaria.

  3. Cuando pregunte Want to override the settings? [y/N], selecciona N.

  4. ¡Tu aplicación está desplegada! (p. ej. astro.vercel.app)

Puedes usar vercel.json para sobrescribir el comportamiento predeterminado de Vercel y para configurar ajustes adicionales. Por ejemplo, es posible que desees adjuntar encabezados a las respuestas HTTP de tus despliegues.

Aprende más sobre la configuración de Vercel.

Más guías de implementación