🥇Как сделать статический сайт на Cloudflare Workers Sites

Živijo! Moje ime je Dima, vodja SysOps ekipe v Wrike. V tem članku bom opisal, kako lahko v 10 minutah in za 5 dolarjev na mesec ustvarite spletno mesto, ki je čim bližje uporabniku, ter avtomatizirate njegovo uvedbo. Članek skorajda ni povezan s problemi, ki jih rešujemo znotraj naše ekipe. Gre bolj za moje osebne izkušnje in vtise ob spoznavanju nove tehnologije. Potrudil sem se, da sem korake opisal kar se da podrobno, da bi bila navodila uporabna za ljudi z različnim znanjem. Upam, da vam bo to všeč. Gremo naprej!

Torej, morda ste že našli enostaven in poceni način za gostovanje spletne strani. Mogoče celo brezplačen, kot je opisano v tem čudovitem članku..

Ampak morda vam je kljub temu dolgčas in želite okusiti čudoviti nov svet tehnologij? Recimo, da razmišljate o avtomatizaciji uvedbe in bi želeli čim bolj pospešiti vašo spletno stran? V tem članku bomo uporabili Hugo, vendar to ni nujno.

Za avtomatizacijo uporabljamo Gitlab CI/CD, ampak kaj storiti za pospešitev? Uvedimo spletno stran neposredno v Cloudflare z uporabo Worker Sites..

Kaj potrebujete za začetek:

Gitlab (vaš lastni ali oblačni))
Račun na Cloudflare.
Nameščen nodejs/npm.

Del 1: Namestitev Huga

Če imate že nameščen Hugo, ali če raje uporabljate drug generator statičnih strani (ali se ga sploh ne poslužujete), lahko ta del preskočite.

Naložite Hugo s https://github.com/gohugoio/hugo/releases
Postavite izvršno datoteko Hugo na eno od določenih v PATH pot.
Ustvarite novo spletno stran: hugo new site blog.example.com.
Spremenite trenutno mapo v pravkar ustvarjeno: cd blog.example.com.
Izberite temo (https://github.com/budparr/gohugo-theme-ananke/releases ali karkoli drugega).
Ustvarite prvi prispevek: hugo new posts/my-amazing-post.md.
Dodajte vsebino v ustvarjeno datoteko: content/posts/my-amazing-post.md..
Ko je vse končano, spremenite vrednost draft na false
Generirajte statične datoteke: hugo -D.

Zdaj se naša statična spletna stran nahaja notri v mapi ./public in je pripravljena za prvo ročno uvedbo.

Del 2: Nastavljanje Cloudflare

Zdaj se lotimo začetne nastavitve Cloudflare. Predpostavimo, da mamo že domeno za spletno stran. Kot primer vzemimo blog.example.com.

Korak 1: Ustvarite DNS zapis.

Najprej izberemo našo domeno, nato pa možnost v meniju DNS. Ustvarimo A-zapis blog in navedemo neki lažni IP (to je uradna priporočila, vendar bi to lahko naredili nekoliko bolj privlačno)., vendar bi lahko to naredili kako bolj lepo).

Korak 2: Cloudflare Token

Moj profil -> API tokeni tab-> Ustvari žeton -> Kreiraj prilagođeni token

Ovdje ćete trebati ograničiti token na račune i zone, ali ostaviti mogućnost uređivanja za navedena ovlaštenja na slici.

Sačuvajte token za budućnost, trebat će nam u trećem dijelu.

Korak 3: Dobivanje accountid i zoneid

Domena → Pregled → [desna bočna traka]

Ovo su moji, nemojte ih koristiti, molim vas 🙂

Sačuvajte ih uz token, također će nam trebati u trećem dijelu.

Korak 4: Aktivacija Workers

Domena → Workers → Upravljanje Workers

Odabiremo jedinstveno ime i tarifni plan Workers → Neograničeno (5 $ mjesečno danas). Ako želite, kasnije se možete prebaciti na besplatnu verziju.

Dio 3: Prvo implementiranje (ručno postavljanje)

Upravo sam ručno izvršio prvo postavljanje da bih shvatio što se zapravo događa. Iako se sve to može učiniti i lakše:

Instaliramo wrangler: npm i @cloudflare/wrangler -g
Idemo u direktorij našeg bloga: cd blog.example.com.
Pokrećemo wrangler: wrangler init — site hugo-worker
Kreiramo konfiguraciju za wrangler (unesite token kad vas pitaju): wrangler config

Sada ćemo pokušati izmijeniti tek nedavno stvoren file wrangler.toml (ovde pun popis mogućih postavki):

Navodimo accountid i zoneid
Mijenjamo route na nešto poput *blog.example.com/*
Navodimo false za workersdev
Mijenjamo bucket na ./public (ili gdje se nalazi vaša statična stranica)
Ako imate više od jedne domene na putu, trebate ispraviti put u radnom skriptu: workers-site/index.js (vidi funkciju handleEvent)

Odlično, vrijeme je da postavimo stranicu pomoću komande wrangler publish.

Dio 4: Automatizacija implementacije

Ova instrukcija je sastavljena za Gitlab, ali prenosi suštinu i jednostavnost automatiziranog postavljanja u cjelini.

Korak 1: Kreiramo i postavljamo naš projekt

Kreiramo novi GitLab projekt i učitavamo stranicu: direktorij blog.example.com sa svim sadržajem treba biti u korijenskom direktoriju projekta
Određujemo spremenljivko CFAPITOKEN ovdje: Nastavitve → CI/CD → Spremenljivke

Korak 2: Kreiranje datoteke .gitlab-ci.yml i pokretanje prve implementacije

Ustvarite datoteko .gitlab-ci.yml u korijenu s sljedećim sadržajem:

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 → Cevovodi → Run Pipeline) или отправляя commit в ветку master. Вуаля!

Zaključek

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

Cloudflare Workers Hugo GitLab Ci

Izvor: habr.com