🥇Kako narediti statično spletno mesto na spletnih mestih Cloudflare Workers

Zdravo! Moje ime je Dima, sem tehnični vodja ekipe SysOps pri Wrike. V tem članku vam bom povedal, kako narediti spletno mesto čim bližje uporabniku v 10 minutah in 5 dolarjih na mesec ter avtomatizirati njegovo namestitev. Članek nima skoraj nič skupnega s problemi, ki jih rešujemo znotraj naše ekipe. To je bolj moja osebna izkušnja in vtisi spoznavanja zame nove tehnologije. Korake sem poskušal opisati čim bolj podrobno, da bi bila navodila uporabna tudi za ljudi z različnimi izkušnjami. Upam, da boste uživali. Pojdi!

Torej, morda ste že našli preprost in poceni način za gostovanje spletne strani. Morda celo brezplačno, kot je opisano v tem odličen članek.

Toda nenadoma vam je še vedno dolgčas in se želite dotakniti pogumnega novega sveta tehnologije? Recimo, da razmišljate o avtomatizaciji uvajanja in bi radi čim bolj pospešili svoje spletno mesto? V tem članku bomo uporabili Hugo, vendar to ni obvezno.

Za avtomatizacijo uporabljamo Gitlab CI/CD, kaj pa pospeševanje? Razmestimo spletno mesto neposredno v Cloudflare z uporabo Delavska mesta.

Kaj je potrebno za začetek:

Gitlab (vaš oz oblačno)
Račun na Cloudflare
Nameščeno nodejs/npm

1. del: Namestitev Huga

Če že imate nameščen Hugo ali če imate raje drug generator statičnih spletnih mest (ali ga sploh ne uporabljate), lahko ta del preskočite.

Prenesite Hugo iz https://github.com/gohugoio/hugo/releases
Izvedljivo datoteko Hugo postavimo v skladu z eno od tistih, ki so opredeljene v POT načine
Ustvarjanje novega spletnega mesta: hugo new site blog.example.com
Spremenite trenutni imenik v novo ustvarjenega: cd blog.example.com
Izberite temo oblikovanja (https://github.com/budparr/gohugo-theme-ananke/releases ali karkoli)
Ustvarimo prvo objavo: hugo new posts/my-amazing-post.md
Dodajte vsebino ustvarjeni datoteki: content/posts/my-amazing-post.md.
Ko je vse končano, spremenite vrednost osnutka v false
Ustvarjanje statičnih datotek: hugo -D

Zdaj se naše statično spletno mesto nahaja znotraj imenika ./javno in pripravljen za vašo prvo ročno uvajanje.

2. del: Nastavitev Cloudflare

Zdaj pa poglejmo začetno nastavitev Cloudflare. Predpostavimo, da že imamo domeno za spletno mesto. Vzemimo za primer blog.example.com.

1. korak: ustvarite vnos DNS

Najprej izberemo našo domeno, nato pa točko menija DNS. Ustvarimo blog A-zapis in zanj navedemo nekaj izmišljenih IP (to je uradni priporočilo, lahko pa bi ga malo polepšali).

2. korak: Žeton Cloudflare

Moj profil -> API žetoni zavihek-> Ustvari žeton -> Ustvarite žeton po meri

Tu boste morali žeton omejiti na račune in območja, vendar pustite možnost Uredi za dovoljenja, navedena na sliki.

Shranite žeton za prihodnost, potrebovali ga bomo v tretjem delu.

3. korak: pridobite accountid in zoneid

Domena → Pregled → [desna stranska vrstica]

Te so moje, prosim ne uporabljajte jih :)

Shranite jih poleg žetona, potrebovali jih bomo tudi v tretjem delu.

4. korak: Aktivirajte delavce

Domena → Delavci → Upravljanje delavcev

Izberemo edinstveno ime in tarifo Delavci → Neomejeno (5 $ na mesec danes). Če želite, lahko kasneje nadgradite na brezplačno različico.

3. del: Prva uvedba (ročna uvedba)

Naredil sem prvo ročno uvajanje, da bi ugotovil, kaj se tam v resnici dogaja. Čeprav je vse to mogoče storiti preprosteje:

Namestite Wrangler: npm i @cloudflare/wrangler -g
Pojdimo v imenik našega bloga: cd blog.example.com
Launch Wrangler: wrangler init — site hugo-worker
Ustvarite konfiguracijo za Wrangler (vnesite žeton, ko ste pozvani): wrangler config

Zdaj pa poskusimo spremeniti novo ustvarjeno datoteko wrangler.toml (tukaj celoten seznam možnih nastavitev):

Navajamo accountid in zoneid
Spremenimo se pot na nekaj takega *blog.example.com/*
Navajamo false za worksdev
Spremenite vedro v ./public (ali kje se nahaja vaše statično spletno mesto)
Če imate na poti več kot eno domeno, potem popravite pot v delujočem skriptu: delavsko-mesto/index.js (glej funkcijo handleEvent)

Odlično, čas je, da spletno mesto postavimo s pomočjo ekipe wrangler publish.

4. del: Avtomatizacija uvajanja

Ta vodnik je napisan za Gitlab, vendar zajame bistvo in enostavnost avtomatiziranega uvajanja na splošno.

1. korak: Ustvarite in konfigurirajte naš projekt

Ustvarite nov projekt GitLab in naložite imenik site: blog.example.com z vso vsebino mora biti v korenskem imeniku projekta
Postavili smo spremenljivka CFAPITOKEN tukaj: Nastavitve → CI / CD → Spremenljivke

2. korak: Ustvarite datoteko .gitlab-ci.yml in zaženite prvo uvedbo

Ustvarite datoteko .gitlab-ci.yml v korenu z naslednjo vsebino:

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 #

Prvo uvedbo zaženemo ročno (CI/CD → Cevovodi → Zaženi cevovod) ali z zavezanostjo glavni veji. Voila!

Zaključek

No, morda sem ga nekoliko podcenjeval in celoten postopek je trajal nekaj več kot deset minut. Zdaj pa imate hitro spletno mesto s samodejnim uvajanjem in nekaj svežih idej o tem, kaj še lahko počnete z Workers.

Delavci v oblaku Hugo GitLab Ci

Vir: www.habr.com

Kako narediti statično spletno mesto na spletnih mestih Cloudflare Workers