Cloudflare Workers для статических сайтов: быстрый настройка и кэширование

В современном веб‑разработке скорость и надёжность становятся критически важными. Когда вы храните статические файлы, такие как HTML, CSS и JavaScript, на облачной CDN, вы уже получаете преимущества от edge computing. Но чтобы вывести сайт на новый уровень, нужно добавить Cloudflare Workers – тонкое решение, которое позволяет обрабатывать запросы прямо на границе сети, передавая только нужные данные клиенту. В этой статье мы покажем, как cloudflare workers static site использовать для статического сайта, развернуть Worker, подключить кэширование и оптимизировать производительность.

Разбор задачи

Когда сайт состоит из статических файлов, его основная цель – быстро отдавать контент пользователю, минимизируя задержки. Кэширование в Cloudflare позволяет хранить файлы на кластере edge‑серверов, но иногда требуется более гибкая логика: динамическое изменение заголовков, добавление «security headers» или легкая обработка API‑запросов. Cloudflare Workers дают возможность прописать эти правила без изменения исходного кода сайта.

Пошаговое решение

1. Создайте аккаунт в Cloudflare и добавьте ваш домен. Убедитесь, что DNS‑записи указывают на Cloudflare. 2. В панели Cloudflare откройте раздел «Workers» и нажмите «Create a Worker». 3. В редакторе Workers вы увидите пример кода, который отдает статический файл из корня вашего сайта. Замените путь на ваш каталог: const url = new URL(request.url); url.pathname = "/static" + url.pathname; 4. Добавьте правила кэширования: addEventListener("fetch", event => { event.respondWith(handleRequest(event.request)); }); async function handleRequest(request){ const cache = caches.default; let response = await cache.match(request); if(!response){ response = await fetch(request); await cache.put(request, response.clone()); } return response; } 5. Установите заголовки «Cache‑Control» с нужной TTL‑сроком, чтобы Edge‑серверы хранили файлы минимум 24 ч. 6. Сохраните и разверните Worker. В настройках маршрута укажите «/*» – теперь все запросы к сайту будут проходить через ваш Worker. 7. Проверьте работу с помощью инструментов Chrome DevTools: убедитесь, что ответы приходят из edge‑серверов и заголовок «CF-Cache-Status» показывает «HIT» после первой загрузки. 8. Для дальнейшего улучшения используйте опцию «Cache Everything» в настройках страницы, чтобы даже HTML‑страницы кэшировались, если они статичны. 9. Если ваш сайт использует API‑эндпоинты, вы можете добавить их в Worker и вернуть данные из внешнего источника, но кешировать ответы по ключу, чтобы снизить нагрузку на бэкенд. 10. Наконец, мониторьте логи Workers, чтобы убедиться, что не возникает ошибок 5xx, и обрабатывайте их через условные блоки return new Response(«Error», { status: 500 });

Рабочий код

// worker.js – простая реализация кэширования статического сайта
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const cacheUrl = new URL(request.url)
  const cacheKey = new Request(cacheUrl, request)
  const cache = caches.default

  // 1. Попытка получить из кэша
  let response = await cache.match(cacheKey)
  if (response) {
    // Добавляем заголовок, чтобы видеть, что пришёл из edge
    response = new Response(response.body, response)
    response.headers.set('cf-cache-status', 'HIT')
    return response
  }

  // 2. Если кэш пуст – делаем запрос к Origin
  response = await fetch(request)

  // 3. Если ответ успешный, сохраняем в кэш
  if (response.status === 200) {
    const cacheResponse = new Response(response.body, response)
    cacheResponse.headers.set('cf-cache-status', 'MISS')
    cacheResponse.headers.set('Cache-Control', 'max-age=86400, stale-while-revalidate=3600')
    event.waitUntil(cache.put(cacheKey, cacheResponse.clone()))
    return cacheResponse
  }

  // 4. Если ошибка – возвращаем оригинальный ответ
  return response
}

Типичные ошибки

• Не включён Worker в нужный регион – Edge‑кеш не будет работать.
• Отсутствие заголовка Cache‑Control – Cloudflare не знает, как долго хранить.
• Неправильные CORS‑заголовки – браузер отклонит ответ.
• Проблемы с таймаутом – если Origin слишком медленный, Worker упадёт.

FAQ

1. Как отключить кэшинг для отдельных файлов?

В Worker можно добавить условие: если request.url.endsWith(‘.js’), просто делаем fetch без cache.put. Это удобно для файлов‑вёрстки, которые меняются часто.

2. Нужно ли писать правила в Workers KV?

Если ваш сайт динамически генерирует контент, KV можно использовать как простую БД, но для чистого статического сайта достаточно Cache API.

3. Как измерить прирост производительности?

См. инструменты Cloudflare Analytics и Google PageSpeed. Сокращение времени до первого байта обычно на 50‑70 % при правильном кэшировании.

Заключение & чек‑лист

• Включить Worker в нужном регионе.
• Добавить правильные Cache‑Control заголовки.
• Проверить CORS‑заголовки.
• Тестировать с разными типами файлов.
• Вести мониторинг в Cloudflare Analytics.