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

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

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

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

Използваме Gitlab CI/CD за автоматизация, но какво да кажем за ускорението? Нека разположим сайта директно в Cloudflare, като използваме Работнически сайтове.

Какво е необходимо за стартиране:

• Gitlab (ваш собствен или облачно)

• Сметка на Cloudflare

• Инсталиран nodejs/npm

Част 1: Инсталиране на Hugo

Ако вече имате инсталиран Hugo или ако предпочитате друг статичен генератор на сайтове (или изобщо не използвате такъв), тогава можете да пропуснете тази част.

1. Изтеглете Hugo от https://github.com/gohugoio/hugo/releases

2. Поставяме изпълнимия файл на Hugo според един от дефинираните в PATH начини

3. Създаване на нов сайт: hugo new site blog.example.com

4. Променете текущата директория към новосъздадената: cd blog.example.com

5. Изберете тема за дизайн (https://github.com/budparr/gohugo-theme-ananke/releases или каквото и да е)

6. Нека създадем първата публикация: hugo new posts/my-amazing-post.md

7. Добавете съдържание към създадения файл: content/posts/my-amazing-post.md.
   Когато всичко е готово, променете стойността на черновата на фалшив

8. Генериране на статични файлове: hugo -D

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

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

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

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

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

Стъпка 2: Cloudflare Token

1. Моят профил -> API токени раздел-> Създаване на токен -> Създайте персонализиран токен

Тук ще трябва да ограничите токена до акаунти и зони, но оставете опцията Редактиране за разрешенията, изброени на снимката.

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

Стъпка 3: Вземете accountid и zoneid

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

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

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

Стъпка 4: Активирайте работниците

домейн → Работниците → Управление на работниците

Ние избираме уникално име и тарифа Workers → Unlimited ($5 на месец днес). Ако желаете, можете по-късно да надстроите до безплатната версия.

Част 3: Първо внедряване (ръчно внедряване)

Направих първото ръчно внедряване, за да разбера какво наистина се случва там. Въпреки че всичко това може да се направи по-просто:

1. Инсталирайте wrangler: npm i @cloudflare/wrangler -g

2. Да отидем в директорията на нашия блог: cd blog.example.com

3. Стартирайте Wrangler: wrangler init — site hugo-worker

4. Създайте конфигурация за wrangler (въведете токена, когато бъдете попитани): wrangler config

Сега нека се опитаме да направим промени в новосъздадения файл wrangler.toml (тук пълен списък с възможни настройки):

1. Посочваме accountid и zoneid

2. Ние се променяме маршрут на нещо като *blog.example.com/*

3. Посочваме фалшив за worksdev

4. Променете кофата на ./public (или къде се намира вашият статичен сайт)

5. Ако имате повече от един домейн в пътя, тогава трябва да коригирате пътя в работния скрипт: работници-сайт/index.js (виж функция handleEvent)

Страхотно, време е да внедрим сайта с помощта на екипа wrangler publish.

Част 4: Автоматизация на внедряването

Това ръководство е написано за Gitlab, но улавя същността и лекотата на автоматизираното внедряване като цяло.

Стъпка 1: Създайте и конфигурирайте нашия проект

1. Създайте нов проект на GitLab и качете директорията site: blog.example.com с цялото съдържание трябва да се намира в основната директория на проекта

2. Ние поставихме променлива 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 → Тръбопроводи → Изпълнение на тръбопровод) или чрез обвързване с главния клон. Ето!

Заключение

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

 Работници на Cloudflare    Уго    GitLab Ci

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