@astrojs/ vercel

此适配器允许 Astro 将你的 hybrid 或 server 渲染的站点 部署到 Vercel。

¥This adapter allows Astro to deploy your hybrid or server rendered site to Vercel.

如果你将 Astro 用作 static 站点构建器，则只有在使用其他 Vercel 服务（例如 Vercel 网络分析、Vercel 图片优化）时才需要此适配器。否则，你不需要适配器来部署你的 static 站点。

¥If you’re using Astro as a static site builder, you only need this adapter if you are using additional Vercel services (e.g. Vercel Web Analytics, Vercel Image Optimization). Otherwise, you do not need an adapter to deploy your static site.

了解如何在我们的 Vercel 部署指南 中部署 Astro 站点。

¥Learn how to deploy your Astro site in our Vercel deployment guide.

为什么选择 Astro Vercel

Section titled 为什么选择 Astro Vercel

¥Why Astro Vercel

Vercel 是一个部署平台，允许你通过直接连接到 GitHub 存储库来托管你的站点。该适配器增强了 Astro 构建过程，以准备你的项目以通过 Vercel 进行部署。

¥Vercel is a deployment platform that allows you to host your site by connecting directly to your GitHub repository. This adapter enhances the Astro build process to prepare your project for deployment through Vercel.

安装

Section titled 安装

¥Installation

Astro 包含一个 astro add 命令来自动设置官方集成。如果你愿意，你可以改用 安装集成手动。

¥Astro includes an astro add command to automate the setup of official integrations. If you prefer, you can install integrations manually instead.

使用以下 astro add 命令添加 Vercel 适配器以在 Astro 项目中启用 SSR。这将安装 @astrojs/vercel 并在一个步骤中对你的 astro.config.mjs 文件进行适当的更改。

¥Add the Vercel adapter to enable SSR in your Astro project with the following astro add command. This will install @astrojs/vercel and make the appropriate changes to your astro.config.mjs file in one step.

npm

npx astro add vercel

pnpm

pnpm astro add vercel

Yarn

yarn astro add vercel

手动安装

Section titled 手动安装

¥Manual Install

首先，使用你首选的包管理器将 @astrojs/vercel 适配器添加到项目的依赖中：

¥First, add the @astrojs/vercel adapter to your project’s dependencies using your preferred package manager:

npm

npm install @astrojs/vercel

pnpm

pnpm add @astrojs/vercel

Yarn

yarn add @astrojs/vercel

然后，将适配器和所需的 按需渲染模式 添加到你的 astro.config.* 文件中：

¥Then, add the adapter and your desired on-demand rendering mode to your astro.config.* file:

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel(),
});

选择目标

Section titled 选择目标

¥Choosing a Target

你可以部署到不同的目标：

¥You can deploy to different targets:

• serverless：Node.js 函数 内的 SSR。

• static：根据 Vercel 的输出格式、重定向等生成静态网站。

你可以通过更改导入来更改目标位置：

¥You can change where to target by changing the import:

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

用法

Section titled 用法

¥Usage

Find out more about deploying your project to Vercel.

你可以通过 CLI (vercel deploy) 或通过连接 维塞尔仪表板 中的新存储库进行部署。或者，你可以在本地创建生产版本：

¥You can deploy by CLI (vercel deploy) or by connecting your new repo in the Vercel Dashboard. Alternatively, you can create a production build locally:

astro build
vercel deploy --prebuilt

配置

Section titled 配置

¥Configuration

要配置此适配器，请将对象传递给 astro.config.mjs 中的 vercel() 函数调用：

¥To configure this adapter, pass an object to the vercel() function call in astro.config.mjs:

webAnalytics

Section titled webAnalytics

类型：VercelWebAnalyticsConfig
适用于：无服务器，静态

¥Type: VercelWebAnalyticsConfig
Available for: Serverless, Static

Added in: @astrojs/vercel@3.8.0

