>Zina: /* Установка Wrangler */

2022-05-27T06:32:27Z

Установка Wrangler

Нова сторінка

←[[Cloudflare]]

* [https://developers.cloudflare.com/workers/ Cloudflare Workers documentation]

Требуется [https://workers.cloudflare.com/#plans 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

{| class="wikitable"
|-
! 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 ==

Установите [https://github.com/cloudflare/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

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

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

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

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

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

account_id = ""

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

wrangler dev

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

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

wrangler publish

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

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

* Официальная документация: [https://developers.cloudflare.com/workers/sites/start-from-existing Start from an Existing Site]

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

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

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

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

cd project-name.test

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

wrangler init --site worker-name

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

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

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

* добавьте строку <code>account_id = ""</code>, в кавычки вставьте ID аккаунта, который можно скопируйте в панели https://dash.cloudflare.com/ → выбрать домен → найти в правой колонке '''Account ID'''
* там же скопируйте '''Zone ID''' и вставьте его в <code>zone_id = ""</code>
* измените параметр <code>bucket</code> в строке:<pre>site = {bucket = "public",entry-point = "workers-site"}</pre>где для Hugo <code>bucket = "public"</code>, а если файлы сайта лежат прямо в корне проекта, то <code>bucket = "."</code>

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

wrangler dev

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

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

wrangler publish

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

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

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

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

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

1) https://dash.cloudflare.com/ → '''DNS''' → <kbd>+ Add record</kbd>:

* Type: <code>A</code>
* Name: <code>test</code>
* IPv4 address: <code>192.0.2.1</code>

2) https://dash.cloudflare.com/ → '''Workers''' → <kbd>Add route</kbd>:

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

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

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''' в файл <code>workers-site/index.js</code>:

<source lang="javascript">
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
}
</source>

== Security Headers ==

* [https://scotthelme.co.uk/security-headers-cloudflare-worker/ The brand new Security Headers Cloudflare Worker]
* [https://jarv.is/notes/security-headers-cloudflare-workers/ 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

== См. также ==

* [https://www.cloudflare.com/docs/host-api Cloudflare Hosting Provider API] (возможно, устарело)
* [https://www.smashingmagazine.com/2019/04/cloudflare-workers-serverless/ Going Serverless With Cloudflare Workers] — Smashing Magazine
* [https://www.infoq.com/presentations/cloudflare-workers/ Pick Your Region: Earth; Cloudflare Workers]
* [https://css-tricks.com/how-to-make-a-simple-cms-with-cloudflare-github-actions-and-metalsmith/ How to Make a Simple CMS With Cloudflare, GitHub Actions and Metalsmith] | CSS-Tricks

Cloudflare Workers Sites - Історія редагувань

>Zina: /* Установка Wrangler */