跳转到内容
Astro Astro

@astrojs/vercel

这个适配器允许 Astro 将你的 SSR 站点部署到 Vercel 。

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

为什么选择 Astro Vercel

如果你正在使用 Astro 作为静态站点构建工具，那么它的默认行为下你无需使用适配器。

但如果你希望使用 服务端渲染，Astro 就需要一个与你的部署运行时相匹配的适配器。

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

安装

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

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

手动添加依赖

如果你更喜欢手动安装适配器，请按照以下两个步骤进行：

  1. 使用你偏爱的包管理器将 Vercel 适配器添加到项目的依赖项中。如果你使用 npm 或者不确定使用什么，可以在终端中运行以下命令：

    Terminal window
      npm install @astrojs/vercel

  2. 在你的 astro.config.mjs 项目配置文件中添加两行代码。

    astro.config.mjs
    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';

用法

📚 在这里阅读完整的部署指南。

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

Terminal window
astro build
vercel deploy --prebuilt

配置

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

Web Analytics

类型： VercelWebAnalyticsConfig
适用于： Serverless, Static, Edge
添加于： @astrojs/vercel@3.8.0

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

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


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

Speed Insights

你可以通过设置 speedInsights: { enabled: true } 来启用 Vercel Speed Insights。这将收集并发送 Web Vital 数据到 Vercel。

类型： VercelSpeedInsightsConfig
适用于： Serverless, Edge, Static
添加于： @astrojs/vercel@3.8.0

astro.config.mjs
import vercel from '@astrojs/vercel/serverless';


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

imagesConfig

类型： VercelImageConfig
适用于： Serverless, Static
添加于： @astrojs/vercel@3.3.0

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

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

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

imageService

类型： boolean
适用于： Serverless, Static
添加于： @astrojs/vercel@3.3.0

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

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';
---


<!-- 这里的组件 -->
<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.3.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',
  }),
});

includeFiles

类型： string[]
适用于： Serverless

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

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

类型： string[]
适用于： Serverless

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

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

类型： number
适用于： Serverless

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

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


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

函数打包配置

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

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

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

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 中间件

你可以使用 Vercel Edge 中间件在发送响应之前拦截请求并重定向。Vercel 中间件可以用于 Edge、SSR 和静态部署。你可能不需要安装此软件包来使用中间件。@vercel/edge 仅在使用某些中间件功能（例如地理位置）时需要。更多信息请参阅 Vercel 的中间件文档.

  1. 在你的项目根目录添加一个 middleware.js 文件：

    middleware.js
    export const config = {
      // 仅在 admin 路由上运行中间件
      matcher: '/admin',
    };
    

    export default function middleware(request) {
      const url = new URL(request.url);
      // 可以在这里获取 IP 位置或 cookie。
      if (url.pathname === '/admin') {
        url.pathname = '/';
      }
      return Response.redirect(url);
    }

  2. 在本地开发时，你可以运行 vercel dev 来运行中间件。在生产中，Vercel 会自动处理这个。

通过 Astro 中间件创建 Vercel Edge 中间件

@astrojs/vercel/serverless 适配器可以根据你代码库中的 Astro 中间件自动创建 Vercel Edge 中间件。

这是一个选择性功能，需要将 edgeMiddleware 选项设置为 true ：

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

可选的，你可以在 src文件夹 中创建一个被适配器识别的文件，名为 vercel-edge-middleware.(js|ts) ，以创建 Astro.locals 。

Typings 需要 @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 }) {
  // 在这里处理 request 和 context
  return {
    title: "Spider-man's blog",
  };
}

如果你使用 TypeScript，可以将函数类型化如下：

src/vercel-edge-middleware.ts
import type { RequestContext } from '@vercel/edge';


export default function ({ request, context }: { request: Request; context: RequestContext }) {
  // 在这里处理 request 和 context
  return {
    title: "Spider-man's blog",
  };
}

这个函数返回的数据将传递给 Astro 中间件。

函数：

  • 必须导出一个 default 函数；
  • 必须 return 一个 object ；
  • 接受一个具有 request 和 context 属性的对象；
  • request 的类型为 Request;
  • context 的类型为 RequestContext;

限制和约束

当你选择此功能时，需要注意一些限制：

  • Vercel Edge 中间件将始终是第一个接收 Request 的函数，并且是接收 Response 的最后一个函数。这是一种遵循 Vercel 设定的边界的结构性约束。
  • 仅使用 request 和 context 来生成一个 Astro.locals 对象。像重定向等操作应该委托给 Astro 中间件。
  • Astro.locals 必须是可序列化的。不这样做将导致 运行时错误. 这意味着你 不能 存储复杂类型比如 Map、 function、 Set 等

故障排除

一些已知的复杂软件包（例如： puppeteer) 不支持打包，因此在此适配器下可能无法正常工作。 默认情况下，Vercel 不会包含项目的 ./node_modules 文件夹中安装的文件和包。为了解决这个问题， @astrojs/vercel 适配器会使用 esbuild 自动打包你的最终构建输出。

如果需要帮助，请访问 Discord 上的 #support 频道。我们友好的支持团队成员将在那里帮助你！

贡献

这个软件包由 Astro 的核心团队维护。欢迎提交问题或 PR！

更新日志

查看 CHANGELOG.md 了解此集成的更改历史。

其他

UI 框架

SSR 适配器

其他