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å!

Hvordan lage et statisk nettsted på Cloudflare Workers Sites

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 dette flott 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 bruke Hugo, men dette er valgfritt.

Vi bruker Gitlab CI/CD for automatisering, men hva med akselerasjon? La oss distribuere nettstedet direkte til Cloudflare ved hjelp av Arbeidersider.

Hva kreves for å starte:

Del 1: Installere Hugo

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.

  1. Last ned Hugo fra https://github.com/gohugoio/hugo/releases

  2. Vi plasserer den kjørbare Hugo-filen i henhold til en av de som er definert i PATH måter

  3. Opprette et nytt nettsted: hugo new site blog.example.com

  4. Endre gjeldende katalog til den nyopprettede: cd blog.example.com

  5. Velg et designtema (https://github.com/budparr/gohugo-theme-ananke/releases eller hva som helst)

  6. La oss lage det første innlegget: hugo new posts/my-amazing-post.md

  7. Legg til innhold i den opprettede filen: content/posts/my-amazing-post.md.
    Når alt er gjort, endre utkastverdien til falsk

  8. 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 offisielle anbefaling, men de kunne ha gjort det litt penere).

Hvordan lage et statisk nettsted på Cloudflare Workers Sites

Trinn 2: Cloudflare Token

  1. Min profil -> API-tokens fane-> Lag Token -> Opprett egendefinert token

Hvordan lage et statisk nettsted på Cloudflare Workers Sites

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]

Hvordan lage et statisk nettsted på Cloudflare Workers SitesDisse 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:

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

  2. La oss gå til katalogen til bloggen vår: cd blog.example.com

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

  4. 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):

  1. Indikerer accountid og zoneid

  2. Endring rute til noe som *blog.example.com/*

  3. Indikerer falsk for arbeiderdev

  4. Endre bøtte til ./public (eller hvor det statiske nettstedet ditt er plassert)

  5. 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 teamet wrangler 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

  1. Opprett et nytt GitLab-prosjekt og last opp site:-katalogen blog.example.com med alt innhold må være plassert i prosjektets rotkatalog

  2. Vi setter variabel CFAPITOKEN her: innstillinger CI / CDVariabler

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.

 Cloudflare-arbeidere    Hugo    GitLab Ci

Kilde: www.habr.com

Legg til en kommentar