ProHoster > Blog > podávání > Jak vytvořit statický web na Cloudflare Workers Sites

Jak vytvořit statický web na Cloudflare Workers Sites

Ahoj! Jmenuji se Dima, jsem technický vedoucí týmu SysOps ve Wrike. V tomto článku vám řeknu, jak udělat web co nejblíže uživateli za 10 minut a 5 dolarů měsíčně a zautomatizovat jeho nasazení. Článek nemá téměř nic společného s problémy, které v rámci našeho týmu řešíme. To je spíše moje osobní zkušenost a dojmy z poznávání technologie, která je pro mě nová. Snažil jsem se kroky popsat co nejpodrobněji, aby byl návod užitečný pro lidi s různými zkušenostmi. Doufám, že se vám bude líbit. Jít!

Jak vytvořit statický web na Cloudflare Workers Sites

Možná jste již našli jednoduchý a levný způsob hostování webových stránek. Možná dokonce zdarma, jak je popsáno v tomto skvělý článek.

Ale najednou se stále nudíte a chcete se dotknout nového odvážného světa technologií? Řekněme, že uvažujete o automatizaci nasazení a rádi byste svůj web co nejvíce zrychlili? V tomto článku použijeme Hugo, ale je to volitelné.

Pro automatizaci používáme Gitlab CI/CD, ale co akcelerace? Pojďme nasadit web přímo do Cloudflare pomocí Pracovní místa.

Co je potřeba ke spuštění:

Část 1: Instalace Huga

Pokud již máte Hugo nainstalovaný, nebo pokud dáváte přednost jinému generátoru statických stránek (nebo jej nepoužíváte vůbec), můžete tuto část přeskočit.

  1. Stáhněte si Hugo z https://github.com/gohugoio/hugo/releases

  2. Spustitelný soubor Hugo umístíme podle jednoho ze souborů definovaných v PATH způsoby

  3. Vytvoření nového webu: hugo new site blog.example.com

  4. Změňte aktuální adresář na nově vytvořený: cd blog.example.com

  5. Vyberte motiv designu (https://github.com/budparr/gohugo-theme-ananke/releases nebo cokoliv)

  6. Vytvoříme první příspěvek: hugo new posts/my-amazing-post.md

  7. Přidejte obsah do vytvořeného souboru: content/posts/my-amazing-post.md.
    Až bude vše hotovo, změňte hodnotu konceptu na nepravdivý

  8. Generování statických souborů: hugo -D

Nyní je náš statický web umístěn v adresáři ./veřejnost a připraven na vaše první ruční nasazení.

Část 2: Nastavení Cloudflare

Nyní se podíváme na počáteční nastavení Cloudflare. Předpokládejme, že pro web již máme doménu. Vezměme si to jako příklad blog.example.com.

Krok 1: Vytvořte záznam DNS

Nejprve vyberte naši doménu a poté položku nabídky DNS. Vytvoříme blog A-record a uvedeme pro něj nějakou fiktivní IP (toto je oficiální doporučení, ale mohli to udělat trochu hezčí).

Jak vytvořit statický web na Cloudflare Workers Sites

Krok 2: Cloudflare Token

  1. Můj profil -> API tokeny karta-> Vytvořit token -> Vytvořit vlastní token

Jak vytvořit statický web na Cloudflare Workers Sites

Zde bude potřeba omezit token na účty a zóny, ale u oprávnění uvedených na obrázku ponechte možnost Upravit.

Token si uschovejte do budoucna, budeme ho potřebovat ve třetí části.

Krok 3: Získejte accountid a zoneid

Doména → O programu → [pravý postranní panel]

Jak vytvořit statický web na Cloudflare Workers SitesJsou moje, nepoužívejte je prosím :)

Uložte si je vedle tokenu, budeme je potřebovat i ve třetím díle.

Krok 4: Aktivujte pracovníky

Doména → Pracovníci → Správa pracovníků

Vybíráme jedinečné jméno a tarif Workers → Unlimited (dnes 5 $ měsíčně). Pokud chcete, můžete později upgradovat na bezplatnou verzi.

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

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

  1. Nainstalujte wrangler: npm i @cloudflare/wrangler -g

  2. Pojďme do adresáře našeho blogu: cd blog.example.com

  3. Spustit wrangler: wrangler init — site hugo-worker

  4. Vytvořte konfiguraci pro wrangler (na požádání zadejte token): wrangler config

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

  1. Uveďte accountid a zoneid

  2. Změna trasa na něco jako *blog.example.com/*

  3. Uveďte nepravdivý pro pracovnícidev

  4. Změňte kbelík na ./public (nebo kde se nachází váš statický web)

  5. Pokud máte v cestě více než jednu doménu, měli byste opravit cestu v pracovním skriptu: Workers-site/index.js (viz funkce handleEvent)

Skvělé, je čas nasadit web pomocí týmu wrangler publish.

Část 4: Automatizace nasazení

Tato příručka je napsána pro Gitlab, ale zachycuje podstatu a snadnost automatizovaného nasazení obecně.

Krok 1: Vytvořte a nakonfigurujte náš projekt

  1. Vytvořte nový projekt GitLab a nahrajte adresář site: blog.example.com s veškerým obsahem musí být umístěn v kořenovém adresáři projektu

  2. Jsme si stanovili variabilní CFAPITOKEN zde: Nastavení → CI / CD → Proměnné

Krok 2: Vytvořte soubor .gitlab-ci.yml a spusťte 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 # 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 #

První nasazení spouštíme ručně (CI/CD → Potrubí → Spustit potrubí) nebo zavázáním se k hlavní pobočce. Voila!

Závěr

Možná jsem to trochu podcenil a celý proces trval něco málo přes deset minut. Nyní však máte rychlý web s automatickým nasazením a novými nápady, co dalšího můžete s Workers dělat.

 Pracovníci Cloudflare    Hugo    GitLab Ci

Zdroj: www.habr.com

Přidat komentář