Hur man skapar en statisk webbplats med Cloudflare Workers Sites

Hej! Jag heter Dima och är techledare för SysOps-teamet på Wrike. I denna artikel kommer jag att berätta hur du kan skapa en användarvänlig webbplats och automatisera dess distribution på bara 10 minuter och för 5 dollar i månaden. Artikeln handlar nästan inte om de problem som vi löser inom vårt team. Det är snarare min personliga erfarenhet och intryck av att bekanta mig med en ny teknik. Jag har försökt att beskriva stegen så detaljerat som möjligt för att vägledningen ska vara användbar för personer med olika erfarenhet. Hoppas att du gillar det. Låt oss börja!

Så, kanske har du redan hittat ett enkelt och billigt sätt att vara värd för en webbplats. Kanske till och med gratis, som beskrivs i denna utmärkta artikel.

Men kanske känner du dig fortfarande uttråkad och vill ta del av den underbara nya värld av teknik? Låt oss säga att du funderar på att automatisera distributionen och vill maximera hastigheten på webbplatsen? I denna artikel kommer vi att använda Hugo, men det är inte nödvändigt.

För automatiseringen använder vi Gitlab CI/CD, men vad gör vi med hastighetsökningen? Låt oss distribuera webbplatsen direkt i Cloudflare med hjälp av Worker Sites.

Vad som krävs för att komma igång:

• Gitlab (din egen eller molly)

• Konto på Cloudflare

• Installerad nodejs/npm

Del 1: Installera Hugo

Om du redan har installerat Hugo eller om du föredrar en annan statisk webbplatsgenerator (eller inte använder dem alls) kan du hoppa över den här delen.

1. Ladda ner Hugo från https://github.com/gohugoio/hugo/releases

2. Placera Hugo-binären i en av de angivna PATH vägarna

3. Skapa en ny webbplats: hugo new site blog.example.com

4. Byt nuvarande katalog till den just skapade: cd blog.example.com

5. Välj ett tema (https://github.com/budparr/gohugo-theme-ananke/releases eller vad som helst)

6. Skapa det första inlägget: hugo new posts/my-amazing-post.md

7. Lägg till innehåll i den skapade filen: content/posts/my-amazing-post.md.
   När allt är klart, ändra värdet på utkast till false

8. Generera statiska filer: hugo -D

Nu ligger vår statiska webbplats i katalogen ./public och är redo för den första manuella distributionen.

Del 2: Konfigurera Cloudflare

Nu ska vi gå igenom den första konfigurationen av Cloudflare. Anta att vi redan har en domän för webbplatsen. Som exempel tar vi blog.example.com.

Steg 1: Skapa en DNS-post

Först väljer vi vår domän och sedan menypunkten DNS. Skapa en A-post för blog och ange en slumpmässig IP-adress (detta är den officiella rekommendationen, men de kunde ha gjort det lite finare).

Steg 2: Cloudflare-token

1. Min profil -> API-token flik-> Skapa token -> Skapa anpassad token

Här måste du begränsa token till konton och zoner, men lämna Edit-möjligheten för de angivna tillstånd som visas i bilden.

Spara token för framtiden, vi kommer att behöva den i del tre.

Steg 3: Hämta accountid och zoneid

Domän → Översikt → [höger sidopanel]

Det här är mina, vänligen använd dem inte 🙂

Spara dem tillsammans med token, de kommer också att behövas i del tre.

Steg 4: Aktivering av Workers

Domän → Workers → Hantera Workers

Välj ett unikt namn och plan för Workers → Unlimited (5 USD per månad för närvarande). Du kan later byta till en gratisversion om du vill.

Del 3: Första distributionen (manuell utplacering)

Jag gjorde den första distributionen manuellt för att ta reda på vad som egentligen händer. Även om allt detta kan göras enklare:

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

2. Gå till katalogen för vår blogg: cd blog.example.com

3. Kör wrangler: wrangler init — site hugo-worker

4. Skapa en konfig för wrangler (ange token när det efterfrågas): wrangler config

Nu ska vi försöka göra ändringar i den nyss skapade filen wrangler.toml (här fullständig lista över möjliga inställningar):

1. Ange accountid och zoneid

2. Ändra route till något som *blog.example.com/*

3. Ange false för workersdev

4. Ändra bucket till ./public (eller där din statiska webbplats finns)

5. Om du har mer än en domän i vägen, bör du justera sökvägen i skriptet för arbetet: workers-site/index.js (se funktionen handleEvent)

Bra, det är dags att distribuera webbplatsen med kommandot wrangler publish.

Del 4: Automatisering av distribution

Denna vägledning är skapad för GitLab, men den förmedlar kärnan och enkelheten i automatiserad distribution som helhet.

Steg 1: Skapa och ställ in vårt projekt

1. Skapa ett nytt GitLab-projekt och ladda upp webbplatsen: katalog blog.example.com med allt innehåll ska finnas i projektets rotkatalog

2. Ange variabel CFAPITOKEN här: Inställningar → CI/CD → Variabler

Steg 2: Skapa filen .gitlab-ci.yml och starta den första distributionen

Skapa filen .gitlab-ci.yml i roten med följande innehåll:

steg:
  - bygg
  - distribuera

bygg:
  bild: monachus/hugo
  steg: bygg
  variabler:
    GIT_SUBMODULE_STRATEGY: rekursiv
  skript:
    - cd blog.example.com/
    - hugo
  artefakter:
    vägar:
      - blog.example.com/public
  endast:
    - master # detta jobb kommer endast att påverka 'master' grenen
  taggar:
    - gitlab-org-docker #


distribuera:
  bild: timbru31/ruby-node:2.3
  steg: distribuera
  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
  artefakter:
    vägar:
      - blog.example.com/public
  endast:
    - master # detta jobb kommer endast att påverka 'master' grenen
  taggar:
    - gitlab-org-docker #

Initiera den första distribueringen manuellt (CI / CD → Pipeline → Kör Pipeline) eller genom att skicka en commit till master-grenen. Voilà!

Slutsats

Tja, kanske jag överdrev lite, och hela processen tog lite mer än tio minuter. Men nu har du en snabb webbplats med automatisk distribution och några fräscha idéer om vad mer du kan göra med hjälp av Workers.

 Cloudflare Workers    Hugo    GitLab Ci

Källa: habr.com