Hvordan lage et statisk nettsted på Cloudflare Workers Sites
Hallo! Jeg heter Dima, jeg er teknisk leder for SysOps-teamet på Wrike. I denne artikkelen vil jeg fortelle deg hvordan du lager et nettsted så nært brukeren som mulig på 10 minutter og 5 dollar i måneden og automatiserer distribusjonen. Artikkelen har nesten ingenting å gjøre med problemene vi løser i teamet vårt. Dette er snarere min personlige erfaring og inntrykk av å bli kjent med en teknologi som er ny for meg. Jeg prøvde å beskrive trinnene så detaljert som mulig, slik at instruksjonene ville være nyttige for personer med ulik erfaring. Jeg håper du vil nyte. Gå!
Så kanskje du allerede har funnet en enkel og billig måte å være vert for et nettsted. Kanskje til og med gratis, som beskrevet i detteflott artikkel.
Men plutselig kjeder du deg fortsatt og vil røre ved den modige nye teknologiverdenen? La oss si at du tenker på å automatisere distribusjonen og ønsker å øke hastigheten på nettstedet ditt så mye som mulig? I denne artikkelen skal vi brukeHugo, men dette er valgfritt.
Vi bruker Gitlab CI/CD for automatisering, men hva med akselerasjon? La oss distribuere nettstedet direkte til Cloudflare ved hjelp avArbeidersider.
Hvis du allerede har Hugo installert, eller hvis du foretrekker en annen statisk generator (eller ikke bruker en i det hele tatt), kan du hoppe over denne delen.
La oss lage det første innlegget: hugo new posts/my-amazing-post.md
Legg til innhold i den opprettede filen: content/posts/my-amazing-post.md. Når alt er gjort, endre utkastverdien til falsk
Genererer statiske filer: hugo -D
Nå er vårt statiske nettsted plassert i en katalog ./offentlig og klar for din første manuelle distribusjon.
Del 2: Sette opp Cloudflare
La oss nå se på det første oppsettet av Cloudflare. La oss anta at vi allerede har et domene for nettstedet. La oss ta som et eksempel blog.example.com.
Trinn 1: Opprett en DNS-oppføring
Først velger du vårt domene, og deretter menyelementet DNS. Vi oppretter en blogg A-post og angir en fiktiv IP for den (dette er den offisielleanbefaling, men de kunne ha gjort det litt penere).
Trinn 2: Cloudflare Token
Min profil -> API-tokens fane-> Lag Token -> Opprett egendefinert token
Her må du begrense tokenet til kontoer og soner, men la alternativet Rediger stå for tillatelsene som er oppført på bildet.
Lagre tokenet for fremtiden, vi trenger det i den tredje delen.
Trinn 3: Få accountid og zoneid
Domene → Oversikt → [høyre sidefelt]
Disse er mine, ikke bruk dem:)
Lagre dem ved siden av tokenet, vi trenger dem også i den tredje delen.
Trinn 4: Aktiver Workers
Domene → Arbeidere → Administrer arbeidere
Vi velger et unikt navn og tariff Arbeidere → Ubegrenset ($5 per måned i dag). Hvis du ønsker det, kan du senere oppgradere til gratisversjonen.
Del 3: Første distribusjon (manuell distribusjon)
Jeg gjorde den første manuelle distribusjonen for å finne ut hva som egentlig foregikk der. Selv om alt dette kan gjøres enklere:
Installer wrangler: npm i @cloudflare/wrangler -g
La oss gå til katalogen til bloggen vår: cd blog.example.com
Start wrangler: wrangler init — site hugo-worker
Opprett en konfigurasjon for wrangler (skriv inn token når du blir spurt): wrangler config
La oss nå prøve å gjøre endringer i den nyopprettede filen wrangler.toml (her full liste over mulige innstillinger):
Indikerer accountid og zoneid
Endring rute til noe som *blog.example.com/*
Indikererfalskfor arbeiderdev
Endre bøtte til ./public (eller hvor det statiske nettstedet ditt er plassert)
Hvis du har mer enn ett domene i banen, bør du korrigere banen i arbeidsskriptet: workers-site/index.js (se funksjon handleEvent)
Flott, det er på tide å distribuere nettstedet ved hjelp av teametwrangler publish.
Del 4: Implementeringsautomatisering
Denne veiledningen er skrevet for Gitlab, men den fanger opp essensen og enkelheten til automatisert distribusjon generelt.
Trinn 1: Opprett og konfigurer prosjektet vårt
Opprett et nytt GitLab-prosjekt og last opp site:-katalogen blog.example.com med alt innhold må være plassert i prosjektets rotkatalog
Vi settervariabel CFAPITOKEN her: innstillinger → CI / CD → Variabler
Trinn 2: Opprett en .gitlab-ci.yml-fil og kjør den første distribusjonen
Opprett en fil .gitlab-ci.yml i roten med følgende innhold:
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 #
Vi starter den første distribusjonen manuelt (CI/CD → Rørledninger → Kjør rørledning) eller ved å binde seg til mastergrenen. Voila!
Konklusjon
Vel, jeg kan ha undervurdert det litt, og hele prosessen tok litt over ti minutter. Men nå har du et raskt nettsted med automatisk distribusjon og noen nye ideer om hva annet du kan gjøre med Workers.