🥇Jak vytvořit statickou stránku na Cloudflare Workers Sites

Ahoj! Jmenuji se Dima, jsem techlead SysOps týmu ve Wrike. V tomto článku vám ukážu, jak za 10 minut a 5 dolarů měsíčně vytvořit maximálně uživatelsky přívětivou stránku a automatizovat její nasazení. Článek má téměř nic společného s problémy, které řešíme uvnitř našeho týmu. To je spíše moje osobní zkušenost a dojmy ze seznámení s novou technologií. Snažil jsem se popsat kroky co nejpodrobněji, aby byla instrukce užitečná pro lidi s různými zkušenostmi. Doufám, že se vám to bude líbit. Jdeme na to!

Takže, možná jste už našli jednoduchý a levný způsob, jak hostovat svou stránku. Možná dokonce bezplatný, jak je popsáno v této skvělé článku.

Ale co když se přesto nudíte a chcete se dotknout úžasného nového světa technologií? Řekněme, že přemýšlíte o automatizaci nasazení a chtěli byste maximálně zrychlit svou stránku? V tomto článku budeme používat Hugo, ale to není nutné.

Pro automatizaci používáme Gitlab CI/CD, ale co dělat se zrychlením? Pojďme nasadit stránku přímo do Cloudflare pomocí Worker Sites.

Co je potřeba pro začátek:

Gitlab (váš vlastní nebo cloudový)
Účet na Cloudflare
Nainstalovaný nodejs/npm

Část 1: Instalace Hugo

Pokud máte Hugo již nainstalováno, nebo pokud preferujete jiný generátor statických stránek (nebo je vůbec nepoužíváte), tuto část můžete přeskočit.

Stáhněte si Hugo z https://github.com/gohugoio/hugo/releases
Umístěte spustitelný soubor Hugo do jednoho z uvedených cest Vytvořte novou stránku:
hugo new site blog.example.com Změňte aktuální adresář na právě vytvořený:
cd blog.example.com Vyberte si šablonu (
nebo cokoliv jiného)https://github.com/budparr/gohugo-theme-ananke/releases Vytvořte první příspěvek:
hugo new posts/my-amazing-post.md Přidejte obsah do vytvořeného souboru:
content/posts/my-amazing-post.md Když je vše hotovo, změňte hodnotu draft na.
Generujte statické soubory: false
hugo -D Nyní naše statická stránka je uvnitř adresáře

./public a připravena k prvnímu ručnímu nasazení. Část 2: Nastavujeme Cloudflare

Nyní se podíváme na počáteční nastavení Cloudflare. Předpokládejme, že doména pro stránku už existuje. Jako příklad vezmeme

blog.example.com. Krok 1: Vytvoření DNS záznamu

Nejprve vyberte naši doménu a poté položku menu

DNS . Vytvořte A-záznam blog a určete pro něj nějakou fiktivní IP (to je oficiálnídoporučení. doporučení, ale mohli by to udělat nějak hezčeji).

Krok 2: Cloudflare Token

Můj profil -> API tokeny tab-> Vytvořit token -> Vytvořit vlastní token

Zde budete muset omezit token na účty a zóny, ale ponechat možnost Edit pro uvedená oprávnění na obrázku.

Uložte token na později, budeme ho potřebovat ve třetí části.

Krok 3: Získání accountid a zoneid

Doména → Přehled → [pravý boční panel]

To jsou moje, prosím, nepoužívejte je 🙂

Uložte je vedle tokenu, také je budeme potřebovat ve třetí části.

Krok 4: Aktivace Workers

Doména → Workers → Spravovat Workers

Vyberte jedinečný název a tarif Workers → Neomezený (5 $ měsíčně k dnešnímu dni). Pokud chcete, později můžete přejít na bezplatnou verzi.

Část 3: První nasazení (ruční nasazení)

První nasazení jsem provedl ručně, abych zjistil, co se tam vlastně děje. I když to vše lze udělat i jednodušeji:

Nainstalujte wrangler: npm i @cloudflare/wrangler -g
Přejděte do adresáře našeho blogu: Vyberte si šablonu (
Spusťte wrangler: wrangler init — site hugo-worker
Vytvořte konfiguraci pro wrangler (zadejte token, když se ho zeptají): wrangler config

Teď se pokusíme provést změny v právě vytvořeném souboru wrangler.toml (zde úplný seznam možných nastavení):

Určte accountid a zoneid
Změňte route na něco jako *blog.example.com/*
Určte false pro workersdev
Změňte bucket na .\/public (nebo kde se nachází váš statický web)
Pokud máte více než jednu doménu v cestě, měli byste opravit cestu ve skriptu pracovníka: workers-site/index.js (viz funkci handleEvent)

Skvělé, je čas nasadit web pomocí příkazu wrangler publish.

Část 4: Automatizace nasazení

Tento návod byl vytvořen pro Gitlab, ale přenáší podstatu a jednoduchost automatizovaného nasazení obecně.

Krok 1: Vytvoření a nastavení našeho projektu

Vytvořte nový projekt GitLab a nahrajte web: adresář blog.example.com se vším obsahem by měl být umístěn v kořenovém katalogu projektu
Nastavte proměnnou CFAPITOKEN zde: Nastavení → CI/CD → Proměnné

Krok 2: Vytvoříme soubor .gitlab-ci.yml a spustíme první nasazení

Vytvořte soubor .gitlab-ci.yml v kořenovém adresáři s následujícím obsahem:

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 # Tento úkol ovlivní pouze větev 'master'
  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 # Tento úkol ovlivní pouze větev 'master'
  tags:
    - gitlab-org-docker #

Spouštíme první nasazení ručně (CI / CD → Pipeline → Run Pipeline) nebo odesláním commit do větve master. Tady je to!

Závěr

Možná jsem to trochu zlehčil, a celý proces trval o něco déle 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