Vercel 无服务器函数与 Cloudflare Workers-MyLoo科技网

TLDR

Vercel 为无服务器函数提供了一个很好的可靠解决方案,并使它们的创建过程无缝且轻松。

Cloudflare Workers 提供了更多开箱即用的功能(例如键值数据存储、CRON),并且看起来更加成熟和复杂。

在我们继续之前

我所有的结论和发现都基于 Vercel 和 Cloudflare 提供的官方文档,以及我在这两个平台上的经验。

我保留错误的权利。如果你找到任何东西,请告诉我。

简介

自Moiva开发开始以来,我一直在使用Vercel。它有助于快速引导和开发 Moiva。我非常感谢 Vercel 的开发人员,他们在那里做得很好。

Vercel本质上是一种将静态网站自动部署到全球数据中心网络的解决方案。 Vercel 并没有止步于此,它为无服务器功能提供了一个非常出色且流畅的解决方案。

随着 Moiva 的进一步发展,我积累了一系列对无服务器功能的要求,不幸的是 Vercel 没有满足这些要求。因此,我环顾四周,发现Cloudflare Workers。

我试了一下,我喜欢它。两周后,我所有的无服务器功能都迁移到了那里。

Cloudflare Workers基本上是一个将无服务器功能部署到全球数据中心网络的平台。他们的文档说也可以使用 Workers 来部署静态应用程序,但我还没有研究或评估它。我知道 Cloudflare 还在研究另一种部署/托管静态应用程序的解决方案 -Cloudflare Pages。

我认为我的发现可能会引起其他人的兴趣。开始了!

无服务器函数请求处理

Vercel 和 Cloudflare Workers 处理无服务器函数请求的高级情况有所不同。我认为以解释每个平台的工作原理并突出差异开始比较是有意义的。

首先,这两个平台都使用分布在全球的数千台服务器的所谓边缘网络。

在 Cloudflare Workers 中,部署期间的每个功能都会在每个数据中心中复制。每个请求都经过负载平衡并路由到最近的数据中心,该数据中心执行该函数并将响应发送回用户。

