🥇Как да направите статичен сайт на Cloudflare Workers Sites

Здравейте! Аз съм Дима, технически ръководител на SysOps екипа в Wrike. В тази статия ще ви разкажа как за 10 минути и 5 долара на месец да създадете сайт, максимално близък до потребителя, и да автоматизирате неговото внедряване. Статията не е особено свързана с проблемите, които решаваме в нашия екип. По-скоро, това е моят личен опит и впечатления от запознаването ми с нова технология. Опитах се да опиша стъпките максимално подробно, за да бъде инструкцията полезна за хора с различен опит. Надявам се да ви хареса. Да започваме!

Така че, вероятно вече сте намерили прост и евтин начин за хостинг на сайт. Може би дори безплатен, както е описано в тази прекрасна статия.

Но все пак, скучно ли ви е и искате ли да се докоснете до новия свят на технологиите? Да кажем, че мислите за автоматизация на внедряването и искате да ускорите сайта максимално? В тази статия ще използваме Hugo, но това не е задължително.

За автоматизацията използваме Gitlab CI/CD, но какво да направим за скоростта? Нека внедрим сайта директно в 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 на неверно
Генерирайте статични файлове: hugo -D

Сега нашият статичен сайт е в директорията ./public и е готов за първоначално ръчно внедряване.

Част 2: Настройка на Cloudflare

Сега да разгледаме основната настройка на Cloudflare. Да предположим, че домейнът за сайта вече е наличен. За пример взимаме blog.example.com.

Стъпка 1: Създайте DNS записа

Първо изберете нашия домейн, а след това менюто DNS. Създайте A-запис blog и задайте някакъв фиктивен IP адрес (това е официална препоръка, но можеха да го направят по-приятен начин).

Стъпка 2: Токен на Cloudflare

Моят профил -> API токени таб-> Create Token -> Създайте персонализиран токен

Тук трябва да ограничите токена до акаунти и зони, но да оставите възможността Edit за разрешенията, изброени на картината.

Запазете токена за бъдеще, той ще ни е нужен в третата част.

Стъпка 3: Получаваме accountid и zoneid

Домейн → Overview → [дясната странична лента]

Това са моите, моля не ги използвайте 🙂

Запазете ги заедно с токена, те също ще ни трябват в третата част.

Стъпка 4: Активация на Workers

Домейн → Workers → Управление на 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
Променяме route нещо подобно на *blog.example.com/*
Указваме неверно за 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 # тази работа ще засегне само клона 'master'
  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 # тази работа ще засегне само клона 'master'
  tags:
    - gitlab-org-docker #

Стартираме първото разгръщане ръчно (CI / CD → Pipelines → Изпълни Pipeline) или като изпращате commit в master клона. Ето го!

Заключение

Може би малко подцених, процесът всъщност отне малко повече от десет минути. Но сега имате бърз сайт с автоматично разгръщане и няколко свежи идеи за това какво още можете да направите с Workers.

Cloudflare Workers Hugo GitLab Ci

Източник: habr.com