Hoe om 'n statiese webwerf op Cloudflare Workers Sites te maak

Hallo! My naam is Dima, ek is 'n tegniese leier vir die SysOps-span by Wrike. In hierdie artikel sal ek jou vertel hoe om 'n webwerf so na as moontlik aan die gebruiker te maak binne 10 minute en 5 dollar per maand en die ontplooiing daarvan te outomatiseer. Die artikel het amper niks te doen met die probleme wat ons binne ons span oplos nie. Dit is eerder my persoonlike ervaring en indrukke om 'n tegnologie te leer ken wat vir my nuut is. Ek het probeer om die stappe in soveel detail as moontlik te beskryf sodat die instruksies nuttig sou wees vir mense met verskillende ervaring. Ek hoop jy sal dit geniet. Gaan!

Hoe om 'n statiese webwerf op Cloudflare Workers Sites te maak

So, miskien het jy reeds 'n eenvoudige en goedkoop manier gevind om 'n webwerf aan te bied. Miskien selfs gratis, soos hierin beskryf puik artikel.

Maar skielik is jy nog steeds verveeld en wil jy die dapper nuwe wêreld van tegnologie aanraak? Kom ons sê jy dink daaraan om ontplooiing te outomatiseer en wil jou werf soveel as moontlik bespoedig? In hierdie artikel sal ons gebruik Hugo, maar dit is opsioneel.

Ons gebruik Gitlab CI/CD vir outomatisering, maar wat van versnelling? Kom ons ontplooi die webwerf direk na Cloudflare met behulp van Werkerwerwe.

Wat is nodig om te begin:

Deel 1: Installeer Hugo

As jy Hugo reeds geïnstalleer het, of as jy 'n ander statiese werfgenerator verkies (of glad nie een gebruik nie), dan kan jy hierdie deel oorslaan.

  1. Laai Hugo af van https://github.com/gohugoio/hugo/releases

  2. Ons plaas die Hugo-uitvoerbare lêer volgens een van dié wat in PATH maniere

  3. Skep 'n nuwe webwerf: hugo new site blog.example.com

  4. Verander die huidige gids na die nuutgeskepte een: cd blog.example.com

  5. Kies 'n ontwerptema (https://github.com/budparr/gohugo-theme-ananke/releases of wat ook al)

  6. Kom ons skep die eerste pos: hugo new posts/my-amazing-post.md

  7. Voeg inhoud by die geskepde lêer: content/posts/my-amazing-post.md.
    Wanneer alles klaar is, verander die konsepwaarde na valse

  8. Genereer statiese lêers: hugo -D

Nou is ons statiese webwerf in 'n gids geleë ./publiek en gereed vir jou eerste handmatige ontplooiing.

Deel 2: Stel Cloudflare op

Kom ons kyk nou na die aanvanklike opstelling van Cloudflare. Kom ons neem aan dat ons reeds 'n domein vir die webwerf het. Kom ons neem as voorbeeld blog.voorbeeld.com.

Stap 1: Skep 'n DNS-inskrywing

Kies eers ons domein, en dan die kieslys-item DNS. Ons skep 'n blog A-rekord en dui 'n fiktiewe IP daarvoor aan (dit is die amptelike aanbeveling, maar hulle kon dit 'n bietjie mooier gemaak het).

Hoe om 'n statiese webwerf op Cloudflare Workers Sites te maak

Stap 2: Cloudflare Token

  1. My profiel -> API-tokens oortjie-> Skep teken -> Skep pasgemaakte teken

Hoe om 'n statiese webwerf op Cloudflare Workers Sites te maak

Hier sal jy die teken moet beperk tot rekeninge en sones, maar laat die Redigeer-opsie vir die toestemmings wat in die prentjie gelys word.

Stoor die teken vir die toekoms, ons sal dit in die derde deel nodig hê.

Stap 3: Kry accountid en zoneid

Domain Oorsig → [regterkantbalk]

Hoe om 'n statiese webwerf op Cloudflare Workers Sites te maakDit is myne, moet dit asseblief nie gebruik nie :)

Stoor hulle langs die teken, ons sal hulle ook in die derde deel nodig hê.

Stap 4: Aktiveer Werkers

Domain Werkers Bestuur werkers

Ons kies 'n unieke naam en tarief Werkers → Onbeperk ($5 per maand vandag). As jy wil, kan jy later opgradeer na die gratis weergawe.

Deel 3: Eerste ontplooiing (handmatige ontplooiing)

Ek het die eerste handontplooiing gedoen om uit te vind wat werklik daar aangaan. Alhoewel dit alles makliker gedoen kan word:

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

  2. Kom ons gaan na die gids van ons blog: cd blog.example.com

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

  4. Skep 'n konfigurasie vir wrangler (voer die teken in wanneer gevra word): wrangler config

Kom ons probeer nou om veranderinge aan die nuutgeskepte lêer aan te bring wrangler.toml (hier volledige lys van moontlike instellings):

  1. Ons dui aan accountid en zoneid

  2. Verander roete na iets soos *blog.example.com/*

  3. Ons dui aan valse vir werkersdev

  4. Verander emmer na ./publiek (of waar jou statiese werf geleë is)

  5. As jy meer as een domein in die pad het, moet jy die pad in die werkskrif regstel: werkers-werf/index.js (sien funksie hanteer Gebeurtenis)

Wonderlik, dit is tyd om die webwerf te ontplooi deur die span te gebruik wrangler publish.

Deel 4: Ontplooiingsoutomatisering

Hierdie gids is vir Gitlab geskryf, maar dit vang die essensie en gemak van outomatiese ontplooiing in die algemeen vas.

Stap 1: Skep en konfigureer ons projek

  1. Skep 'n nuwe GitLab-projek en laai die webwerf: gids op blog.voorbeeld.com met alle inhoud moet in die projekhoofgids geleë wees

  2. Ons stel veranderlike CFAPITOKEN hier: Stellings CI / CDVeranderlikes

Stap 2: Skep 'n .gitlab-ci.yml-lêer en voer die eerste ontplooiing uit

Skep 'n lêer .gitlab-ci.yml in die wortel met die volgende inhoud:

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 #

Ons begin die eerste ontplooiing handmatig (CI/CD Pypleidings Loop pyplyn) of deur hom tot die meestertak te verbind. Voila!

Gevolgtrekking

Wel, ek het dit dalk effens onderskat, en die hele proses het net meer as tien minute geneem. Maar nou het jy 'n vinnige webwerf met outomatiese ontplooiing en 'n paar vars idees oor wat jy nog met Workers kan doen.

 Cloudflare-werkers    Hugo    GitLab Ci

Bron: will.com

Voeg 'n opmerking