Ako vytvoriť statickú stránku pomocou Cloudflare Workers Sites

Ahoj! Volám sa Dima, som tech lead SysOps tímu vo Wrike. V tomto článku vám ukážem, ako za 10 minút a 5 dolárov mesačne vytvoriť čo najviac používateľsky prívetivú webstránku a automatizovať jej nasadenie. Článok takmer nesúvisí s problémami, ktorým čelíme v našom tíme. Ide skôr o moje osobné skúsenosti a dojmy z novej technológie, s ktorou sa stretávam. Snažil som sa popísať kroky čo najpodrobnejšie, aby bol návod užitočný pre ľudí s rôznymi skúsenosťami. Dúfam, že sa vám to páči. Poďme na to!

Takže, možno ste už našli jednoduchý a lacný spôsob hostovania webstránky. Možno dokonca zadarmo, ako je popísané v tejto skvelej článku.

Ale ak sa vám predsa len zdá, že technológie sú nudné a chcete sa dotknúť zázračného nového sveta? Povedzme, že uvažujete o automatizácii nasadenia a chceli by ste maximalizovať rýchlosť webu? V tomto článku budeme používať Hugo, ale to nie je povinné.

Na automatizáciu používame Gitlab CI/CD, ale čo s urýchlením? Poďme nasadiť web priamo do Cloudflare pomocou Worker Sites.

Čo je potrebné na začiatok:

• Gitlab (vlastný alebo cloudový)

• Účet na Cloudflare

• Nainštalovaný nodejs/npm

Časť 1: Inštalácia Hugo

Ak máte už nainštalované Hugo, alebo ak uprednostňujete iného generátora statických stránok (alebo ich vôbec nepoužívate), túto časť môžete preskočiť.

1. Stiahnete Hugo z https://github.com/gohugoio/hugo/releases

2. Umiesťte spustiteľný súbor Hugo na jednu z definovaných PATH ciest

3. Vytvorte novú webstránku: hugo new site blog.example.com

4. Zmeňte aktuálny adresár na práve vytvorený: cd blog.example.com

5. Vyberte tému (https://github.com/budparr/gohugo-theme-ananke/releases alebo čokoľvek iné)

6. Vytvorte prvý príspevok: hugo new posts/my-amazing-post.md

7. Pridajte obsah do vytvoreného súboru: content/posts/my-amazing-post.md.
   Keď je všetko hotové, zmeňte hodnotu draft na nepravda

8. Generujte statické súbory: hugo -D

Teraz sa náš statický web nachádza v adresári ./public a je pripravený na prvé ručné nasadenie.

Časť 2: Nastavujeme Cloudflare

Teraz sa pozrime na počiatočné nastavenie Cloudflare. Predpokladajme, že doména pre webstránku už máme. Ako príklad si vezmeme blog.example.com.

Krok 1: Vytvorenie DNS záznamu

Najprv vyberte našu doménu a potom položku menu DNS. Vytvorte A-záznam blog a uveďte preň nejakú fiktívnu IP (to je oficiálne odporúčanie,ale mohli by to spraviť aj nejak krajšie).

Krok 2: Cloudflare token

1. Môj profil -> API tokeny záložka-> Vytvoriť token -> Vytvoriť vlastný token

Tu budete musieť obmedziť token na účty a zóny, ale ponechať možnosť Edit pre uvedené na obrázku oprávnenia.

Uložte token pre budúcnosť, bude potrebný v tretej časti.

Krok 3: Získanie accountid a zoneid

Doména → Prehľad → [pravý bočný panel]

Toto sú moje, prosím, nepoužívajte ich 🙂

Uložte ich spolu s tokenom, budú tiež potrebné v tretej časti.

Krok 4: Aktivácia Workers

Doména → Workers → Spravovať Workers

Vyberáme jedinečné meno a plán Workers → Neobmedzené (5 dolárov mesačne k dnešnému dňu). Ak budete chcieť, neskôr môžete prejsť na bezplatnú verziu.

Časť 3: Prvá implementácia (ručné nasadenie)

Prvú implementáciu som uskutočnil ručne, aby som zistil, čo sa tam naozaj deje. Hoci sa to všetko dá urobiť aj jednoduchšie:

1. Inštalujeme wrangler: npm i @cloudflare/wrangler -g

2. Prejdite do adresára nášho blogu: cd blog.example.com

3. Spúšťame wrangler: wrangler init — site hugo-worker

4. Vytvárame konfiguráciu pre wrangler (zadajte token, keď sa naň spýtajú): wrangler config

Teraz vyskúšame vykonať zmeny v práve vytvorenom súbore wrangler.toml (tu úplný zoznam možných nastavení):

1. Uvádzame accountid a zoneid

2. Zmeníme route na niečo ako *blog.example.com/*

3. Uvádzame nepravda pre workersdev

4. Meníme bucket na .\/public (alebo kde sa nachádza váš statický web)

5. Ak máte viac ako jednu doménu na ceste, mali by ste opraviť cestu v pracovnom skripte: workers-site/index.js (pozri funkciu handleEvent)

Skvelé, je čas nasadiť web pomocou príkazu wrangler publish.

Časť 4: Automatizácia nasadenia

Tento návod je vytvorený pre Gitlab, ale prenáša podstatu a jednoduchosť automatizovaného nasadenia celkovo.

Krok 1: Vytvorenie a nastavenie nášho projektu

1. Vytvorte nový projekt GitLab a nahrajte web: adresár blog.example.com so všetkým obsahom by mal byť v koreňovom adresári projektu

2. Nastavujeme premennú CFAPITOKEN tu: Nastavenia → CI/CD → Premenné

Krok 2: Vytvorenie súboru .gitlab-ci.yml a spustenie prvej implementácie

Vytvorte súbor .gitlab-ci.yml v koreňovom adresári so nasledujúcim obsahom:

etapy:
  - vytvářet
  - nasazovat

vytvářet:
  obrázek: monachus/hugo
  etapa: vytvářet
  proměnné:
    GIT_SUBMODULE_STRATEGY: rekurzivní
  skript:
    - cd blog.example.com/
    - hugo
  artefakty:
    cesty:
      - blog.example.com/public
  pouze:
    - master # tato úloha ovlivní pouze větev 'master'
  štítky:
    - gitlab-org-docker #


nasazovat:
  obrázek: timbru31/ruby-node:2.3
  etapa: nasazovat
  skript:
    - 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
  artefakty:
    cesty:
      - blog.example.com/public
  pouze:
    - master # tato úloha ovlivní pouze větev 'master'
  štítky:
    - gitlab-org-docker #

Spouštíme první nasazení ručně (CI / CD → Pipelines → Spustit Pipeline) nebo odesláním commitu do větve master. Tada!

Záver

No, možná jsem to trochu zjednodušil, a celý proces trval o něco více než deset minut. Ale nyní máte rychlou stránku s automatickým nasazením a několik čerstvých nápadů, co dalšího lze udělat pomocí Workers.

 Cloudflare Workers    Hugo    GitLab Ci

Zdroj: habr.com