[译] 用 Workers 让静态网站动态化

• 原文地址：Using Workers To Make Static Sites Dynamic
• 原文做者：Guest Author
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：MeFelixWang
• 校对者：Park-ma

如下是 Gambling.com 集团首席开发人员 Paddy Sherry 的客座文章。他们使用 Cloudflare 为全球受众提供服务，构建绩效营销网站和工具。Paddy 是一位网站性能狂热爱好者，且对无服务器计算很感兴趣。

选择在大型站点网络上使用的技术是必须正确的关键架构决策。咱们构建静态网站，但须要找到一种方法让它们动态地执行地理定位、访问限制和 A/B 测试等操做。这篇文章分享了咱们在使用 Workers 解决这些挑战时学到的经验。

咱们的背景

在 Gambling.com 集团，咱们在全部网站上都使用 Cloudflare，所以咱们对 Workers 的好奇心水平高于大多数人。咱们是静态网站的忠实粉丝，由于没有什么比纯 HTML 更快。咱们一直在寻找这样的技术并应用于部分测试计划，所以是最早得到该功能的人之一。

咱们如此热衷于试验 Workers 的缘由是，对于任何运行静态站点的人来讲，99％ 的时间均可以知足产品要求，但总有一次须要进行一些计算而不是发回静态响应。

直到最近，最合适的选择是添加一些在页面加载后触发的 JavaScript，并改变 UI 或从端点获取数据。这样作的缺点是用户在加载后会看到页面移位，即便脚本是异步加载的。闪烁的页面可能使人愤怒，没有什么比尝试点击连接但打开了别的东西更使人恼火，由于 DOM 在中途改变了。

一个常见的解决方法是隐藏页面内容，直到全部 JavaScript 都已处理完毕，但这会让你停留在一个缓慢加载的脚本，并且用户在浏览器完成下载以前会看到一个空白页。即便全部脚本都迅速下载，也会有网速较慢或远离数据中心的用户能够响应他们的请求。

输入 Cloudflare Workers。开发人员能够处理这些请求，并在它们到达服务器以前动态响应。没有延迟加载计算，Workers 在后台响应很是快，过渡基本不可见。

咱们的 Workers 用例

自使用 Workers 以来，咱们一直在尝试各类方法，在不改变咱们为网站网络提供的全部智能技术的前提下使咱们的静态网站更加动态化。

地理定位

咱们以多种语言在全球运营静态网站，并使用 Cloudflare 为其提供服务。用户经过谷歌搜索或点击互联网上其余地方的连接到达网站。一般，他们登录的网站可能和兴趣不彻底匹配，由于他们点击的连接并未指向最佳位置。例如，加拿大的用户登录英国网站，看到英镑而不是加拿大元的价格，或者意大利的一我的登录美国网站看到的是英文内容而不是意大利文。

静态网站的难题在于页面加载速度异常快，一旦到达站点，咱们就没法根据用户的偏好定制体验了。

有了 Workers，咱们能够经过读取边缘的请求报头来解决这个问题。Cloudflare 检测传入请求的原始 IP，并将两个字母的国家代码附加到名为 “Cf-Ipcountry” 的报头中。咱们能够编写一个简单的 worker 来读取此报头，检查国家代码，而后重定向到相应的站点版本（若是存在的话）。

addEventListener('fetch', event => {
 event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {

   const country = request.headers.get('Cf-Ipcountry').toLowerCase() 
   let url = new URL(request.url)

   const target_url = 'https://' + url.hostname + '/' + country
   const target_url_response = await fetch(target_url)

   if(target_url_response.status === 200) {
       return new Response('', {
         status: 302,
         headers: {
           'Location': target_url
         }
       })     
   } else {
       return response
   }
}
复制代码

用户如今正在获取该网站的本地化版本，这能更好地为他们的兴趣服务，而且跳出率更低，由于内容是根据他们的位置定制的。

限制对内容的访问

对于大多数网站，有时页面须要在线但不向公众开放。例如，代理商在最终获准以前向客户展现的新登录页。

在某些状况下，公司可能须要多层安全措施来保护其知识产权并避免在准备就绪以前让用户看到某些内容，但对于大多数状况而言，只须要隐藏信息并不须要军事级别的安全性。

使用内容管理系统，这很容易作到，但静态站点很难实现。使用 Workers，咱们可以拼凑一个简单的解决方案阻止访问页面，除非请求中存在某个也能够用于查找参数的报头。

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request))
})

