Поиск по сайту:

Как использовать CloudFlare Workers и KV для обслуживания статического сайта

В последние несколько лет происходит инновация в области граничных вычислений. CloudFlare (CF) Workers позволяют запускать серверные приложения JavaScript непосредственно на периферии, ближе всего к потребителю. Будь то простое или сложное приложение, CloudFlare Worker обеспечивает потрясающую производительность без холодного запуска за небольшую часть цены, которую предлагают традиционные бессерверные вычисления.

Наряду с концепцией CF Workers, функция хранилища данных Workers KV (ключ-значение) позволяет сохранять и передавать данные непосредственно работнику. Благодаря этой функции вы можете использовать Workers в качестве базы данных и репозитория файлов, что позволяет обслуживать статические сайты непосредственно с периферии. В этой статье мы подробно рассмотрим, как подготовить новый простой статический сайт, поддерживаемый CloudFlare Workers.

Начиная

В этой статье предполагается, что у вас уже есть учетная запись CloudFlare, и эта учетная запись связана с доменом. Вам также понадобится план Workers Bundled, который предлагает функцию KV. Доступны следующие функции и их отличия от бесплатного плана.

  • Минимальная плата – 5 долларов США и 0,50 доллара США за миллион запросов в месяц.
    • 10 миллионов запросов без дополнительных расходов

    • Бесплатный план предлагает 10 мс.

    • До 100 пространств имен (например, базы данных)
    • 1 ГБ хранилища (0,5 доллара США за каждый дополнительный ГБ)
    • 10 миллионов операций чтения, 1 миллион операций записи, удаления и перечисления
      • 0,50 доллара США за каждый дополнительный 1 миллион операций чтения и 5 долларов США за каждый дополнительный 1 миллион операций записи, удаления и перечисления.

      После того, как вы приобрели план CloudFlare Workers Bundled, вы сможете использовать Workers KV и функцию сайта CloudFlare Workers.

      Инструмент командной строки Wrangler

      Для создания развертывания на сайте CloudFlare создала инструмент командной строки Wrangler. Wrangler требует установки либо через NPM (менеджер пакетов NodeJS), либо через Cargo (менеджер пакетов языка Rust).

      Установка NPM

      npm i @cloudflare/wrangler -g

      Груз

      cargo install wrangler

      Если вы не хотите использовать бинарный файл OpenSSL, включенный в Cargo, вы можете использовать системный OpenSSL, установив его с помощью следующей командной строки. Это уменьшит размер установки.

      обработчик установки груза --features sys-openssl

      Создание сайта

      Теперь, когда у вас установлен Wrangler и куплены Workers, мы можем создать наш сайт. В этом примере мы используем версию Wrangler 1.11.0, в которой представлен более новый и простой метод аутентификации. Это также предполагает, что PowerShell является используемой средой оболочки, но Wrangler будет работать в любой среде, которая поддерживает установку NPM или Cargo.

      Вход в Wrangler и создание сайта

      Во-первых, мы собираемся войти в CloudFlare с помощью Wrangler. Для этого мы используем новую функцию wrangler login. Это предложит открыть веб-страницу, и если вы уже прошли аутентификацию в CloudFlare, аутентификация произойдет очень быстро. В противном случае войдите в систему, и Wrangler автоматически настроит токен API.

      wrangler login

      Как видно из расположения конфигурации, есть файл .toml, который теперь содержит ваш токен API, чтобы упростить все последующие операции.

      Создание сайта

      Далее мы сгенерируем сам сайт. С помощью команды generate мы быстро создадим сайт. На этом этапе также рекомендуется перейти в каталог сайта и создать новый репозиторий с помощью git init. Это необязательный шаг, но настоятельно рекомендуемый.

      wrangler generate --site worker-site

      Структура сайта

      Wrangler создает следующую структуру сайта:

      • public – это статические ресурсы для вашего проекта с файлами index.html и favicon.ico по умолчанию.
      • workers-site — JavaScript, управляющий обслуживанием статического сайта, расположенного в файле index.js. Его не следует редактировать, если только вам не нужно добавить дополнительные функции.
      • wrangler.toml — файл конфигурации, который указывает на информацию об учетной записи и проекте.

      Вы могли заметить предупреждение о необходимости обновить файл проекта wrangler.toml. Как минимум вам потребуется добавить значение account_id в файл wrangler.toml для предварительного просмотра сайта.

      Чтобы получить идентификатор учетной записи, самый простой способ — перейти на панель инструментов CloudFlare, нажать «Рабочие» и найти идентификатор учетной записи.

      Откройте wrangler.toml и измените значение account_id на значение вашей учетной записи CloudFlare.

      Предварительный просмотр сайта

      Чтобы убедиться, что сайт работает правильно, вы можете использовать команду preview из Wrangler, чтобы сгенерировать сайт и отобразить его в браузере. Добавив параметр --watch, любые изменения, которые вы вносите на сайт, будут немедленно отражаться в окне браузера.

      wrangler preview --watch

      Развертывание сайта в рабочей среде

      Следующим шагом будет развертывание этого сайта в рабочей среде. В файле wrangler.toml нужно настроить лишь несколько конфигураций.

      • zone_id — веб-сайт, к которому будет применен Worker.
      • route – куда будет применен Worker.
      • workers_dev — измените это значение на false.

      Вы можете получить zone_id, перейдя на веб-сайт, к которому вы хотите применить Worker, в панели инструментов CloudFlare, перейдя на страницу обзора и найдя идентификатор зоны в разделе API.

      Для настройки маршрута обычно используется один из двух форматов, которые будут обслуживать страницу либо в домене верхнего уровня, либо в поддомене:

      • example.com/*
      • subdomain.example.com/*

      Конечный результат вашей конфигурации wrangler.toml должен выглядеть примерно так:

      name = "worker-site"
type = "webpack"
account_id = "my-account-id"
workers_dev = false
route = "example.com/*"
zone_id = "my-zone-id"

**[**site]
bucket = "./public"

      Наконец, запустите команду publish, чтобы сделать сайт общедоступным и создать рабочий сайт в зоне и определенном маршруте.

      wrangler publish

      Заключение

      Рабочие сайты CloudFlare предлагают мощные функциональные возможности с легким доступом для разработчиков. Статические сайты невероятно быстрые и безопасные из-за отсутствия интерактивности. Это решает не все варианты использования, но простота использования и отсутствие сторонних серверов, необходимых для размещения сайта, делают эту функцию очень привлекательной!