🥇Kako napraviti statičku stranicu na Cloudflare Workers Sites

Zdravo! Moje ime je Dima, ja sam tehnički lider SysOps tima u Wrikeu. U ovom članku ću objasniti kako za 10 minuta i 5 dolara mesečno napraviti sajt blizak korisniku i automatizovati njegovu implementaciju. Članak se gotovo ne odnosi na probleme koje rešavamo unutar našeg tima. To je više moje lično iskustvo i utisci iz upoznavanja sa novom tehnologijom. Potrudio sam se da što detaljnije opišem korake, kako bi uputstvo bilo korisno ljudima različitog iskustva. Nadam se da će vam se dopasti. Idemo!

Dakle, možda ste već pronašli jednostavan i jeftin način za hosting sajta. Možda čak i besplatan, kao što je opisano u ovoj predivnoj članku.

Ali, možda vam je dosadno i želite da zavirite u predivni novi svet tehnologija? Recimo, razmišljate o automatizaciji implementacije i želite da maksimalno ubrzate sajt? U ovom članku ćemo koristiti Hugo, ali to nije obavezno.

Za automatizaciju koristimo Gitlab CI/CD, ali šta raditi za ubrzavanje? Hajde da implementiramo sajt direktno u Cloudflare koristeći Worker Sites.

Šta je potrebno za početak:

Gitlab (vaš sopstveni ili oblaci)
Naloga na Cloudflare
Instaliran nodejs/npm

Deo 1: Instalacija Hugoa

Ako već imate instaliran Hugo ili ako preferirate neki drugi generator statičnih sajtova (ili uopšte ne koristite takve), ovu deo možete preskočiti.

Preuzmite Hugoa sa https://github.com/gohugoio/hugo/releases
Postavite izvršni fajl Hugo na jedan od definisanih u PATH putanja
Kreirajte novi sajt: hugo new site blog.example.com
Promenite trenutni direktorijum na upravo kreirani: cd blog.example.com
Izaberite temu (https://github.com/budparr/gohugo-theme-ananke/releases ili bilo šta drugo)
Kreirajte prvi post: hugo new posts/my-amazing-post.md
Dodajte sadržaj u kreirani fajl: content/posts/my-amazing-post.md.
Kada je sve gotovo, promenite vrednost draft na false
Generišite statičke fajlove: hugo -D

Sada je naš statični sajt unutar direktorijuma .\/public i spreman za prvo ručno implementiranje.

Deo 2: Postavljamo Cloudflare

Sada ćemo se baviti inicijalnim podešavanjem Cloudflare-a. Pretpostavimo da već imamo domen za sajt. Kao primer uzimamo blog.example.com.

Korak 1: Kreiramo DNS zapis

Prvo biramo naš domen, a zatim stavku menija DNS. Kreiramo A zapis blog i navodimo neki lažni IP (ovo je zvanična preporuka, ali mogli bi to učiniti nekako lepše).

Korak 2: Cloudflare token

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

Ovdje ćete morati ograničiti token na račune i zone, ali ostaviti mogućnost izmjene za navedene dozvole na slici.

Spremite token za budućnost, trebat će nam u trećem dijelu.

Korak 3: Dobijamo accountid i zoneid

Domena → Overview → [desna bočna traka]

Ovo su moji, molim vas nemojte ih koristiti 🙂

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

Korak 4: Aktivacija Workers-a

Domena → Workers → Upravljanje Workers-ima

Odaberite jedinstveno ime i tarifni plan Workers → Unlimited (5 USD mjesečno trenutno). Ako želite, kasnije se možete prebaciti na besplatnu verziju.

Dio 3: Prvo implementiranje (ručno raspoređivanje)

Prvo sam ručno implementirao kako bih otkrio što se zapravo događa. Iako se sve to može učiniti i jednostavnije:

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

Sada ćemo pokušati unijeti promjene u upravo kreiranu datoteku wrangler.toml (ovdje popis mogućih postavki):

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

Odlično, vrijeme je za implementaciju stranice s naredbom wrangler publish.

Dio 4: Automatizacija implementacije

Ove upute su sastavljene za GitLab, ali prenose suštinu i jednostavnost automatiziranog raspoređivanja općenito.

Korak 1: Kreiramo i postavljamo naš projekt

Kreiramo novi projekt na GitLabu i učitavamo stranicu: direktorij blog.example.com sa svim sadržajem mora biti u korijenskom katalogu projekta
Postavljamo varijabla CFAPITOKEN ovdje: Postavke → CI/CD → Varijable

Korak 2: Kreiramo datoteku .gitlab-ci.yml i pokrećemo prvo raspoređivanje

Kreiramo datoteku .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 # ovaj zadatak će utjecati samo na 'master' granu
  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 # ovaj zadatak će utjecati samo na 'master' granu
  tags:
    - gitlab-org-docker #

Pokrećemo prvo ručno raspoređivanje (CI / CD → Cevovodi → Pokreni Cevovod) ili slanjem commita u master granu. Evo nas!

Zaključak

Pa, možda sam malo umanjio, a cijeli proces je trajao nešto više od deset minuta. Ali sada imate brzu stranicu s automatskim raspoređivanjem i nekoliko novih ideja o tome što još možete učiniti s Workers.

Cloudflare Workers Hugo GitLab Ci

Izvor: habr.com