async function fetchAndApply(request) {  
  var ua = request.headers.get('user-agent');
    let url = new URL(request.url);

    if (ua.indexOf('MY-TEST-STRING')) {
        return fetch(request)
    } else {
        return new Response('Access Denied',
            { status: 403, statusText: 'Forbidden' })
    }
}
复制代码

如今能够向公众隐藏页面，而无需对安全性或身份验证技术进行大量投入，但对于须要进行这些限制的人来讲仍然很容易访问。

A/B 测试

优化流量的重要工具须要从 A/B 测试中领悟。虽然不缺少功能强大的 A/B 测试工具，但大多数都须要添加一个在页面加载后改变 UI 的 JavaScript。在最佳条件下，这多是肉眼没法察觉的，但并不是全部用户都具备最佳的网速，而且有些用户在页面加载后会经历闪烁。如上所述，这是一种带有负面后果的糟糕经历。

咱们可以经过调用 A/B 测试脚本 URL 的 Worker 来解决这个问题，在将更改后的响应发送给用户以前获取代码并从新绘制 UI。结果是用户在页面加载时看到变体，而且在第一个像素渲染后不会有任何移动。

为何 Workers 为咱们消除了障碍

Workers 容许咱们让静态网站变得动态化。固然，咱们能够经过延迟加载 JavaScript 完成此操做，但用户的体验会不好。

第二种选择是迁移到服务器渲染的站点，但即便有这样的架构转换，也很难在全球拥有足够的服务器来为全部位置的用户提供相同的体验。进行这样的改变也是一项重大的 IT 投资。

另外一方面，Workers 能够插入到咱们的架构顶部，无需安装或添加。这是一个单击 Cloudflare 仪表板中的按钮并当即访问 Worker 乐园的问题。在探究任何新技术或供应商时所形成的臭名昭著的时间浪费并无发生在商定试验或创建开发环境时。

为何咱们选择 AWS Lambda 上的 Workers

值得注意的是，Workers 不是无服务器计算的惟一选择，由于这是行业广泛的发展方向。虽然 AWS Lambda 是一个强有力的竞争者，但咱们选择了 Workers，由于 Lambda 须要与更多 AWS 服务集成才能启动，而最近的性能测试代表 Workers 比 Lambda 更快。

虽然咱们可能由于不一样需求选择了 AWS，但 Workers 仍然更容易启动，且运行迅速。

咱们但愿看到的改进

尽管咱们得到了压倒性的批准，但咱们仍是但愿看到一些额外的东西。

除非你有企业计划，不然帐户当前能够访问单个 Worker 脚本。这意味着许多不相关的代码存放在一个文件中，虽然这自己并不罕见，可是 Worker 只能触发单个 URL 模式。若是想要只在一些页面上触发功能，这可能会有限制，而且意味着你的 Worker 代码中会有一系列 if 语句，用于肯定什么时候触发它。这不是不可行的，但也不是理想的场景。

随着 Worker Recipe 交换的增加，以及 Cloudflare 继续构建出更多内容，咱们期待文档随着更多真实世界的示例而增加。

结论

咱们刚刚开始与 Cloudflare Workers 合做。随着团队知识的增加，咱们能够在适当的时候使用它来知足咱们的产品要求，而且在没有延迟加载 JavaScript 的状况下执行之前不可能的更高级的事情。Workers 仍处于起步阶段，还能够作出改进。咱们将密切关注这些并尝试在新功能发布时找到使用它们的方法。

本指南是一个高级概述。有关更深刻的解释和代码片断，请查看 Cloudflare Workers 的这篇评论，其中详细解释了一些示例。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。