Vercel边缘函数

云眼About 3 min

Vercel边缘函数

使用 Vercel 边缘函数open in new window运行云眼灰度实验变体灰度标帜和实验的示例。

Vercel边缘函数

Vercel边缘功能允许以速度和个性化的方式向网站的访问者提供内容。默认情况下,它们全局部署在Vercel的边缘网络上,使您能够将服务器端逻辑移动到边缘,靠近访问者的源头。

可以在边缘对部署在 Vercelopen in new window 上的 NextJSopen in new window 应用程序使用云眼灰度实验灰度标帜。此示例使用 Vercel 边缘函数open in new window中的云眼灰度实验 Javascript SDKopen in new window,以便您开始为边缘体验实施实验和功能标记。有关开始使用我们平台的一般指南,可以将其与此处的open in new window Javascript 快速入门中概述的步骤结合使用。

使用云眼 Webhooks和Vercel Edge功能自动更新

此示例在每次生成期间从云眼的 CDN 获取最新的数据文件Vercel 的 Deploy Hooksopen in new window 可以与 云眼 Webhooksopen in new window 一起使用,以使应用程序与 云眼 项目中的最新更改保持同步。

身份管理

云眼 的功能实验 SDK 要求在运行时传入用户提供的标识符,以推动实验和灰度标帜决策。此示例生成一个唯一 ID,将其存储在 cookie 中,并重复使用它以使决策具有粘性。另一种常见的方法是在应用程序中使用现有的唯一标识符。

分桶

有关 云眼 功能实验 SDK 如何将用户分配到灰度标帜和实验的更多信息,请参阅有关分桶工作原理的文档

演示应用程序

在以下示例中,可以使用 Next.js 创建演示应用程序。此演示应用程序的示例可在Vercel的GitHubopen in new window上找到。

先决条件

需要满足以下先决条件才能使用此示例:

在 Vercel 中创建部署挂钩

  1. 导航到 Vercel 部署中的**“设置**”选项卡。
  2. 查找部署钩子部分并创建一个钩子
  3. 这将生成一个可用于触发部署重建的 URL。

在云眼灰度实验中创建 Webhook

  1. 按照说明在云眼云眼灰度实验中创建 Webhookopen in new window
  2. 使用上一节中生成的 URL 创建云眼灰度实验 Webhook。 Deploy Hook

工作原理

当用户使用 UI 对 云眼 项目进行更改时,Webhook 会命中 Vercel 的 URL,从而触发 Vercel 上的新构建。每个新版本都会获取最新版本的 云眼 数据文件,并在应用程序中使用它。 Deploy Hook

克隆并在本地部署

执行create-next-appopen in new window 使用 NPMopen in new windowYarnopen in new window 来引导示例:

Shell

npx create-next-app@latest

Shell

yarn create next-app

🚧 重要

在本地运行之前,请按照 JavaScript SDK 的快速入门创建以下内容:

  • 云眼帐户
  • 至少一个灰度标帜
  • 云眼灰度实验 SDK 密钥

使用以下示例生成 Next.js 应用:

Shell

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/feature-flag-eyeofcloud feature-flag-eyeofcloud

Shell

yarn create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/feature-flag-eyeofcloud feature-flag-eyeofcloud

从示例中创建一个本地环境文件,并添加云眼灰度实验 SDK 密钥:

Shell

cp .env.example .env.local

在开发模式下运行下一步.js:

Shell

npm install npm run dev

yarn yarn dev

最后,按照 Vercel 文档open in new window将示例应用部署到云中。

其他资源

Last update:
Contributors: “zhangweixue”