🥇Як зробити статичний сайт на Cloudflare Workers Sites

Вітання! Мене звуть Діма, я техлід SysOps-команди у Wrike. У цій статті я розповім, як за 10 хвилин та 5 доларів на місяць зробити максимально близький до користувача сайт та автоматизувати його деплою. Стаття майже не має відношення до тих проблем, які ми вирішуємо усередині нашої команди. Це, скоріше, мій особистий досвід та враження від знайомства з новою для мене технологією. Я постарався описати кроки максимально докладно, щоб інструкція виявилася корисною для людей із різним досвідом. Сподіваюся вам сподобається. Поїхали!

Отже, можливо, ви вже знайшли для себе простий та дешевий спосіб хостингу сайту. Можливо навіть безкоштовний, як описано в цій чудовій статті.

Але раптом вам все одно нудно і хочеться торкнутися чудового нового світу технологій? Скажімо, ви думаєте про автоматизацію розгортання і хотіли б максимально прискорити сайт? У цій статті ми будемо використовувати Хьюгоале це не обов'язково.

Для автоматизації ми використовуємо CI/CD Gitlab, але що робити з прискоренням? Давайте розгорнемо сайт безпосередньо в Cloudflare за допомогою Worker Sites.

Що потрібно для старту:

Gitlab (ваш власний або хмарний)
Аккаунт на Cloudflare
встановлений nodejs/npm

Частина 1: Установка Hugo

Якщо у вас вже встановлено Hugo або якщо ви віддаєте перевагу іншому генератору статичних сайтів (або взагалі не користуєтеся ними), то цю частину можна пропустити.

Завантажуємо Hugo з https://github.com/gohugoio/hugo/releases
Поміщаємо виконуваний файл Hugo по одному з визначених у PATH шляхів
Створюємо новий сайт: hugo new site blog.example.com
Змінюємо поточну директорію на щойно створену: cd blog.example.com
Вибираємо тему оформлення (https://github.com/budparr/gohugo-theme-ananke/releases або будь-що)
Створюємо перший пост: hugo new posts/my-amazing-post.md
Додаємо контент у створений файл: content/posts/my-amazing-post.md.
Коли все зроблено, змінюємо значення draft на false
Генеруємо статичні файли: hugo -D

Тепер наш статичний сайт знаходиться всередині директорії ./public та готовий до першого ручного розгортання.

Частина 2: Налаштовуємо Cloudflare

Тепер розберемося з початковим настроюванням Cloudflare. Припустимо, що домен для сайту ми вже маємо. Як приклад візьмемо blog.example.com.

Крок 1: Створюємо запис DNS

Спочатку вибираємо наш домен, а потім пункт меню DNS. Створюємо A-запис blog і вказуємо для неї якийсь фіктивний IP (це офіційна рекомендація, але вони могли б зробити якось симпатичніше).

Крок 2: Токен Cloudflare

Мій профіль -> Токени API вкладка-> Створити маркер -> Create Custom Token

Тут вам потрібно буде обмежити токен обліковими записами та зонами, але залишити можливість Edit для перерахованих на зображенні дозволів.

Збережіть токен на майбутнє, він знадобиться нам у третій частині.

Крок 3: Отримуємо accountid та zoneid

Область → огляд → [права бічна панель]

Це мої, не використовуйте їх, будь ласка 🙂

Збережіть їх поруч із токеном, вони теж знадобляться нам у третій частині.

Крок 4: Активація Workers

Область → Робітники → Управління робітниками

Вибираємо унікальне ім'я та тариф Workers → Unlimited ($5 на місяць на сьогоднішній день). За бажанням пізніше ви зможете перейти на безкоштовну версію.

Частина 3: Перший деплой (ручне розгортання)

Я зробив перше розгортання вручну, щоб з'ясувати, що там відбувається насправді. Хоча все це можна зробити і простіше:

Встановлюємо wrangler: npm i @cloudflare/wrangler -g
Переходимо до директорії нашого блогу: cd blog.example.com
Запускаємо wrangler: wrangler init — site hugo-worker
Створюємо конфіг для wrangler (введіть токен, коли його спитають): wrangler config

Тепер спробуємо внести зміни до щойно створеного файлу wrangler.toml (тут повний список можливих налаштувань):

вказуємо accountid та zoneid
міняємо маршрут на щось на кшталт *blog.example.com/*
вказуємо false для workersdev
Змінюємо bucket на ./public (або де знаходиться ваш статичний сайт)
Якщо у вас більше одного домену в дорозі, вам слід виправити шлях у робочому скрипті: workers-site/index.js (Див. функцію handleEvent)

Відмінно, час розгортати сайт за допомогою команди wrangler publish.

Частина 4: Автоматизація деплою

Ця інструкція складена для Gitlab, але вона передає суть та простоту автоматизованого розгортання загалом.

Крок 1: Створюємо та налаштовуємо наш проект

Створюємо новий проект GitLab та завантажуємо сайт: директорія blog.example.com з усім вмістом має перебувати в кореневому каталозі проекту
Задаємо змінну CFAPITOKEN тут: Налаштування → CI/CD → Змінні

Крок 2: Створюємо файл .gitlab-ci.yml та запускаємо перше розгортання

Створюємо файл .gitlab-ci.yml в корені з таким вмістом:

stages:
  - build
  - deploy

build:
  image: monachus/hugo
  stage: build
  variables:
    GIT_SUBMODULE_STRATEGY: recursive
  script:
    - cd blog.example.com/
    - hugo
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #


deploy:
  image: timbru31/ruby-node:2.3
  stage: deploy
  script:
    - wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
    - cd blog.example.com/
    - ../dist/wrangler publish
  artifacts:
    paths:
      - blog.example.com/public
  only:
    - master # this job will affect only the 'master' branch
  tags:
    - gitlab-org-docker #

Запускаємо перше розгортання вручну (CI/CD → Трубопроводи → Run Pipeline) або відправляючи commit у гілку master. Вуаль!

Висновок

Що ж, можливо, я трохи применшив, і весь процес зайняв трохи більше десяти хвилин. Натомість тепер у вас є швидкий сайт з автоматичним розгортанням та кілька свіжих ідей про те, що ще можна зробити за допомогою Workers.

Працівники Cloudflare Хьюго GitLab Ci

Джерело: habr.com

Як зробити статичний сайт на Cloudflare Workers Sites