使用Denoflare开发、测试和部署Cloudflare工作者

723 阅读7分钟

在我职业生涯的大部分时间都在使用Node.js之后,我很有兴趣听到其对应的Deno。Deno是对服务器端JavaScript的另一种看法。Deno旨在纠正Node.js的错误,创建一个默认安全的运行时。

什么是Deno?

Deno整合了其他一些方面,例如内置的TypeScript编译器、linter、formatter和包管理器。它还支持ESM模块,使用网络平台作为其标准库的基础,并且围绕IO有一个安全默认设计。

与Node.js相比,这使得开发体验大大简化。我开始使用Deno来编写我需要的CLI工具(使用deno-cliffy),并对这种体验感到满意。当我第一次听说Denoflare时,我认为这是一个理想的机会,可以在获得更多Deno的经验的同时尝试使用Cloudflare Workers

将Deno与Cloudflare Workers一起使用

与AWS Lambda等服务相比,Cloudflare Workers是无服务器基础设施的替代品。它的核心是像无服务器函数一样,接收请求信息,应用逻辑,并发送响应。

预期的用例是不同的,因为它要充当中间件,拦截发送到源服务器的请求,并应用逻辑。Cloudflare的行为类似于浏览器服务工作者

Client, Cloudflare, Server

Cloudflare Workers并不是充满了正在旋转的孤立的容器,提供了零冷启动的好处。Cloudflare Workers的其他一些不错的功能是全球CDN部署和按请求付费。

什么是Denoflare?

Denoflare 是一个小型框架,可让您发布用 Deno 编写的 Cloudflare Workers。这是一种自然的配合,因为Deno和Cloudflare Workers都遵循标准化的网络平台运行时API。

Denoflare让你在本地提供你的工作者,在一个与Cloudflare运行方式类似的隔离环境中测试你的变化。它支持热重载,能够将工作者直接发布到Cloudflare平台上,在生产中跟踪日志,等等,给开发者带来了很好的体验。

这与使用另一个工作者框架(如Miniflare)有类似的体验,只是它更简单,因为Deno正在做大部分工作。例如,你不必像Miniflare那样依赖Jest,而是可以编写测试,用本地Deno测试运行器运行。

与 Cloudflare 和 Denoflare 合作

体验Cloudflare和Denoflare的最好方法是通过一个真实世界的用例。使用最小的代码,我们将为一个博客设置A/B测试。一半时间,用户将被放入测试组,并将看到一个新的标题。其他人将被放入控制组,不会看到新的标题。

使用Cloudflare Workers,这就像拦截对博客原服务器的请求一样简单,根据我们的分割将用户放入一个组,并将响应头Set-Cookie ,并设置组名。完成这些后,我们的博客可以读取cookie来决定显示哪个头。

我们省略了在博客中改变标题所需的代码,因为有几种不同的方法可以做到这一点。

设置您的 Cloudflare Workers 账户

我们必须做的第一件事是注册一个Cloudflare账户,并设置好Cloudflare Workers

完成后,创建一个免费的 .dev 子域,用于测试我们的工作者。我们将选择免费计划。

Set Up Cloudflare Workers Subdomain

创建一个免费的 .dev 子域用于测试。

注意:您可以稍后将其改为您在生产中使用的域名。

Denoflare 需要一个 API 令牌,以允许我们将编译的 Worker 推送到 Cloudflare。转到 Cloudflare 仪表板中的令牌页面,选择创建令牌。在那里,你应该选择编辑Cloudflare工作者作为模板。注意这个令牌,以便以后使用。

从概览屏幕上,复制账户ID,以便以后使用。

使用Denoflare开发

Deno提供了一个很好的开发体验,在使用Denoflare时,我们将保持其完整性。

注意:你可以在这个GitHub repo中找到所有的代码

首先,设置Deno的版本,并使用asdf将其安装在你的本地机器上。

echo "deno 1.16.0" > .tool-versions && brew install asdf && asdf plugin add deno && deno install

让我们配置一下我们的IDE。如果你使用的是Visual Studio Code,你会对Deno有很好的体验。安装Deno扩展,它可以在这里找到。它可以实现类型检查、提示等功能。

要启用它,你必须在工作区设置文件中把它打开,网址是.vscode/settings.json

{
  "deno.enable": true
}

接下来,我们将安装Velociraptor,一个Deno的脚本管理器。Velociraptor使所有开发人员在执行普通任务时都能轻松使用相同的脚本(想想npm脚本)。

在你的控制台中运行这个命令。

deno install -qAn vr https://deno.land/x/velociraptor@1.3.0/cli.ts

我们将定义一个Velociraptor脚本来调用Denoflare CLI,使我们能够运行Denoflare命令,如servepush

{
  "scripts": {
    "denoflare": "deno run --unstable --allow-read --allow-net --allow-env https://raw.githubusercontent.com/skymethod/denoflare/v0.3.3/cli/cli.ts"
  }
}

