🥇Kuidas luua staatiline veebileht Cloudflare Workers Sites

Tere! Minu nimi on Dima, ma olen Wrike'i SysOps-meeskonna tehniline juht. Selles artiklis räägin, kuidas teha kasutajale võimalikult lähedane sait 10 minuti ja 5 dollari eest kuus. Artikkel ei puuduta neid probleeme, millega me oma meeskonnas tegutseme. See on pigem minu isiklik kogemus ja muljed uue tehnoloogiaga tutvumisest. Olen püüdnud sammu võimalikult detailselt kirjeldada, et juhend oleks kasulik erineva kogemusega inimestele. Loodan, et teile meeldib. Alustame!

Seega, võib-olla olete leidnud endale lihtsa ja odava viisi veebisaidi majutamiseks. Võib-olla isegi tasuta, nagu on kirjeldatud selles ilusas artiklis.

Aga äkki igatsete siiski pinget ja tahate tutvuda tehnoloogia imelise uue maailmaga? Oletame, et mõtlete juurutamise automatiseerimisele ja soovite oma saiti võimalikult kiiresti kiirendada? Selles artiklis kasutame Hugo, kuid see ei ole tingimata vajalik.

Automatiseerimiseks kasutame Gitlab CI/CD-d, kuid mis teha kiirendamisega? Alustame meie saiti otse Cloudflare'is Worker Sites.

Mida on vaja alguseks:

Gitlab (teie enda või pilve)
konto) Cloudflare'i peal
Paigaldatud nodejs/npm

Osa 1: Hugo installimine

Kui teil on juba Hugo installitud või kui eelistate mõnda muud staatiliste lehtede generaatorit (või ei kasuta neid üldse), siis selle osa võib vahele jätta.

Laadige Hugo alla https://github.com/gohugoio/hugo/releases
Asetage Hugo täitmisfail ühte nimetatud PATH tee
Looge uus veebileht: hugo new site blog.example.com
Muutke praegune kataloog äsja looduks: cd blog.example.com
Valige teema (https://github.com/budparr/gohugo-theme-ananke/releases või mis iganes)
Looge esimene postitus: hugo new posts/my-amazing-post.md
Lisage sisu loodud faili: content/posts/my-amazing-post.md.
Kui kõik on valmis, muutke draft väärtus false
Generige staatilised failid: hugo -D

Nüüd asub meie staatiline veebileht kataloogis ./public ja on valmis esimese käsitsi juurutamise jaoks.

Osa 2: Konfigureerime Cloudflare'i

Nüüd uurime Cloudflare'i esialgset seadistamist. Oletame, et domeen meie veebilehe jaoks on juba olemas. Näiteks võtame blog.example.com.

Samm 1: Looge DNS-kirje

Esmalt valige meie domeen ja seejärel menüüpunkt DNSLooge A-kirje blog ja määrake selle jaoks mõni vale IP (see on ametlik soovitus, aga nad oleks võinud selle kuidagi ka ilusamaks teha).

Samm 2: Cloudflare'i token

Minu profiil -> API tokenid vahekaart-> Loo token -> Loo kohandatud token

Siin peate piirduma tokeni kontode ja piirkondadega, kuid jätma Edit õiguse allpool loetletud lubade jaoks.

Salvestage token tulevikuks, seda on meil vaja kolmandas osas.

Samm 3: Saame accountid ja zoneid

Domeen → Ülevaade → [parem külgpaneel]

Need on minu, palun ärge kasutage neid 🙂

Salvestage need koos tokeniga, need on samuti vajalikud kolmandas osas.

Samm 4: Workers'i aktiveerimine

Domeen → Workers → Halda Workers'e

Valige Workers'ile unikaalne nimi ja plaan → Piiramatu (5 $ kuus tänasel päeval). Soovi korral saate hiljem minna tasuta versioonile.

Osa 3: Esimene rakendus (käsitsi juurutamine)

Tehtud on esimene käsitsi juurutamine, et välja selgitada, mis seal tegelikult toimub. Kuigi kõik see on ka lihtsam:

Installime wrangler: npm i @cloudflare/wrangler -g
Liigume oma blogi kausta: cd blog.example.com
Käivita wrangler: wrangler init — site hugo-worker
Loome wrangleri konfi (sisestage token, kui teilt küsitakse): wrangler config

Nüüd proovime teha muudatusi äsja loodud failis wrangler.toml (siit täielik nimekiri võimalike seadistustega):

Määrake accountid ja zoneid
Muuda mars midagi sarnast *blog.example.com/*
Määrake false kuna workersdev
Vahetame bucket'i ./public (või kus teie staatiline sait asub)
Kui teil on seal tee peal rohkem kui üks domeen, peaksite tööscriptis tee parandama: workers-site/index.js (vt funktsioon handleEvent)

Suurepärane, aeg on hakata saiti käivitama käsuga wrangler publish.

Osa 4: Deploy automatiseerimine

See juhend on koostatud GitLabi jaoks, kuid edastab sisuhinna ja automatiseeritud käivitamise lihtsuse.

Samm 1: Loome ja seadistame oma projekti

Loome uue GitLabi projekti ja laadime üles saidi: katalooge blog.example.com kõikide sisuga peaks olema projekti juurkataloogis
Seame muutuja CFAPITOKEN siia: Seaded → CI/CD → Muutujad

Samm 2: Loome faili .gitlab-ci.yml ja käivitame esimese käivitamise

Loome faili .gitlab-ci.yml juurkausta järgmise sisuga:

etapid:
  - ehitamine
  - seadmine

ehitamine:
  pilt: monachus/hugo
  etapp: ehitamine
  muutujad:
    GIT_SUBMODULE_STRATEGY: rekursive
  skript:
    - cd blog.example.com/
    - hugo
  artefaktid:
    teed:
      - blog.example.com/public
  ainult:
    - master # see ülesanne mõjutab vaid 'master' haru
  sildid:
    - gitlab-org-docker #


seadmine:
  pilt: timbru31/ruby-node:2.3
  etapp: seadmine
  skript:
    - 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
  artefaktid:
    teed:
      - blog.example.com/public
  ainult:
    - master # see ülesanne mõjutab vaid 'master' haru
  sildid:
    - gitlab-org-docker #

Käitame esimest rakendamist käsitsi (CI / CD → Torud → Käivita toru) või saates commit'i master harule. Volla!

Kokkuvõte

Tõenäoliselt alahindasin natuke ja kogu protsess kestis veidi üle kümne minuti. Kuid nüüd on teil kiire veebileht automaatse seadistamisega ja mõned värsked ideed, mida veel Workers'i abil teha.

Cloudflare Workers Hugo GitLab Ci

Allikas: habr.com