ProHoster > Blog > Administrácia > Ako vytvoriť statickú stránku na stránkach Cloudflare Workers

Ako vytvoriť statickú stránku na stránkach Cloudflare Workers

Ahoj! Volám sa Dima, som technický vedúci tímu SysOps vo Wrike. V tomto článku vám poviem, ako spraviť web čo najbližšie k používateľovi za 10 minút a 5 dolárov mesačne a zautomatizovať jeho nasadenie. Článok nemá takmer nič spoločné s problémami, ktoré riešime v rámci nášho tímu. Ide skôr o moju osobnú skúsenosť a dojmy zo spoznávania technológie, ktorá je pre mňa nová. Kroky som sa snažil opísať čo najpodrobnejšie, aby bol návod užitočný pre ľudí s rôznymi skúsenosťami. Dúfam, že sa vám bude páčiť. Choď!

Ako vytvoriť statickú stránku na stránkach Cloudflare Workers

Možno ste už našli jednoduchý a lacný spôsob hosťovania webovej stránky. Možno aj zadarmo, ako je popísané v tomto skvelý článok.

Ale zrazu sa stále nudíte a chcete sa dotknúť nového odvážneho sveta technológií? Povedzme, že uvažujete o automatizácii nasadenia a chceli by ste čo najviac zrýchliť svoju stránku? V tomto článku použijeme Hugo, ale toto je voliteľné.

Na automatizáciu používame Gitlab CI/CD, ale čo zrýchlenie? Poďme nasadiť stránku priamo do Cloudflare pomocou Stránky pre pracovníkov.

Čo je potrebné na spustenie:

Časť 1: Inštalácia Huga

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

  1. Stiahnite si Huga z https://github.com/gohugoio/hugo/releases

  2. Spustiteľný súbor Hugo umiestnime podľa jedného z tých, ktoré sú definované v PATH spôsoby

  3. Vytvorenie novej stránky: hugo new site blog.example.com

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

  5. Vyberte motív dizajnu (https://github.com/budparr/gohugo-theme-ananke/releases alebo čokoľvek)

  6. Vytvorme 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 konceptu na nepravdivý

  8. Generovanie statických súborov: hugo -D

Teraz je naša statická stránka umiestnená v adresári ./verejné a pripravený na vaše prvé manuálne nasadenie.

Časť 2: Nastavenie služby Cloudflare

Teraz sa pozrime na počiatočné nastavenie Cloudflare. Predpokladajme, že už máme pre web doménu. Vezmime si ako príklad blog.example.com.

Krok 1: Vytvorte záznam DNS

Najprv vyberte našu doménu a potom položku ponuky DNS. Vytvoríme blog A-record a uvedieme preň nejakú fiktívnu IP (toto je oficiálna odporúčanie, ale mohli to urobiť trochu krajšie).

Ako vytvoriť statickú stránku na stránkach Cloudflare Workers

Krok 2: Cloudflare Token

  1. Môj profil -> API tokeny tab-> Vytvoriť token -> Vytvorte vlastný token

Ako vytvoriť statickú stránku na stránkach Cloudflare Workers

Tu budete musieť obmedziť token na účty a zóny, ale ponechajte možnosť Upraviť pre povolenia uvedené na obrázku.

Token si odložte do budúcnosti, budeme ho potrebovať v tretej časti.

Krok 3: Získajte accountid a zoneid

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

Ako vytvoriť statickú stránku na stránkach Cloudflare WorkersSú moje, nepoužívajte ich :)

Uložte si ich vedľa žetónu, budeme ich potrebovať aj v tretej časti.

Krok 4: Aktivujte pracovníkov

Doména → Pracovníci → Správa pracovníkov

Vyberáme si jedinečný názov a tarifu Workers → Unlimited (dnes 5 dolárov mesačne). Ak chcete, môžete neskôr prejsť na bezplatnú verziu.

Časť 3: Prvé nasadenie (manuálne nasadenie)

Urobil som prvé manuálne nasadenie, aby som zistil, čo sa tam vlastne deje. Aj keď to všetko možno urobiť jednoduchšie:

  1. Nainštalujte wrangler: npm i @cloudflare/wrangler -g

  2. Poďme do adresára nášho blogu: cd blog.example.com

  3. Spustiť wrangler: wrangler init — site hugo-worker

  4. Vytvorte konfiguráciu pre wrangler (na výzvu zadajte token): wrangler config

Teraz sa pokúsime vykonať zmeny v novovytvorenom súbore wrangler.toml (tu úplný zoznam možných nastavení):

  1. Naznačujeme accountid a zoneid

  2. Zmeniť trasa na niečo ako *blog.example.com/*

  3. Naznačujeme nepravdivý pre pracovnícidev

  4. Zmeňte vedro na ./public (alebo kde sa nachádza vaša statická stránka)

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

Skvelé, je čas nasadiť stránku pomocou tímu wrangler publish.

Časť 4: Automatizácia nasadenia

Táto príručka je napísaná pre Gitlab, ale zachytáva podstatu a jednoduchosť automatického nasadenia vo všeobecnosti.

Krok 1: Vytvorte a nakonfigurujte náš projekt

  1. Vytvorte nový projekt GitLab a nahrajte adresár site: blog.example.com so všetkým obsahom sa musí nachádzať v koreňovom adresári projektu

  2. Nastavili sme premenlivý CFAPITOKEN tu: nastavenie → CI / CD → Premenné

Krok 2: Vytvorte súbor .gitlab-ci.yml a spustite prvé nasadenie

Vytvorte súbor .gitlab-ci.yml v koreni s nasledujúcim obsahom:

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 #

Prvé nasadenie spúšťame manuálne (CI/CD → Potrubie → Run Pipeline) alebo zaviazaním sa hlavnej pobočke. Voila!

Záver

Možno som to trochu podcenil a celý proces trval niečo vyše desať minút. Teraz však máte rýchlu stránku s automatickým nasadením a niekoľkými novými nápadmi o tom, čo ešte môžete robiť s Workers.

 Cloud Flare Workers    Hugo    GitLab Ci

Zdroj: hab.com

Pridať komentár