Si të krijoni një faqe statike në faqet e punëtorëve të Cloudflare

Përshëndetje! Emri im është Dima, unë jam një drejtues teknik për ekipin SysOps në Wrike. Në këtë artikull do t'ju tregoj se si të bëni një faqe interneti sa më afër përdoruesit në 10 minuta dhe 5 dollarë në muaj dhe të automatizoni vendosjen e saj. Artikulli nuk ka pothuajse asnjë lidhje me problemet që ne zgjidhim brenda ekipit tonë. Kjo është më tepër përvoja ime personale dhe përshtypjet e njohjes me një teknologji që është e re për mua. U përpoqa t'i përshkruaj hapat sa më shumë të jetë e mundur në mënyrë që udhëzimet të jenë të dobishme për njerëzit me përvojë të ndryshme. Unë shpresoj se ju do të gëzojnë. Shkoni!

Si të krijoni një faqe statike në faqet e punëtorëve të Cloudflare

Pra, ndoshta ju keni gjetur tashmë një mënyrë të thjeshtë dhe të lirë për të pritur një faqe interneti. Ndoshta edhe falas, siç përshkruhet në këtë artikull i madh.

Por befas jeni ende i mërzitur dhe dëshironi të prekni botën e re të guximshme të teknologjisë? Le të themi se po mendoni për automatizimin e vendosjes dhe dëshironi të shpejtoni faqen tuaj sa më shumë që të jetë e mundur? Në këtë artikull do të përdorim Hugo, por kjo është fakultative.

Ne përdorim Gitlab CI/CD për automatizim, por çfarë ndodh me përshpejtimin? Le ta vendosim faqen direkt në Cloudflare duke përdorur Vendet e punëtorëve.

Çfarë kërkohet për të filluar:

Pjesa 1: Instalimi i Hugo

Nëse tashmë keni të instaluar Hugo, ose nëse preferoni një gjenerues tjetër statik të faqes (ose nuk e përdorni fare), atëherë mund ta kaloni këtë pjesë.

  1. Shkarko Hugo nga https://github.com/gohugoio/hugo/releases

  2. Ne vendosim skedarin e ekzekutueshëm Hugo sipas një prej atyre të përcaktuara në RRUGË mënyrat

  3. Krijimi i një faqeje të re: hugo new site blog.example.com

  4. Ndryshoni drejtorinë aktuale në atë të krijuar rishtazi: cd blog.example.com

  5. Zgjidhni një temë të projektimit (https://github.com/budparr/gohugo-theme-ananke/releases ose çfarëdo)

  6. Le të krijojmë postimin e parë: hugo new posts/my-amazing-post.md

  7. Shtoni përmbajtje në skedarin e krijuar: përmbajtje/post/my-amamazing-post.md.
    Kur gjithçka të ketë përfunduar, ndryshoni vlerën e draftit në i rremë

  8. Gjenerimi i skedarëve statikë: hugo -D

Tani faqja jonë statike ndodhet brenda një drejtorie ./publik dhe gati për vendosjen tuaj të parë manuale.

Pjesa 2: Vendosja e Cloudflare

Tani le të shohim konfigurimin fillestar të Cloudflare. Le të supozojmë se tashmë kemi një domen për sitin. Le të marrim si shembull blog.example.com.

Hapi 1: Krijoni një hyrje DNS

Së pari, zgjidhni domenin tonë dhe më pas artikullin e menysë DNS. Ne krijojmë një rekord në blog dhe tregojmë disa IP fiktive për të (ky është zyrtari rekomandim, por mund ta kishin bërë pak më të bukur).

Si të krijoni një faqe statike në faqet e punëtorëve të Cloudflare

Hapi 2: Token Cloudflare

  1. My Profile -> Shenjat API tab-> Krijoni Token -> Krijo Token të personalizuar

Si të krijoni një faqe statike në faqet e punëtorëve të Cloudflare

Këtu do t'ju duhet të kufizoni tokenin në llogaritë dhe zonat, por lini opsionin Edit për lejet e listuara në foto.

Ruajeni shenjën për të ardhmen, do të na duhet në pjesën e tretë.

Hapi 3: Merrni llogari dhe zona

Fushë Përmbledhje → [shiriti anësor i djathtë]

Si të krijoni një faqe statike në faqet e punëtorëve të CloudflareKëto janë të miat, mos i përdorni ju lutem :)

Ruajini pranë tokenit, do të na duhen edhe në pjesën e tretë.

Hapi 4: Aktivizoni Punëtorët

Fushë Punëtorët Menaxho punëtorët

Ne zgjedhim një emër unik dhe tarifë Punëtorët → Pafund (5 dollarë në muaj sot). Nëse dëshironi, mund të përmirësoni më vonë në versionin falas.

Pjesa 3: Vendosja e parë (vendosja manuale)

Bëra vendosjen e parë manuale për të zbuluar se çfarë po ndodhte me të vërtetë atje. Edhe pse e gjithë kjo mund të bëhet më e thjeshtë:

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

  2. Le të shkojmë në drejtorinë e blogut tonë: cd blog.example.com

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

  4. Krijoni një konfigurim për wrangler (futni shenjën kur të kërkohet): wrangler config

Tani le të përpiqemi të bëjmë ndryshime në skedarin e krijuar rishtazi grindavec.toml (këtu lista e plotë e cilësimeve të mundshme):

  1. Ne tregojmë llogaritur dhe zoneid

  2. Ndryshimi rrugë për diçka të tillë *blog.example.com/*

  3. Ne tregojmë i rremë për punëtorëtdev

  4. Ndrysho kovën në ./public (ose ku ndodhet faqja juaj statike)

  5. Nëse keni më shumë se një domen në shtegun, atëherë duhet të korrigjoni shtegun në skriptin e punës: punëtorë-faqe/indeks.js (shih funksionin handleEvent)

E shkëlqyeshme, është koha për të vendosur faqen duke përdorur ekipin wrangler publish.

Pjesa 4: Automatizimi i vendosjes

Ky udhëzues është shkruar për Gitlab, por ai kap thelbin dhe lehtësinë e vendosjes së automatizuar në përgjithësi.

Hapi 1: Krijoni dhe konfiguroni projektin tonë

  1. Krijoni një projekt të ri GitLab dhe ngarkoni direktorinë e sitit: blog.example.com me të gjitha përmbajtjet duhet të gjendet në direktorinë rrënjë të projektit

  2. Ne vendosëm e ndryshueshme CFAPITOKEN këtu: Cilësimet CI / CDVariablat

Hapi 2: Krijoni një skedar .gitlab-ci.yml dhe ekzekutoni vendosjen e parë

Krijo një skedar .gitlab-ci.yml në rrënjë me këtë përmbajtje:

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 #

Ne nisim vendosjen e parë me dorë (CI/CD tubacionet Run Pipeline) ose duke u angazhuar në degën master. Voila!

Përfundim

Epo, mund ta kem nënvlerësuar pak, dhe i gjithë procesi zgjati pak më shumë se dhjetë minuta. Por tani ju keni një sajt të shpejtë me vendosje automatike dhe disa ide të reja se çfarë tjetër mund të bëni me Punëtorët.

 Punëtorët e Cloudflare    Hugo    GitLab Ci

Burimi: www.habr.com

Shto një koment