现在我们有了我们的IDE和环境运行时间的设置,我们可以进入到代码中。在Deno中,通常在一个名为deps.ts 的文件中声明所有的依赖关系。这是因为模块是由URL定义的,如果分散在项目的各个地方,会变得难以管理。

我们需要一种 Cloudflare Workers 的类型,这是 Denoflare 定义的。

export type { IncomingRequestCf } from "https://raw.githubusercontent.com/skymethod/denoflare/v0.3.0/common/cloudflare_workers_types.d.ts";

一旦我们有了这种类型,我们就可以在index.ts 中编写我们的A/B测试器逻辑。

import { IncomingRequestCf } from "./deps.ts";

/**
 * Based on the A/B Testing Cloudflare Worker example.
 * Ref: https://developers.cloudflare.com/workers/examples/ab-testing
 */
function fetch(request: IncomingRequestCf): Response {
  const NAME = "experiment-0";

  const TEST_RESPONSE = new Response("Test group");
  const CONTROL_RESPONSE = new Response("Control group");

  // Determine which group this requester is in.
  const cookie = request.headers.get("cookie");
  if (cookie && cookie.includes(`${NAME}=control`)) {
    return CONTROL_RESPONSE;
  } else if (cookie && cookie.includes(`${NAME}=test`)) {
    return TEST_RESPONSE;
  } else {
    // If there is no cookie, this is a new client. Choose a group and set the cookie.
    const group = Math.random() < 0.5 ? "test" : "control"; // 50/50 split
    const response = group === "control" ? CONTROL_RESPONSE : TEST_RESPONSE;
    response.headers.append("Set-Cookie", `${NAME}=${group}; path=/`);

    return response;
  }
}

export default {
  fetch,
};

最后一步是声明一个.denoflare 文件,Denoflare 用它来运行和发布你的 Cloudflare Worker。

{
  "$schema": "https://raw.githubusercontent.com/skymethod/denoflare/v0.3.3/common/config.schema.json",
  "scripts": {
    "a-b-test-local": {
      "path": "index.ts",
      "localPort": 3030
    }
  },
  "profiles": {
    "account1": {
      "accountId": "INSERT_ACCOUNT_ID_FROM_PREVIOUS_STEP",
      "apiToken": "INSERT_API_TOKEN_FROM_PREVIOUS_STEP"
    }
  }
}

这就是了!让我们在本地为 Cloudflare 工作者提供服务,以确保一切工作正常。

vr denoflare serve a-b-test-local

这应该是输出结果。

Compiling https://raw.githubusercontent.com/skymethod/denoflare/v0.3.3/cli-webworker/worker.ts into worker contents...
Compiled https://raw.githubusercontent.com/skymethod/denoflare/v0.3.3/cli-webworker/worker.ts into worker contents in 277ms
runScript: index.ts
Compiled index.ts into module contents in 142ms
worker: start
Started in 456ms (isolation=isolate)
Local server running on http://localhost:3030

现在,打开浏览器,转到localhost:3030 。你会看到,响应是用户被放入的组。

Test Group

测试应用程序

由于 Cloudflare Workers 是 Deno 应用程序,我们可以使用其工具来验证和测试我们的代码。所有这些都是在你在 Visual Studio Code 中开发时自动运行的,这要感谢你安装的扩展。

运行Deno linter与。

deno lint

确保Deno应用程序的编译是用:

deno compile index.ts

编写一些测试并运行它们。

deno test index.test.ts

部署 Cloudflare Workers

一旦你在Denoflare配置中获得了正确的账户ID和令牌,你在部署Cloudflare Workers时应该不会有什么问题(.denoflare)。

默认情况下,Denoflare 会将您的工作者推送到您为账户设置的 .dev 子域。

通过运行,将其部署到 Cloudflare 实例。

vr denoflare push a-b-test-local

您应该看到工作者立即出现在您的工作者仪表板上。

Worker Dashboard

默认情况下,其公共访问被禁用。转到服务详情页面,启用该途径。

Enabling Route

当你走这条路时,你应该看到一个响应,说明这个请求被放入哪个组。

Control Group

结论

Denoflare 是围绕 Deno 构建的一个简单的迷你框架,允许我们轻松发布 Cloudflare Workers。

由于它实现Web标准API的方式以及与Cloudflare Workers在安全模型上的相似性,Deno是一个自然的选择。Cloudflare Workers是将中间件逻辑部署到靠近用户使用你的应用程序的云中的一种强大方式,因为他们的边缘CDN战略,他们在全球范围内部署了工人。

请看一下Cloudflare团队整理的其他例子,这样您就可以更好地了解它还可以用来做什么。

The postDevelop, test, and deploy Cloudflare Workers with Denoflareappeared first onLogRocket Blog.