@astrojs/ vercel

v7.8.2 GitHub npm 更新日志

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

如果你使用 Astro 作为 静态 站点生成器，只有当你使用额外的 Vercel 服务时（例如 Vercel 网络分析，Vercel 图像优化），你才需要这个适配器。否则，你不需要适配器来部署你的 静态 站点。

在我们的 Vercel 部署指南中学习和部署你的 Astro 站点。

为什么选择 Astro Vercel

Vercel 是一个部署平台，它允许你通过直接连接到 GitHub 仓库来托管你的站点。这个适配器增强了 Astro 的构建过程，为通过 Vercel 进行部署做好了准备。

安装

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

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

npx astro add vercel

pnpm astro add vercel

yarn astro add vercel

手动安装

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

npm install @astrojs/vercel

pnpm add @astrojs/vercel

yarn add @astrojs/vercel

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

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

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

选择目标

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

serverless：在 Node.js 函数内进行服务端渲染。
static：生成一个遵循 Vercel 输出格式、重定向等的静态网站。

你可以通过改变导入来切换目标：

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

用法

了解更多关于将项目部署到 Vercel 的信息。

你可以通过 CLI ( vercel deploy ) 或者通过 Vercel 控制台连接到你的新仓库进行部署。或者，你可以在本地创建生产版本构建：

astro build
vercel deploy --prebuilt

配置

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

`webAnalytics`

类型： VercelWebAnalyticsConfig
适用于： Serverless, Static

添加于： @astrojs/vercel@3.8.0

你可以通过设置 webAnalytics: { enabled: true } 来启用 Vercel Web Analytics。这将在所有页面中注入 Vercel 的跟踪脚本。

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

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

`imagesConfig`

类型： VercelImageConfig
适用于： Serverless, Static

添加于： @astrojs/vercel@3.3.0

Vercel 的图片优化 API 选项。查看 Vercel 的图片优化配置文档以获取支持的参数的完整列表。

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

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

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

`imageService`

类型： boolean
适用于： Serverless, Static

添加于： @astrojs/vercel@3.3.0

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

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

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

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

<!-- 这里的组件 -->
<Image src={astroLogo} alt="My super logo!" />

<!-- 将会被编译成如下 HTML -->
<img
  src="/_vercel/image?url=_astro/logo.hash.png&w=...&q=..."
  alt="My super logo!"
  loading="lazy"
  decoding="async"
  width="..."
  height="..."
/>

`devImageService`

类型： 'sharp' | 'squoosh' | string
适用于： Serverless, Static

添加于： @astrojs/vercel@3.8.0

默认值： sharp

当 imageService 启用时，允许你在开发中配置使用哪个图像服务。如果你无法在开发机器上安装 Sharp 的依赖项，但使用另一个图像服务（如 Squoosh）可以让你在开发环境中预览图像，这可能很有用。但构建不会受其影响，将始终使用 Vercel 的图像优化。

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

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

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

`isr`

类型： boolean | VercelISRConfig
适用于： Serverless

添加于： @astrojs/vercel@7.2.0

默认值： false

允许你的项目作为一个 ISR (增量式静态再生) 功能部署，这个功能以首次请求后预渲染页面相同的方式缓存你按需渲染的页面。

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

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

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

请注意，ISR 功能请求不包括搜索参数，这与静态模式下的请求类似。

ISR 缓存失效

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

基于时间的失效

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

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

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    isr: {
      // 在首次请求时缓存所有页面，并保存 1 天
      expiration: 60 * 60 * 24,
    },
  }),
});

从缓存中排除路径

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

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

export default defineConfig({
    output: "server",
    adapter: vercel({
        isr: {
            // 你创建的一个秘密随机字符串。
            bypassToken: "005556d774a8",
            // 总是提供最新内容的路径。
            exclude: [ "/api/invalidate", "/posts/[...slug]" ]
        }
    })
})

`includeFiles`

类型： string[]
适用于： Serverless

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

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

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    includeFiles: ['./my-data.json'],
  }),
});

`excludeFiles`

类型： string[]
适用于： Serverless

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

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`

类型： number
适用于： Serverless

使用这个属性来延长或限制无服务器函数运行的最长持续时间（以秒为单位），直到超时。请参阅 Vercel 文档获取你的账号计划的默认和最大时限。

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

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

`skewProtection`

类型： boolean
适用于： Serverless

添加于： @astrojs/vercel@7.6.0

使用此属性启用 Vercel Skew protection（适用于 Vercel Pro 和企业账户）。

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

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

函数打包配置

Vercel 适配器默认将所有路由组合成一个函数。

你也可以使用 functionPerRoute 选项将构建拆分为每个路由一个函数。这样可以减少每个函数的大小，这意味着你不太可能超过单个函数的大小限制。并且，代码启动更快。

在启用 functionPerRoute 前请查验你的 Vercel 计划是否包含足够数量的函数。例如，Vercel 的免费计划限制每个部署拥有不超过 12 个函数。如果你的 Vercel 计划不足以满足项目中的路由数量，你将在部署过程中收到错误消息。

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

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

在 Vercel Edge 函数上运行 Astro 中间件

@astrojs/vercel/serverless 适配器可以根据你代码库中的 Astro 中间件创建一个边缘函数。当启用 edgeMiddleware 时，边缘函数将为包括静态资源、预渲染页面和按需渲染页面在内的所有请求执行你的中间件代码。

对于按需渲染的页面，context.locals 对象会被 JSON 序列化并通过标头发送给无服务器函数，由该函数执行渲染。作为安全措施，除非请求来自生成的边缘函数，否则无服务器函数将拒绝服务，并返回 403 Forbidden 响应。

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

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

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

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

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

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

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