🥇Kaip sukurti statinę svetainę Cloudflare Workers Sites

Sveiki! Mano vardas Dima, aš esu „Wrike“ SysOps komandos techninis vadovas. Šiame straipsnyje papasakosiu, kaip padaryti svetainę kuo arčiau vartotojo ir automatizuoti jos diegimą per 10 minučių ir 5 dolerius per mėnesį. Straipsnis beveik neturi nieko bendra su problemomis, kurias sprendžiame savo komandoje. Tai greičiau mano asmeninė patirtis ir įspūdžiai susipažinus su man nauja technologija. Stengiausi kuo detaliau aprašyti žingsnius, kad instrukcijos būtų naudingos skirtingos patirties turintiems žmonėms. Tikiuosi jums patiks. Pirmyn!

Taigi, galbūt jau radote paprastą ir pigų būdą priglobti svetainę. Galbūt net nemokama, kaip aprašyta čia puikus straipsnis.

Bet staiga jums vis tiek nuobodu ir norite prisiliesti prie naujojo drąsaus technologijų pasaulio? Tarkime, kad galvojate apie diegimo automatizavimą ir norėtumėte kiek įmanoma pagreitinti savo svetainę? Šiame straipsnyje mes naudosime Hugo, bet tai neprivaloma.

Automatizavimui naudojame Gitlab CI/CD, bet kaip dėl pagreitinimo? Įdiegkime svetainę tiesiai į „Cloudflare“, naudodami Darbuotojų svetainės.

Ko reikia norint pradėti:

Gitlab (savo arba Debesuota)
Sąskaita „Cloudflare“.
Įdiegta nodejs/npm

1 dalis: „Hugo“ diegimas

Jei jau esate įdiegę „Hugo“ arba pageidaujate kitokio statinio svetainės generatoriaus (arba jo visai nenaudojate), galite praleisti šią dalį.

Atsisiųskite Hugo iš https://github.com/gohugoio/hugo/releases
Mes dedame Hugo vykdomąjį failą pagal vieną iš nurodytų KELIAS būdai
Naujos svetainės kūrimas: hugo new site blog.example.com
Pakeiskite dabartinį katalogą į naujai sukurtą: cd blog.example.com
Pasirinkite dizaino temą (https://github.com/budparr/gohugo-theme-ananke/releases ar koks skirtumas)
Sukurkime pirmąjį įrašą: hugo new posts/my-amazing-post.md
Pridėti turinį į sukurtą failą: content/posts/my-amazing-post.md.
Kai viskas bus padaryta, pakeiskite juodraščio reikšmę į klaidingas
Statinių failų generavimas: hugo -D

Dabar mūsų statinė svetainė yra kataloge ./vieša ir pasiruošę pirmam rankiniam diegimui.

2 dalis: „Cloudflare“ nustatymas

Dabar pažvelkime į pradinę „Cloudflare“ sąranką. Tarkime, kad jau turime svetainės domeną. Paimkime kaip pavyzdį blog.example.com.

1 veiksmas: sukurkite DNS įrašą

Pirmiausia pasirinkite mūsų domeną, o tada meniu elementą DNS. Sukuriame dienoraščio A įrašą ir nurodome jam kokį nors fiktyvų IP adresą (tai yra oficialus rekomendacija, bet jie galėjo jį šiek tiek pagražinti).

2 veiksmas: „Cloudflare Token“.

Mano profilis -> API prieigos raktai skirtukas-> Kurti prieigos raktą -> Sukurkite pasirinktinį prieigos raktą

Čia turėsite apriboti prieigos raktą paskyromis ir zonomis, tačiau palikite parinktį Redaguoti paveikslėlyje išvardytiems leidimams.

Išsaugokite žetoną ateičiai, mums jo prireiks trečioje dalyje.

3 veiksmas: gaukite accountid ir zoneid

Domenas → Apžvalga → [dešinė šoninė juosta]

Tai mano, nenaudokite :)

Išsaugokite juos šalia žetono, mums jų taip pat reikės trečioje dalyje.

4 veiksmas: suaktyvinkite darbuotojus

Domenas → Darbuotojai → Tvarkykite darbuotojus

Mes pasirenkame unikalų pavadinimą ir tarifą Darbuotojai → Neribotas (šiandien 5 USD per mėnesį). Jei norite, vėliau galėsite atnaujinti į nemokamą versiją.

3 dalis. Pirmasis diegimas (rankinis diegimas)

Pirmą kartą įdiegiau rankiniu būdu, kad išsiaiškinčiau, kas ten iš tikrųjų vyksta. Nors visa tai galima padaryti paprasčiau:

Įdiekite wrangler: npm i @cloudflare/wrangler -g
Eikime į mūsų tinklaraščio katalogą: cd blog.example.com
Paleisti wrangler: wrangler init — site hugo-worker
Sukurkite „wrangler“ konfigūraciją (paprašius įveskite prieigos raktą): wrangler config

Dabar pabandykime pakeisti naujai sukurtą failą Wrangler.toml (čia visas galimų nustatymų sąrašas):

Mes nurodome buhalterinė ir zoninė
Keisti maršrutas į kažką panašaus į *blog.example.com/*
Mes nurodome klaidingas už darbininkai dev
Keisti segmentą į ./public (arba kur yra jūsų statinė svetainė)
Jei kelyje turite daugiau nei vieną domeną, turėtumėte pataisyti kelią darbiniame scenarijuje: Workers-site/index.js (žr. funkciją rankenaĮvykis)

Puiku, laikas įdiegti svetainę naudojant komandą wrangler publish.

4 dalis. Diegimo automatizavimas

Šis vadovas skirtas „Gitlab“, tačiau jame pateikiama apskritai automatinio diegimo esmė ir paprastumas.

1 veiksmas: sukurkite ir sukonfigūruokite mūsų projektą

Sukurkite naują „GitLab“ projektą ir įkelkite svetainę: katalogas blog.example.com su visu turiniu turi būti projekto šakniniame kataloge
Mes nustatėme kintamasis CFAPITOKEN čia: Nustatymai → CI / CD → Kintamieji

2 veiksmas: sukurkite .gitlab-ci.yml failą ir paleiskite pirmąjį diegimą

Sukurkite failą .gitlab-ci.yml šaknyje su tokiu turiniu:

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 #

Pirmąjį diegimą paleidžiame rankiniu būdu (CI/CD → Vamzdynai → Vykdyti vamzdyną) arba įsipareigojant pagrindinei šakai. Voila!

išvada

Na, galbūt šiek tiek sumenkinau, ir visas procesas užtruko kiek daugiau nei dešimt minučių. Tačiau dabar turite greitą svetainę su automatiniu diegimu ir keletą naujų idėjų, ką dar galite padaryti su darbuotojais.

„Cloudflare“ darbuotojai Hugo GitLab Ci

Šaltinis: www.habr.com

Kaip sukurti statinę svetainę „Cloudflare Workers Sites“.