Saltearse al contenido

@astrojs/vercel

Este adaptador permite que Astro despliegue tu proyecto usando redenrizado en el servidor (SSR) en Vercel.

Aprende como desplegar tu proyecto de Astro consultando nuestra guía de despliegue en Vercel.

Si estás usando Astro como un generador de sitios estáticos no necesitas un adaptador.

Si deseas usar renderizado del lado del servidor (SSR), Astro requiere un adaptador que coincida con el runtime de tu despliegue.

Vercel es una plataforma de despliegue que te permite alojar tu proyecto conectándote directamente a tu repositorio de GitHub. Este adaptador ajusta el proceso de compilación de Astro para preparar tu proyecto para el despliegue a través de Vercel.

Agrega el adaptador Vercel para habilitar SSR en tu proyecto de Astro con el comando astro add. Esto instalará el adaptador y realizará los cambios apropiados en tu archivo astro.config.mjs en un solo paso.

Terminal window
# Usando NPM
npx astro add vercel
# Usando Yarn
yarn astro add vercel
# Usando PNPM
pnpm astro add vercel

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

  1. Instala el adaptador Vercel en las dependencias de tu proyecto usando tu administrador de paquetes preferido. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:

    Terminal window
    npm install @astrojs/vercel
  2. Agrega dos nuevas líneas a tu archivo de configuración de 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 diferentes objetivos:

  • serverless: SSR dentro de una función Node.js.
  • static: genera un sitio estático siguiendo los formatos de salida, redirecciones, etc. de Vercel.

Puedes cambiar el destino modificando la importación:

import vercel from '@astrojs/vercel/serverless';
import vercel from '@astrojs/vercel/static';

📚 Lee la guía completa para despliegue aquí.

Puedes desplegar por CLI (vercel deploy) o conectando tu nuevo repositorio en el Panel de Vercel. Alternativamente, puedes crear un build de producción localmente:

Terminal window
astro build
vercel deploy --prebuilt

Para configurar este adaptador, pasa un objeto a la invocación de función vercel() en astro.config.mjs:

Tipo: VercelWebAnalyticsConfig
Disponible para: Serverless, Edge, Static
Agregado en: @astrojs/vercel@3.8.0

Puedes habilitar Vercel Analytics (incluyendo Web Vitals y Audiences) configurando webAnalytics: { enabled: true }. Esto inyectará los scripts de seguimiento de Vercel en todas tus páginas.

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

Puedes habilitar Información de Velocidad de Vercel configurando speedInsights: { enabled: true }. Esto recopilará y enviará datos de Web Vital a Vercel.

Tipo: VercelSpeedInsightsConfig
Disponible para: Serverless, Edge, Static
Agregado en: @astrojs/vercel@3.8.0

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

Tipo: VercelImageConfig
Disponible para: Serverless, Static Agregado en: @astrojs/vercel@3.3.0

Opciones de configuración para la API de Optimización de Imágenes de Vercel. Consulta la documentación de configuración de imágenes de Vercel para obtener una lista completa de los parámetros admitidos.

Las propiedades domains y remotePatterns se llenarán automáticamente utilizando la configuración correspondiente de image en Astro.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';
export default defineConfig({
output: 'server',
adapter: vercel({
imagesConfig: {
sizes: [320, 640, 1280],
},
}),
});

Tipo: boolean
Disponible para: Serverless y Static Agregado en: @astrojs/vercel@3.3.0

Cuando está habilitado, se configurará y utilizará automáticamente un Servicio de Imágenes impulsado por la API de Optimización de Imágenes de Vercel en producción. En desarrollo, el servicio de imágenes especificado por devImageService se utilizará en su lugar.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';
export default defineConfig({
output: 'server',
adapter: vercel({
imageService: true,
}),
});
---
import { Image } from 'astro:assets';
import astroLogo from ''../assets/logo.png';
---
<!-- Este componente -->
<Image src={astroLogo} alt="My super logo!" />
<!-- se convertirá en el siguiente elemento de HTML -->
<img
src="/_vercel/image?url=_astro/logo.hash.png&w=...&q=..."
alt="Mi super logo!"
loading="lazy"
decoding="async"
width="..."
height="..."
/>

Tipo: 'sharp' | 'squoosh' | string
Disponible para: Serverless, Static Agregado en: @astrojs/vercel@3.3.0 Por defecto: ‘sharp’

Te permite configurar qué servicio de imágenes usar en desarrollo cuando imageService está habilitado. Esto puede ser útil si no puedes instalar las dependencias de Sharp en tu máquina de desarrollo, pero usar otro servicio de imágenes como Squoosh te permitiría previsualizar imágenes en tu entorno de desarrollo. La compilación no se ve afectada y siempre usará la Optimización de Imágenes de Vercel.

También puede establecerse en cualquier valor arbitrario para usar un servicio de imágenes personalizado en lugar de los integrados en Astro.

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
export default defineConfig({
output: 'server',
adapter: vercel({
imageService: true,
devImageService: 'squoosh',
}),
});

Tipo: string[]
Disponible para: Serverless

Usa esta propiedad para forzar a que los archivos se incluyan en el empaquetado de tu función. Esto es útil cuando notas que faltan archivos.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';
export default defineConfig({
output: 'server',
adapter: vercel({
includeFiles: ['./my-data.json'],
}),
});

