Заголовки Cache-Control на сайте Cloudflare Workers

По умолчанию на рабочих сайтах не отображается заголовок Cache-Control, но вы можете настроить его для этого. (ИЗМЕНИТЬ, чтобы уточнить: рабочие сайты по умолчанию кэшируются на стороне Cloudflare и поддерживают etags для повторной проверки. Заголовок Cache-Control определяет, кэшируются ли они также в браузере. без повторной валидации.)

Обратите внимание, что рабочие сайты работают совсем не так, как Cloudflare с классическим исходным сервером. Если вы читаете что-то о кешировании в Cloudflare, но в нем конкретно не упоминаются рабочие сайты, то, вероятно, это не относится к рабочим сайтам.

С Workers Sites ваш сайт обслуживается Cloudflare Worker - кодом, который запускается непосредственно на серверах Cloudflare. Итак, у вас нет исходного сервера за Cloudflare, и кеш Cloudflare не работает нормально. Код Worker полностью отвечает за обслуживание контента, включая установку любых заголовков, таких как Cache-Control.

Фактически, когда вы создаете новый проект Workers Sites с помощью wrangler, код для этого Worker создается для вас, но вы можете его редактировать! Вы можете настроить код все, что хотите, делать все, что хотите. Код для Worker находится в каталоге вашего проекта в workers-site/index.js. Код выглядит так - - фактически, он инициализируется как копия этого файла с GitHub.

Этот рабочий код зависит от библиотеки (модуля npm), называемой @cloudflare/kv-asset-handler, для выполнения большей части Работа. Эту библиотеку можно настроить для обработки кэширования различными способами с помощью параметра cacheControl.

Но где установить эту опцию? Что ж, в вашем рабочем коде!

Откройте workers-site/index.js и найдите часть, которая выглядит так:

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
  }

Теперь повторно разверните свой сайт, и вы должны увидеть, что ресурсы обслуживаются с помощью Cache-Control: max-age=3600. Конечно, это означает, что ваш контент может кэшироваться в браузерах людей до часа (3600 секунд); вы можете предпочесть более длительный или более короткий период.

Обратите внимание: если вы не программист, все это может показаться немного сложным. Рабочие сайты действительно предназначены для людей, которые хотят иметь возможность настраивать обслуживание своих сайтов, редактируя код JavaScript. Для тех, кто не заинтересован в написании кода, вы будете ограничены поведением по умолчанию, которое может соответствовать вашим потребностям, а может и не соответствовать.

Еще раз спасибо Кентону Варде из Cloudflare за его ответ, без которого я бы полностью застрял. Я также благодарен Брайану Ли за дополнительную и не менее ценную помощь, которую он оказал отдельно.

Добавляем следующее для тех, кому это может пригодиться. . .

Оставшаяся проблема, с которой я столкнулся, заключалась в том, что я не знал, как назначать разные значения cache-control (например, один месяц или 2592000) большинству статических ресурсов, оставляя HTML с гораздо меньшим значением (например, 3600 или 0). Затем, несколько дней спустя, я нашел ответ в комментарии в выпуске №81 репозитория Cloudflare KV-Asset-Handler. Итак, теперь у меня есть следующий код в index.js файле моего Worker'а:

  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) из списка расширений. В результате HTML моего рабочего сайта не кэшируется, в то время как для каждого файла CSS, шрифта или изображения установлен cache-control месячный cache-control параметр - именно это и есть желаемый результат. Примечание. Подавляющее большинство изображений на сайте размещено в других местах, но я все еще размещаю небольшое количество изображений для значков и резервных объявлений в целом.