你可以通过设置 webAnalytics: { enabled: true } 来启用 Vercel 网络分析。这会将 Vercel 的跟踪脚本注入到你的所有页面中。

¥You can enable Vercel Web Analytics by setting webAnalytics: { enabled: true }. This will inject Vercel’s tracking scripts into all of your pages.

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    webAnalytics: {
      enabled: true,
    },
  }),
});

imagesConfig

Section titled imagesConfig

类型：VercelImageConfig
适用于：无服务器，静态

¥Type: VercelImageConfig
Available for: Serverless, Static

Added in: @astrojs/vercel@3.3.0

Vercel 的图片优化 API 的配置选项。有关受支持参数的完整列表，请参阅 Vercel 的镜像配置文档。

¥Configuration options for Vercel’s Image Optimization API. See Vercel’s image configuration documentation for a complete list of supported parameters.

domains 和 remotePatterns 属性将自动使用 Astro 对应的 image 设置 填充。

¥The domains and remotePatterns properties will automatically be filled using the Astro corresponding image settings.

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  // ...
  output: 'static',
  adapter: vercel({
    imagesConfig: {
      sizes: [320, 640, 1280],
    },
  }),
});

imageService

Section titled imageService

类型：boolean
适用于：无服务器，静态

¥Type: boolean
Available for: Serverless, Static

Added in: @astrojs/vercel@3.3.0

启用后，由 Vercel 图片优化 API 提供支持的 影像服务 将自动配置并在生产中使用。开发中将改用 devImageService 指定的图片服务。

¥When enabled, an Image Service powered by the Vercel Image Optimization API will be automatically configured and used in production. In development, the image service specified by devImageService will be used instead.

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  // ...
  output: 'static',
  adapter: vercel({
    imageService: true,
  }),
});

src/pages/index.astro

---
import { Image } from 'astro:assets';
import astroLogo from '../assets/logo.png';
---

<!-- This component -->
<Image src={astroLogo} alt="My super logo!" />

<!-- will become the following HTML -->
<img
  src="/_vercel/image?url=_astro/logo.hash.png&w=...&q=..."
  alt="My super logo!"
  loading="lazy"
  decoding="async"
  width="..."
  height="..."
/>

devImageService

Section titled devImageService

类型：'sharp' | 'squoosh' | string
适用于：无服务器，静态

¥Type: 'sharp' | 'squoosh' | string
Available for: Serverless, Static

Added in: @astrojs/vercel@3.8.0

默认：sharp

¥Default: sharp

允许你配置在启用 imageService 时在开发中使用哪个图片服务。如果你无法在开发计算机上安装 Sharp 的依赖，那么这会很有用，但使用 Squoosh 等其他图片服务将允许你在开发环境中预览图片。Build 不受影响，并且将始终使用 Vercel 的图片优化。

¥Allows you to configure which image service to use in development when imageService is enabled. This can be useful if you cannot install Sharp’s dependencies on your development machine, but using another image service like Squoosh would allow you to preview images in your dev environment. Build is unaffected and will always use Vercel’s Image Optimization.

它还可以设置为任意值，以便使用自定义图片服务而不是 Astro 的内置图片服务。

¥It can also be set to any arbitrary value in order to use a custom image service instead of Astro’s built-in ones.

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    imageService: true,
    devImageService: 'squoosh',
  }),
});

isr

Section titled isr

类型：boolean | VercelISRConfig
适用于：无服务器

¥Type: boolean | VercelISRConfig
Available for: Serverless

Added in: @astrojs/vercel@7.2.0

默认：false

¥Default: false

允许将你的项目部署为 ISR（增量静态再生） 函数，该函数在第一次请求后以与预渲染页面相同的方式缓存你的按需渲染页面。

¥Allows your project to be deployed as an ISR (Incremental Static Regeneration) function, which caches your on-demand rendered pages in the same way as prerendered pages after first request.

要启用此功能，请在 astro.config.mjs 中的 Vercel 适配器配置中将 isr 设置为 true：