Tipo: string[]
Disponible para: Serverless

Utiliza esta propiedad para excluir cualquier archivo del proceso de empaquetado que de otra manera se incluiría.

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

Tipo: number
Disponible para: Serverless

Usa esta propiedad para extender o limitar la duración máxima (en segundos) que pueden ejecutarse las funciones sin servidor antes de agotar el tiempo de espera. Consulta la documentación de Vercel para conocer el límite predeterminado y máximo para el plan de tu cuenta.

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

Configuración de agrupación de funciones

Sección titulada Configuración de agrupación de funciones

El adaptador de Vercel combina todas tus rutas en una única función por defecto.

También tienes la opción de dividir las compilaciones en una función separada para cada ruta usando la opción functionPerRoute. Esto reduce el tamaño de cada función, lo que significa que es menos probable que excedas el límite de tamaño para una función individual. Además, el código se inicia más rápido.

Verifica que tu plan de Vercel incluya un número adecuado de funciones antes de habilitar functionPerRoute. Por ejemplo, el nivel gratuito de Vercel limita cada despliegue a no más de 12 funciones. Si tu plan de Vercel es insuficiente para el número de rutas en tu proyecto, recibirás un mensaje de error durante el despliegue.

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

Puedes usar el middleware de Vercel Edge para interceptar una solicitud y redirigirla antes de enviar una respuesta. El middleware de Vercel puede ejecutarse en implementaciones de Edge, SSR y estáticas. Es posible que no necesites instalar este paquete para tu middleware. @vercel/edge es solo necesario para usar algunas usar algunas características de middleware como la geolocalización. Para obtener más información, consulta la documentación de middleware de Vercel.

  1. Agrega un archivo middleware.js en la raíz de tu proyecto:

    middleware.js
    export const config = {
    // Solo ejecuta el middleware en la ruta admin
    matcher: '/admin',
    };
    export default function middleware(request) {
    const url = new URL(request.url);
    // Puedes recuperar la ubicación IP o las cookies aquí.
    if (url.pathname === '/admin') {
    url.pathname = '/'
    }
    return Response.redirect(url);
    }
  2. Mientras desarrollas localmente, puedes ejecutar vercel dev para ejecutar el middleware. En producción, Vercel lo manejará por ti.

Middleware de Vercel Edge con middleware de Astro

Sección titulada Middleware de Vercel Edge con middleware de Astro

El adaptador @astrojs/vercel/serverless puede crear automáticamente el middleware de Vercel Edge a partir de un middleware de Astro en tu código base.

Esto es una característica opcional, y la opción edgeMiddleware debe establecerse en true:

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

Opcionalmente, puedes crear un archivo reconocido por el adaptador llamado vercel-edge-middleware.(js|ts) en la carpeta srcDir para crear Astro.locals.

Escribir requiere el paquete @vercel/edge

src/vercel-edge-middleware.js
/**
*
* @param options.request {Request}
* @param options.context {import("@vercel/edge").RequestContext}
* @returns {object}
*/
export default function ({ request, context }) {
// haz algo con la solicitud y el contexto
return {
title: "Blog de Spiderman",
};
}

Si usas TypeScript, puedes escribir la función de la siguiente manera:

src/vercel-edge-middleware.ts
import type { RequestContext } from '@vercel/edge';
export default function ({ request, context }: { request: Request; context: RequestContext }) {
// haz algo con la solicitud y el contexto
return {
title: "Blog de Spiderman",
};
}

La información devuelta por esta función se pasará al middleware de Astro.

La función:

  • debe exportar una función predeterminada;
  • debe regresar un object;
  • acepta un objeto con una request y context como propiedades;
  • request es tipada como Request;
  • context es tipado como RequestContext;

Cuando optes por esta característica, hay algunas restricciones a tener en cuenta:

  • El middleware de Vercel Edge será siempre la primera función en recibir la Request y la última función en recibir la Response. Esta es una restricción arquitectónica que sigue los límites establecidos por Vercel.
  • Solo request y context se pueden usar para producir un objeto Astro.locals. Las operaciones como redireccionamientos, etc. deben delegarse al middleware de Astro.
  • Astro.locals debe ser serializable. Si no lo haces, se producirá un error de runtime. Esto significa que no puedes almacenar tipos complejos como Map, function, Set, etc.

Un par de paquetes conocidos por ser complejos (por ejemplo: puppeteer) no admiten el empaquetado y, por lo tanto, no funcionarán correctamente con este adaptador. Por defecto, Vercel no incluye los archivos y paquetes instalados de npm de la carpeta ./node_modules de tu proyecto. Para solucionar esto, el adaptador @astrojs/vercel empaqueta automáticamente la salida final de la compilación usando esbuild.

Para obtener ayuda, consulta el canal #support en Discord. ¡Nuestros amables miembros del equipo de soporte están aquí para ayudarte!

Este paquete es mantenido por el equipo de Astro. ¡Estás invitado a enviar un problema o PR!

Consulta el CHANGELOG.md para ver el historial de cambios en esta integración.

Otros

Frameworks UI

Adaptadores SSR

Otros