Cloudflare Workers Sites

←Cloudflare

• Cloudflare Workers documentation

Требуется Workers Paid plan — 5$ в месяц:

Free:

• Deploy up to 30 Worker scripts
• Runs on all 250 network locations
• Free workers.dev subdomain
• Up to 10ms CPU time per request
• Lowest latency after the first request

Paid — Everything in Free, plus:

• Up to 30s wall time per request
• Always lowest latency
• Additional Workers KV edge storage

Paid	Free
1 GB - Key-value storage space	1 GB - Key-value storage space
10M - Key-value reads per month	100,000 - Key-value reads per day (3M per month)
1M - Key-value writes per month	1,000 - Key-value writes per day (0,03M per month)
1M - Key-value deletes per month	1,000 - Key-value deletes per day (0,03M per month)
1M - Key-value lists per month	1,000 - Key-value lists per day (0,03M per month)

Old:

• up to 30 sites
• Free workers.dev subdomain
• 1 gigabyte of storage
• Runs on all 194 data centers

Установка Wrangler

Установите Wrangler:

sudo npm install @cloudflare/wrangler -g --unsafe-perm=true --allow-root

Авторизация Wrangler

Есть два способа авторизации:

— через браузер:

wrangler login

— через создание токена на https://dash.cloudflare.com/profile/api-tokens (в правой колонке Get your API token) и затем вставку его в команду:

wrangler config

В обоих случаях данные авторизации сохраняются в файле ~/.wrangler/config/default.toml

Создание простого сайта в Cloudflare Workers

Перейдите в корень вашей папки проектов и создайте новый проект test-worker:

wrangler generate test-worker
cd test-worker
vim wrangler.toml

Откройте https://dash.cloudflare.com/ → Workers → Manage Workers и скопируйте Account ID. Вставьте его во wrangler.toml:

account_id = ""

Запустите сервер для локального тестирования:

wrangler dev

В терминале будет показан локальный URL, по которому можно открыть проект в браузере: http://localhost:8787/

Выполните деплой сайта в Cloudflare Workers:

wrangler publish

Будет показан URL, по которому сайт можно открыть из интернета, типа: https://test-worker.zina.workers.dev/

Перенос существующего статичного сайта на Cloudflare Workers

• Официальная документация: Start from an Existing Site

Создайте в Cloudflare новый воркер:

https://dash.cloudflare.com/ → Workers → Create a Service

Для имени создаваемого воркера есть ограничения — только латиница, цифры и дефисы.

Перейдите в папку вашего проекта:

cd project-name.test

Инициализируйте проект Wrangler:

wrangler init --site worker-name

где worker-name — имя воркера, созданного на первом шаге.

Будут созданы папка workers-site и файл wrangler.toml.

Отредактируйте файл wrangler.toml:

• добавьте строку account_id = "", в кавычки вставьте ID аккаунта, который можно скопируйте в панели https://dash.cloudflare.com/ → выбрать домен → найти в правой колонке Account ID
• там же скопируйте Zone ID и вставьте его в zone_id = ""
• измените параметр bucket в строке:

  site = {bucket = "public",entry-point = "workers-site"}

  где для Hugo bucket = "public", а если файлы сайта лежат прямо в корне проекта, то bucket = "."

Теперь протестируйте воркер — запустите его локальный сервер:

wrangler dev

и откройте в браузере http://localhost:8787/

Выложим сайт на тестовый адрес на Cloudflare. Проверьте в файле wrangler.toml параметр workers_dev — чтобы тестовый адрес работал, должно быть указано workers_dev = true

wrangler publish

Сайт станет доступен на автоматически созданном субдомене https://<worker-name>.<account-name>.worker.dev

Worker на собственном домене

https://dash.cloudflare.com/ → Workers → ваш воркер → Triggers → Add route

Чтобы выложить сайт на собственный домен, нужно добавить route в админке и прописать его в конфиге.

Для примера настроим домен test.zina.dev.

1) https://dash.cloudflare.com/ → DNS → + Add record:

• Type: A
• Name: test
• IPv4 address: 192.0.2.1

2) https://dash.cloudflare.com/ → Workers → Add route:

• Route: test.zina.dev/*
• Worker: выбрать наш worker

3) Отредактировать wrangler.toml:

workers_dev = false
route = "test.zina.dev/*"

Опубликовать сайт:

wrangler publish

Оптимизация под Google PageSpeed Insight

• Источник: https://stackoverflow.com/questions/64254291/cache-control-headers-in-a-cloudflare-workers-site

Чтобы GPSI не ругался на Browser Cache TTL, добавьте browserTTL в файл 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 = {
    browserTTL: 31556926      // 1 year
  }

Security Headers

• The brand new Security Headers Cloudflare Worker
• Adding Security Headers Using Cloudflare Workers – Jake Jarvis
• https://github.com/securityheaders/security-headers-cloudflare-worker/blob/master/worker.js
• https://gist.github.com/publicarray/193da174328a7c28ee9d20dff1f0642f
• https://gitlab.com/snippets/1972599
• https://github.com/jakejarvis/jarv.is/blob/ededcc05c4a5b2650d5a7eb6f8d00496b61221e3/worker.js

См. также

• Cloudflare Hosting Provider API (возможно, устарело)
• Going Serverless With Cloudflare Workers — Smashing Magazine
• Pick Your Region: Earth; Cloudflare Workers
• How to Make a Simple CMS With Cloudflare, GitHub Actions and Metalsmith | CSS-Tricks