Cache-Control headers 在 Cloudflare Workers 站点中

Question

我只是用 Hugo-created 静态站点测试 Workers 站点。它已经存在，所以我使用文档的说明来调整现有站点。 woff2 和 css 文件的 cache-control headers 都显示为 no-cache，这与我基于 https://support.cloudflare.com/hc/en-us/articles/200172516#h_a01982d4-d5b6-4744-bb9b-a71da62c160a. The Workers site in question is https://hosts-test-hugo.brycewray.workers.dev/ 的预期相反.

我在 https://levelup.gitconnected.com/use-cloudflare-javascript-workers-to-deploy-you-static-generated-site-ssg-1c518e078646 找到了以下内容，但不知道是否相关：

A Cloudflare Worker is a piece of JavaScript code that runs every time you access a specific route on a website proxied by Cloudflare. The code is executed on every request before they reach Cloudflare’s cache. This means Worker responses are not cached (although requests made by the worker to other web services might be cached with the appropriate caching headers).

站点是否需要有一个自定义域——即，而不是“.workers.dev”URL——才能具有正常的缓存行为？这甚至相关吗？

[注意：我在这里发布这个是因为我在 Cloudflare community forum or the Cloudflare subreddit 上没有得到任何回应——希望更好结果在这里。]

Answer 1

再次感谢 Cloudflare 的 Kenton Varda 在这里的回答，否则我会完全陷入困境。我还要感谢 Brian Li 他单独提供的额外且同样有价值的帮助。

为可能觉得有用的其他人添加以下内容。 . .

我遇到的剩下的问题是我不知道如何在离开 HTML 的值要小得多（如 3600 或 0）。然后，几天后，我在 Cloudflare KV-Asset-Handler 存储库的 a comment in Issue #81 中找到了答案。所以，现在，我的 Worker 的 index.js 文件中有以下代码：

  options.cacheControl = {
    browserTTL: 0,
    edgeTTL: 0,
    bypassCache: false // default
  }

  const filesRegex = /(.*\.(ac3|avi|bmp|br|bz2|css|cue|dat|doc|docx|dts|eot|exe|flv|gif|gz|ico|img|iso|jpeg|jpg|js|json|map|mkv|mp3|mp4|mpeg|mpg|ogg|pdf|png|ppt|pptx|qt|rar|rm|svg|swf|tar|tgz|ttf|txt|wav|webp|webm|webmanifest|woff|woff2|xls|xlsx|xml|zip))$/

  if(url.pathname.match(filesRegex)) {
    options.cacheControl.edgeTTL = 2592000
    options.cacheControl.browserTTL = 2592000
  }

如果您查看那个链接的问题评论并想知道有什么不同：唯一的问题是我从扩展列表中删除了 html（并且，为了安全起见，htm）。结果，我的 Worker 站点的 HTML 缓存为零，而每个 CSS、字体或图像文件都有 one-month cache-control 设置——这正是我想要的结果。注意：该网站的绝大多数图片都托管在其他地方，但我仍然托管少量用于网站图标和一般后备。

Answer 2

默认情况下，Workers Sites 不提供 Cache-Control header，但您可以对其进行自定义以提供服务。（编辑澄清：默认情况下，Workers 站点缓存在 Cloudflare 的边缘，并支持“etags”重新验证。Cache-Control header 控制它们是否也被缓存 在浏览器中 而无需重新验证。）

请注意，Workers Sites 的工作方式与将 Cloudflare 与经典源服务器一起使用有很大不同。如果您正在阅读有关 Cloudflare 上的缓存的内容，但它没有特别提到 Workers Sites，那么它可能不适用于 Workers Sites。

使用 Workers Sites，您的站点由 Cloudflare Worker 提供服务——直接在 Cloudflare 服务器上运行的代码。因此，您没有 Cloudflare 背后的“原始”服务器，并且 Cloudflare 的缓存无法正常工作。 Worker 代码完全负责提供内容，包括设置任何 header，如 Cache-Control。

事实上，当您使用 wrangler 创建一个新的 Workers Sites 项目时，这个 Worker 的代码是为您生成的——但您可以编辑它！您可以自定义代码，随心所欲。 Worker 的代码位于 workers-site/index.js 下的项目目录中。代码 looks like this —— 事实上，它被初始化为 GitHub.

中那个文件的副本

此工作代码依赖于名为 @cloudflare/kv-asset-handler to do most of the work. This library can be customized to handle caching in various ways through the cacheControl option.

的库（npm 模块）

但是你在哪里设置这个选项呢？好吧，在你的工人代码中！

打开 workers-site/index.js 并寻找 looks like this:

的部分

async function handleEvent(event) {
  const url = new URL(event.request.url)
  let options = {}

  /**
   * You can add custom logic to how we fetch your assets
   * by configuring the function `mapRequestToAsset`
   */
  // options.mapRequestToAsset = handlePrefix(/^\/docs/)

评论提到了一种方法，您可以使用 options 自定义您网站的服务方式，但您也可以在此处设置 cacheControl。尝试添加：

  options.cacheControl = {
    browserTTL: 3600      // 1 hour
  }

现在 re-deploy 您的站点，您应该会看到资产是通过 Cache-Control: max-age=3600 提供的。当然，这意味着您的内容可能会在人们的浏览器中缓存长达一个小时（3600 秒）；您可能更喜欢更长或更短的时间。

请注意，如果您不是程序员，这一切可能看起来有点令人生畏。 Workers Sites 专为希望能够通过编辑 JavaScript 代码来自定义其网站服务方式的人们而设计。对于那些对编写代码不感兴趣的人，您将仅限于默认行为，这可能适合也可能不适合您的需要。

Cache-Control headers 在 Cloudflare Workers 站点中

Cache-Control headers in a Cloudflare Workers site

cache-control

hugo

static-site

cloudflare-workers