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

CloudFlare

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

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

Начиная

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

  • Минимальная плата 5 долларов США и 0,50 доллара США за миллион запросов в месяц
    • 10 миллионов запросов до того, как потребуются дополнительные расходы
  • Развернуть до 30 сайтов
  • Свободно worker.dev субдомен
  • Время ЦП до 50 мс на запрос
    • Бесплатный план предлагает 10 мс
  • Всегда минимальная задержка
  • Доступ к Рабочим КВ
    • До 100 пространств имен (думаю, базы данных)
    • 1 ГБ хранилища (0,50 доллара США за дополнительный ГБ)
    • 10 миллионов операций чтения, 1 миллион операций записи, удаления и перечисления
      • 0,50 доллара США за 1 дополнительный миллион операций чтения и 5,00 долларов США за дополнительный 1 миллион операций записи, удаления и перечисления

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

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

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

Установка NPM

npm i @cloudflare/wrangler -g

Груз

cargo install wrangler

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

cargo install wrangler --features sys-openssl

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

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

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

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

wrangler login

Функция входа в Wrangler

Войдите в систему, и Wrangler автоматически настроит токен API.

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

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

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

wrangler generate --site worker-site

Перейдите в каталог сайта и создайте новый репозиторий с помощью git init.

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

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

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

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

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

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

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

Откройте wrangler.toml, обновите значение account_id до значения учетных записей CloudFlare.

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

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

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

Используйте команду предварительного просмотра из Wrangler для создания и отображения сайта в браузере.

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

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

  • zone_id — Сайт, на который будет подан заявку Worker.
  • route — Куда будет обращаться воркер.
  • workers_dev — Измените это значение на false.

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

Получите 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 Workers предлагают мощные функциональные возможности с легким доступом для разработчиков. Статические сайты невероятно быстрые и безопасные из-за отсутствия интерактивности. Не все варианты использования решаются этим, но простота использования и отсутствие сторонних серверов, необходимых для размещения сайта, делают эту функцию очень привлекательной!

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.