🥇Како направити статички сајт на Cloudflare Workers сајтовима

Здраво! Моје име је Дима, ја сам технички вођа за СисОпс тим у Врике-у. У овом чланку ћу вам рећи како да направите веб страницу што ближе кориснику за 10 минута и 5 долара месечно и аутоматизујете њено постављање. Чланак нема скоро никакве везе са проблемима које решавамо унутар нашег тима. Ово је пре моје лично искуство и утисци упознавања технологије која ми је нова. Покушао сам да што детаљније опишем кораке како би упутства била корисна људима са другачијим искуством. Надам се да ћете уживати. Иди!

Дакле, можда сте већ пронашли једноставан и јефтин начин да хостујете веб локацију. Можда чак и бесплатно, као што је описано у овоме одличан чланак.

Али одједном вам је и даље досадно и желите да додирнете храбри нови свет технологије? Рецимо да размишљате о аутоматизацији имплементације и желите да убрзате своју веб локацију што је више могуће? У овом чланку ћемо користити Hugo, али ово је опционо.

Ми користимо Гитлаб ЦИ/ЦД за аутоматизацију, али шта је са убрзањем? Хајде да поставимо сајт директно на Цлоудфларе користећи Воркер Ситес.

Шта је потребно за почетак:

Гитлаб (ваш или облачно)
Рачун на Цлоудфларе
Инсталиран нодејс/нпм

Део 1: Инсталирање Хуга

Ако већ имате инсталиран Хуго, или ако више волите други генератор статичке локације (или га уопште не користите), онда можете прескочити овај део.

Преузмите Хуго са https://github.com/gohugoio/hugo/releases
Постављамо извршну датотеку Хуго према једном од оних дефинисаних у СТАЗА начине
Прављење новог сајта: 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
Додајте садржај у креирану датотеку: цонтент/постс/ми-амазинг-пост.мд.
Када је све готово, промените вредност нацрта у лажан
Генерисање статичких датотека: hugo -D

Сада се наша статичка локација налази унутар директоријума ./публиц и спремни за вашу прву ручну примену.

Део 2: Подешавање Цлоудфларе-а

Сада погледајмо почетно подешавање Цлоудфларе-а. Претпоставимо да већ имамо домен за сајт. Узмимо за пример блог.екампле.цом.

Корак 1: Направите ДНС унос

Прво изаберите наш домен, а затим и ставку менија ДНС. Креирамо блог А-запис и за њега назначавамо неку фиктивну ИП адресу (ово је званична препорука, али су могли да га улепшају мало).

Корак 2: Токен Цлоудфларе

Мој профил -> АПИ токени таб-> Креирајте токен -> Креирајте прилагођени токен

Овде ћете морати да ограничите токен на налоге и зоне, али оставите опцију Уреди за дозволе наведене на слици.

Сачувајте токен за будућност, требаће нам у трећем делу.

Корак 3: Преузмите аццоунтид и зонеид

Домен → преглед → [десна бочна трака]

Ово су моје, немој их користити молим те :)

Сачувајте их поред токена, биће нам потребни и у трећем делу.

Корак 4: Активирајте раднике

Домен → Радници → Управљање радницима

Бирамо јединствено име и тарифу Радници → Неограничено (данас 5$ месечно). Ако желите, касније можете надоградити на бесплатну верзију.

Део 3: Прво постављање (ручно постављање)

Урадио сам прво ручно постављање да бих сазнао шта се тамо заиста дешава. Иако се све ово може учинити једноставније:

Инсталирај вранглер: npm i @cloudflare/wrangler -g
Идемо у директоријум нашег блога: cd blog.example.com
Покрени вранглер: wrangler init — site hugo-worker
Направите конфигурацију за вранглер (унесите токен када се од вас затражи): wrangler config

Покушајмо сада да унесемо измене у новостворену датотеку вранглер.томл (овде пуна листа могућих подешавања):

Указујемо аццоунтид и зонеид
Цханге рута на нешто попут *блог.екампле.цом/*
Указујемо лажан за Воркерсдев
Промените корпу у ./публиц (или где се налази ваш статичан сајт)
Ако имате више од једног домена на путањи, требало би да исправите путању у радној скрипти: Воркерс-сите/индек.јс (види функцију хандлеЕвент)

Одлично, време је да распоредите сајт помоћу тима wrangler publish.

Део 4: Аутоматизација примене

Овај водич је написан за Гитлаб, али обухвата суштину и лакоћу аутоматизоване примене уопште.

Корак 1: Креирајте и конфигуришите наш пројекат

Направите нови ГитЛаб пројекат и отпремите сите: директоријум блог.екампле.цом са свим садржајима морају се налазити у основном директоријуму пројекта
Поставили смо променљива ЦФАПИТОКЕН овде: Подешавања → ЦИ / ЦД → Променљиве

Корак 2: Креирајте .гитлаб-ци.имл датотеку и покрените прву примену

Креирајте датотеку .гитлаб-ци.имл у корену са следећим садржајем:

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 #

Покрећемо прву примену ручно (ЦИ/ЦД → Цевоводи → Покрени цевовод) или обавезивањем на главну грану. Воила!

Закључак

Па, можда сам мало потценио, а цео процес је трајао нешто више од десет минута. Али сада имате брзу локацију са аутоматским применом и неколико свежих идеја о томе шта још можете да урадите са Воркерс-ом.

Цлоудфларе Воркерс Hugo ГитЛаб Ци

Извор: ввв.хабр.цом