¥To enable this feature, set isr to true in your Vercel adapter configuration in astro.config.mjs:

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    isr: true,
  }),
});

请注意，ISR 函数请求不包含搜索参数，类似于静态模式下的 requests。

¥Note that ISR function requests do not include search params, similar to requests in static mode.

ISR 缓存失效

Section titled ISR 缓存失效

¥ISR cache invalidation

默认情况下，ISR 函数会在部署期间缓存。你可以通过设置到期时间或完全从缓存中排除特定路由来进一步控制缓存。

¥By default, an ISR function caches for the duration of your deployment. You can further control caching by setting an expiration time, or by excluding particular routes from caching entirely.

基于时间的失效

Section titled 基于时间的失效

¥Time-based invalidation

你可以通过配置 expiration 值（以秒为单位）来更改缓存路由的时间长度：

¥You can change the length of time to cache routes this by configuring an expiration value in seconds:

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    isr: {
      // caches all pages on first request and saves for 1 day
      expiration: 60 * 60 * 24,
    },
  }),
});

从缓存中排除路径

Section titled 从缓存中排除路径

¥Excluding paths from caching

要实现 Vercel 的 草稿模式 或 按需增量静态再生 (ISR)，你可以创建一个旁路令牌并将其与要从缓存中排除的任何路由一起提供给 isr 配置：

¥To implement Vercel’s Draft mode, or On-Demand Incremental Static Regeneration (ISR), you can create a bypass token and provide it to the isr config along with any routes to exclude from caching:

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
    output: "server",
    adapter: vercel({
        isr: {
            // A secret random string that you create.
            bypassToken: "005556d774a8",
            // Paths that will always be served fresh.
            exclude: [ "/api/invalidate", "/posts/[...slug]" ]
        }
    })
})

includeFiles

Section titled includeFiles

类型：string[]
适用于：无服务器

¥Type: string[]
Available for: Serverless

使用此属性可以强制将文件与你的函数打包在一起。当你发现文件丢失时，这会很有帮助。

¥Use this property to force files to be bundled with your function. This is helpful when you notice missing files.

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'],
  }),
});

excludeFiles

Section titled excludeFiles

类型：string[]
适用于：无服务器

¥Type: string[]
Available for: Serverless

使用此属性可以从打包过程中排除任何本来会包含的文件。

¥Use this property to exclude any files from the bundling process that would otherwise be included.

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'],
  }),
});

maxDuration

Section titled maxDuration

类型：number
适用于：无服务器

¥Type: number
Available for: Serverless

使用此属性可以延长或限制无服务器函数在超时之前可以运行的最大持续时间（以秒为单位）。请参阅 Vercel 文档 了解你的账户计划的默认和最大限额。

¥Use this property to extend or limit the maximum duration (in seconds) that Serverless Functions can run before timing out. See the Vercel documentation for the default and maximum limit for your account plan.

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
// ...
  output: "server",
  adapter: vercel({
    maxDuration: 60
  }),
});

skewProtection

Section titled skewProtection

类型：boolean
适用于：无服务器

¥Type: boolean
Available for: Serverless

Added in: @astrojs/vercel@7.6.0

使用此属性可启用 Vercel 倾斜保护（适用于 Vercel Pro 和 Enterprise 账户）。

¥Use this property to enable Vercel Skew protection (available with Vercel Pro and Enterprise accounts).

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
// ...
  output: "server",
  adapter: vercel({
    skewProtection: true
  }),
});

功能绑定配置

Section titled 功能绑定配置

¥Function bundling configuration

Deprecated

The functionPerRoute option is deprecated and will be removed entirely in Astro 5. Additionally, this option is incompatible with some Astro features such as i18n domains and request rewriting.

If you have currently enabled functionPerRoute: true, we recommend removing this configuration option as soon as you are able.

默认情况下，Vercel 适配器将所有路由合并到一个函数中。

