🥇Як зрабіць статычны сайт на Cloudflare Workers Sites

Прывітанне! Мяне клічуць Дзіма, я тэхлід SysOps-каманды ў Wrike. У гэтым артыкуле я раскажу, як за 10 хвілін і 5 даляраў у месяц зрабіць максімальна блізкі да карыстача сайт і аўтаматызаваць яго дэплой. Артыкул амаль не мае дачынення да тых праблем, якія мы вырашаем ўнутры нашай каманды. Гэта, хутчэй, мой асабісты досвед і ўражанні ад знаёмства з новай для мяне тэхналогіяй. Я пастараўся апісаць крокі максімальна падрабязна, каб інструкцыя аказалася карыснай для людзей з розным вопытам. Спадзяюся, вам спадабаецца. Паехалі!

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

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

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

Што патрабуецца для старту:

Gitlab (ваш уласны ці воблачны)
Рахунак на Cloudflare
Устаноўлены nodejs/npm

Частка 1: Устаноўка Hugo

Калі ў вас ужо ўсталяваны Hugo ці калі вы аддаеце перавагу іншы генератар статычных сайтаў (ці наогул не карыстаецеся імі), то гэтую частку можна прапусціць.

Спампоўваем Hugo з https://github.com/gohugoio/hugo/releases
Змяшчаем выкананы файл Hugo па адным з вызначаных у ШЛЯХ шляхоў
Ствараем новы сайт: 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 tokens tab-> Стварыць маркер -> 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/*
Паказваем ілжывы для 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