[ Cloudflare 边缘网络图显示了用户无服务器功能请求如何传播 ](https://res.cloudinary.com/practicaldev/image/fetch/s–mvX6h6hf–/c_limit%2Cf_auto%2Cfl_progressive %2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eatnfqdj07kq21twq5z4.png)

需要注意的是,函数会在每个请求上执行,即使响应已被缓存。缓存在更深更细的级别上工作:

函数的传出子请求被自动缓存。
开发人员可以利用 Cloudflare 的Cache API来缓存响应并在进一步的请求中使用它。在计算量大的情况下,它会特别方便。

Vercel 不会在 Free 和 Pro 帐户中跨其网络复制 Functions – Functions 只能部署到一个特定区域。企业计划用户可以为无服务器函数指定多个区域。

与 Cloudflare 类似,每个请求都被路由到最近的数据中心。相似之处到此结束,正在处理以下步骤:

如果数据中心对请求有缓存,那么缓存的响应会立即发回给用户。函数未执行。请求处理完成。
如果数据中心没有Function,那么它会找到最近的拥有它的数据中心并将请求转发到那里。
函数被执行,响应被发送回原来的服务器。
原服务器缓存响应(根据开发者指定的headers)并将响应返回给用户。

请求行程时间

速度是 Serverless Functions 的一个重要特征。它是通过将响应传递给用户所需的时间来衡量的。

它的组成部分之一是旅行时间。请求花费的时间越少越好。

正如我们在上面看到的,Cloudflare Workers 将每个请求路由到最近的数据中心,该数据中心对其进行处理并将响应发回。 Cloudflare表示其网络遍及 100 多个国家/地区的 200 多个城市。这保证了最少的旅行时间。

[ Vercel 无服务器函数与 Cloudflare Workers插图3 ](https://res.cloudinary.com/practicaldev/image/fetch/s–CWR-tnnn–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/8gbgirn44wu5lodp5p9z.png)

来自Cloudflare 网站的屏幕截图,其中包含显示 Cloudflare 网络数据中心位置的世界地图

Vercel 的网络密度明显较低,跨越的位置少于 20 个位置。这意味着平均请求将花费更多时间旅行。

此外,只有在预先存在缓存的情况下,请求才会在最近的服务器上结束。其他时候,正如我们在上面看到的,请求将被进一步转发到包含函数的数据中心。它削弱了拥有全球数据中心网络的所有优势。

函数执行时间

请求/函数执行时间是速度的另一个主要组成部分。

这在很大程度上取决于是否已经缓存数据。

如前所述,Vercel 和 Cloudflare 中的缓存处理方式不同。

无论是否有缓存数据,Cloudflare Worker 都会始终执行 Function。另一方面,如果函数具有有效的缓存数据,则 Vercel 永远不会执行该函数。

我们可以想象它会影响执行时间,但影响不大,因为 Cloudflare 限制了它(有关详细信息,请参阅下面的限制部分)。

在没有缓存数据的情况下,执行时间取决于运行时环境的引导速度以及可用的运行时资源(如内存和 CPU)以及函数是“HOT”还是“COLD”(仅适用于 Vercel)。

Cloudflare 在底层使用 Google 的V8 引擎并在 V8 Isolates 的上下文中执行函数。 Cloudflare声称它的方法比其他 Functions 实现更高效,并且消除了虚拟机模型的冷启动:

通过为每个 Workers 函数调用创建隔离,Worker 进程能够运行基本上无限的脚本,几乎没有单独的开销。任何给定的隔离都可以比容器或虚拟机上的节点进程快大约一百倍。值得注意的是,在启动时隔离消耗的内存要少一个数量级。

Vercel 使用云提供商 Amazon 和 Google 来执行函数,并原生支持 NodeJS、Go、Python 和 Ruby 环境。热靴/冷靴适用于此:

如果随后的请求很快发生,则该函数被重新用于新的调用(热启动)
否则,函数从头开始启动(冷启动)

Vercel说他们的配置提供“几乎即时”的冷启动:

云提供商允许各种不同大小的功能,但我们选择了一种与使面向用户的工作负载(例如服务 HTTP 流量)的冷启动实例几乎即时的一致

DX 和易于开发/部署

如果您使用 Vercel 来部署您的网站,那么添加一个新的无服务器功能就像在/api文件夹下添加一个新的类似 NodeJS Express 的脚本(或用不同的语言脚本编写)一样简单。

Vercel 无服务器功能也可以在本地开发环境中开箱即用。

Vercel 在这里实现了出色的开发人员体验 (DX)。

如果您使用 Vercel 进行网站部署,但想使用 Cloudflare Workers for Serverless(像我一样),那么您需要学习和处理更多的事情:

如何编写脚本以及可用的API
缓存是如何工作的,你应该自定义它还是自动设置就足够了
如何从存储库设置自动部署
如何组织存储库中的函数
您应该使用并设置自定义域还是 Cloudflare 提供的域就足够了

Cloudflare 提供了非常棒的文档,其中包含许多易于理解的示例和适用于不同用例的“初学者”(GitHub 存储库)。

它还提供了一个Playground来预览、调试和开发你的功能。我发现它非常有用并且经常使用它。

[ Vercel 无服务器函数与 Cloudflare Workers插图4 ](https://res.cloudinary.com/practicaldev/image/fetch/s–BoAunBGt–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads。 s3.amazonaws.com/uploads/articles/ulutt7nnkdxlwxicf451.png)

Cloudflare Workers 游乐场的屏幕截图

缓存管理

Vercel 和 Cloudflare Workers 中的缓存始终位于区域(数据中心)的本地。

Vercel 的 缓存配置仅限于在 Function 的响应上设置Cache-Control标头。 Vercel 在这里建议不要使用浏览器缓存,而是依赖 Vercel 的网络缓存。因此配置主要归结为设置缓存时间。此外,关于何时可以使用缓存有很多限制(例如响应状态代码和请求方法、请求标头)。

在提供缓存响应时,Vercel 不会让函数有机会执行并对缓存响应进行任何更改,或者例如记录请求。

每次新部署时,Vercel 都会自动使缓存失效。因此,如果需要使缓存无效,开发人员需要重新部署他们的应用程序。

Cloudflare 提供了更加灵活和精细的缓存配置,并且对于缓存的工作方式有不同的思维模型。

大多数时候,函数没有繁重的计算,它们大部分时间都在等待子请求的响应。

认识到这一点,Cloudflare 在每个请求上运行 Functions,并为出站 Function 子请求提供自动缓存。开发者可以通过提供特定配置来修改子请求缓存行为。

我认为每次对每个请求都运行一个函数是区分 Cloudflare Workers 和 Vercel 的一个非常重要的特性。它允许您将内容记录到第三方服务并进行一些分析。

Cloudflare 还涵盖了函数确实具有大量计算的情况。开发人员可以访问 Cache API 来存储函数响应并在未来的请求中使用它。开发人员可以自由定义缓存的方式和时间,使用什么以及何时删除缓存的值,在发送响应之前自由修改缓存的值。 Cloudflare 提供了很好的文档和示例开始。

async function handleRequest(event) { const request = event.request const cacheUrl = new URL(request.url) // Construct the cache key from the cache URL const cacheKey = new Request(cacheUrl.toString(), request) const cache = caches.default // Check whether the value is already available in the cache // if not, you will need to fetch it from origin, and store it in the cache // for future access let response = await cache.match(cacheKey) if (!response) { // If not in cache, get it from origin response = await fetch(request) // Must use Response constructor to inherit all of response's fields response = new Response(response.body, response) // Cache API respects Cache-Control headers. Setting s-max-age to 10 // will limit the response to be in cache for 10 seconds max // Any changes made to the response here will be reflected in the cached value response.headers.append("Cache-Control", "s-maxage=10") // Store the fetched response as cacheKey // Use waitUntil so you can return the response without blocking on // writing to cache event.waitUntil(cache.put(cacheKey, response.clone())) } return response }

进入全屏模式退出全屏模式

(代码片段取自https://developers.cloudflare.com/workers/examples/cache-api)

键值数据存储

Cloudflare Serverless Functions 有一个非常好的独特功能 – 它们可以访问全局、低延迟、键值数据存储。对该存储的更改会传播到所有其他边缘位置并成为全局可见的。该商店不会取代数据库,但在某些情况下可以很好地工作。我认为它是一个全球可用的缓存。也可以手动(通过 CLI 界面)或在部署期间预填充该存储。开发人员可以在那里定义值的生命周期,以确保它们在特定时刻被自动丢弃。

编程语言

Cloudflare 仅支持一种运行时 – Chrome 的V8。因此,它原生支持 JavaScript。对于 Kotlin、PHP、Python 等许多语言,可以将程序编译为 JavaScript。所以开发人员也可以用这些语言编写函数,他们只需要编译到 JavaScript 步骤。

Cloudflare 并不止于此,它还为 Web Assembly](https://blog.cloudflare.com/webassembly-on-cloudflare-workers/)提供[支持。这意味着 C、C++、Rust 和 Go 等编译语言也可用于编写函数。

Vercel正式支持4 种不同的语言运行时 – NodeJS、Go、Python 和 Ruby。

Vercel 还允许使用不同的语言创建自定义运行时。有一些可用的社区运行时具有官方 Vercel 的建议:Bash、Deno、PHP 和 Rust。

计划调用 (Cron)

Cloudflare 具有内置支持用于函数的预定调用。

Vercel 没有对计划任务的内置支持,建议使用第三方服务。

记录到第三方服务

通常需要以非阻塞方式与第 3 方服务进行通信——您向用户发送响应,同时向某些第 3 方服务发送数据,例如收集一些统计数据。

无服务器函数的问题在于它们的生命周期非常有限,并且运行时可能会在处理通信之前关闭。

Cloudflare 提供了一个waitUntil()挂钩来通知运行时等待运行时间超过发送响应所需时间的任务。例如,它用于将数据写入缓存。

if (!response) { // If not in cache, get it from origin response = await fetch(request) // Must use Response constructor to inherit all of response's fields response = new Response(response.body, response) // Cache API respects Cache-Control headers. Setting s-max-age to 10 // will limit the response to be in cache for 10 seconds max // Any changes made to the response here will be reflected in the cached value response.headers.append("Cache-Control", "s-maxage=10") // Store the fetched response as cacheKey // Use waitUntil so you can return the response without blocking on // writing to cache event.waitUntil(cache.put(cacheKey, response.clone())) } return response

进入全屏模式退出全屏模式

(代码片段取自https://developers.cloudflare.com/workers/examples/cache-api)

在 Vercel‘s Functions 中,我尝试将日志错误设置到 Sentry 并将数据记录到某个数据库,但它的工作无法预测 – 有时它有效,有时它没有。我在日志中也遇到了奇怪的错误。我花了一些时间才意识到问题是一旦发送响应,运行时就会停止工作。