¥The Vercel adapter combines all of your routes into a single function by default.

你还可以选择使用 functionPerRoute 选项将每个路由的构建拆分为单独的函数。这会减少每个函数的大小，这意味着你不太可能超出单个函数的大小限制。此外，代码启动速度更快。

¥You also have the option to split builds into a separate function for each route using the functionPerRoute option. This reduces the size of each function, meaning you are less likely to exceed the size limit for an individual function. Also, code starts are faster.

在启用 functionPerRoute 之前，请验证你的 Vercel 计划是否包含适当数量的功能。例如，Vercel 的免费套餐将每次部署限制为不超过 12 个功能。如果你的 Vercel 计划不足以容纳项目中的路由数量，你将在部署过程中收到错误消息。

¥Verify that your Vercel plan includes an appropriate number of functions before enabling functionPerRoute. For example, Vercel’s free tier limits each deployment to no more than 12 functions. If your Vercel plan is insufficient for the number of routes in your project, you will receive an error message during deployment.

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    functionPerRoute: true,
  }),
});

在 Vercel Edge Functions 上运行 Astro 中间件

Section titled 在 Vercel Edge Functions 上运行 Astro 中间件

¥Running Astro middleware on Vercel Edge Functions

@astrojs/vercel/serverless 适配器可以从代码库中的 Astro 中间件创建 edge 函数。启用 edgeMiddleware 后，边缘函数将对所有请求执行中间件代码，包括静态资源、预渲染页面和按需渲染页面。

¥The @astrojs/vercel/serverless adapter can create an edge function from an Astro middleware in your code base. When edgeMiddleware is enabled, an edge function will execute your middleware code for all requests including static assets, prerendered pages, and on-demand rendered pages.

对于按需渲染的页面，context.locals 对象使用 JSON 序列化并在标头中发送给执行渲染的无服务器函数。作为一项安全措施，无服务器函数将拒绝处理带有 403 Forbidden 响应的请求，除非它们来自生成的边缘函数。

¥For on-demand rendered pages, the context.locals object is serialized using JSON and sent in a header for the serverless function, which performs the rendering. As a security measure, the serverless function will refuse to serve requests with a 403 Forbidden response unless they come from the generated edge function.

这是一个可选功能。要启用它，请将 edgeMiddleware 设置为 true：

¥This is an opt-in feature. To enable it, set edgeMiddleware to true:

astro.config.mjs

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    edgeMiddleware: true,
  }),
});

边缘中间件可以访问 Vercel 的 RequestContext 作为 ctx.locals.vercel.edge。如果你使用的是 TypeScript，你可以通过更新 src/env.d.ts 以使用 EdgeLocals 来获得正确的类型：

¥The edge middleware has access to Vercel’s RequestContext as ctx.locals.vercel.edge. If you’re using TypeScript, you can get proper typings by updating src/env.d.ts to use EdgeLocals:

/// <reference path="../.astro/types.d.ts" />

type EdgeLocals = import('@astrojs/vercel').EdgeLocals

declare namespace App {
  interface Locals extends EdgeLocals {
    // ...
  }
}

Node.js 版本支持

Section titled Node.js 版本支持

¥Node.js Version Support

@astrojs/vercel 适配器支持特定的 Node.js 版本，用于在 Vercel 上部署 Astro 项目。要查看 Vercel 上支持的 Node.js 版本，请单击项目的设置选项卡并向下滚动到 “Node.js 版本” 部分。

¥The @astrojs/vercel adapter supports specific Node.js versions for deploying your Astro project on Vercel. To view the supported Node.js versions on Vercel, click on the settings tab for a project and scroll down to “Node.js Version” section.

查看 Vercel 文档 以了解更多信息。

¥Check out the Vercel documentation to learn more.

More integrations

UI Frameworks

• 

  @astrojs/alpinejs

• 

  @astrojs/lit

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

SSR Adapters

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Other integrations

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap

• 

  @astrojs/tailwind