Kuidas luua staatiline sait Cloudflare Workers Sites'il

Tere! Minu nimi on Dima, ma olen SysOps meeskonna tehnikajuht Wrikes. Selles artiklis räägin, kuidas 10 minutiga ja 5 dollari eest kuus luua kasutajale lähedane veebisait ja automatiseerida selle juurutamine. Artikkel ei tegele peamiselt meie meeskonna sees lahendatavate probleemidega. See on pigem minu isiklik kogemus ja muljed uue tehnoloogiaga tutvumise osas. Olen püüdnud sammud võimalikult detailselt kirjeldada, et juhend oleks kasulik erineva kogemusega inimestele. Loodan, et teile meeldib. Alustame!

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

Aga äkki on teil siiski igav ja soovite tutvuda imelise uue tehnoloogia maailmaga? Ütleme, et mõtleksite juurutamise automatiseerimisele ja sooviksite oma veebisaiti maksimaalselt kiirendada? Selles artiklis kasutame Hugo, aga see ei ole kohustuslik.

Automatiseerimiseks kasutame Gitlab CI/CD-d, kuid kuidas kiirendamisega? Lähme otse Cloudflare'i ja kasutame Worker Sites.

Mida on vaja alustamiseks:

• Gitlab (teie enda või pilve)

• Konto Cloudflare'is

• Paigaldatud nodejs/npm

Osa 1: Hugo paigaldamine

Kui teil on juba Hugo paigaldatud või kui eelistate teist staatiliste veebisaitide generaatorit (või ei kasuta neid üldse), saate selle osa vahele jätta.

1. Laadige Hugo alla aadressilt https://github.com/gohugoio/hugo/releases

2. Asetage Hugo teostusfail ühte määratud PATH tee

3. Looge uus veebisait: hugo new site blog.example.com

4. Muutke praegune kataloog just loodud kataloogiks: cd blog.example.com

5. Valige teema (https://github.com/budparr/gohugo-theme-ananke/releases või ükskõik milline muu)

6. Looge esimene postitus: hugo new posts/my-amazing-post.md

7. Lisage sisu loodud faili: content/posts/my-amazing-post.md.
   Kui kõik on tehtud, muutke mustandi väärtus false

8. Genereerige staatilised failid: hugo -D

Nüüd asub meie staatiline veebisait kataloogis ./public ja on valmis esimeseks käsitsi juurutamiseks.

Osa 2: Seadistame Cloudflare'i

Nüüd lahendame Cloudflare'i algse seadistuse. Eeldame, et domeen veebisaidi jaoks on meil juba olemas. Näiteks võtame blog.example.com.

Samm 1: Looge DNS-kirje

Esmalt valime oma domeeni ja seejärel menüüpunkti DNS. Looge A-kirje blog ja sisestage selle jaoks mõni vale IP (see on ametlik soovitus, kuigi nad oleksid võinud teha kuidagi ilusamaks).

Samm 2: Cloudflare'i token

1. Minu profiil -> API tokenid vahekaart-> Create Token -> Loo kohandatud token

Siin peate piirama tokenit konto ja aladega, kuid jätma redigeerimisõiguse pildil loetletud õigustele.

Salvesta token tulevikuks, see on vajalik kolmandas osas.

Samm 3: Saame accountid ja zoneid

Domeen → Overview → [parem külgpaneel]

Need on minu, palun ärge kasutage neid 🙂

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

Samm 4: Workersi aktiveerimine

Domeen → Workers → Haldage Workers

Valige Workersile ainulaadne nimi ja hind → Piiramatu (5 dollarit kuus praegu). Soovi korral saate hiljem minna üle tasuta versioonile.

Osa 3: Esimene deploy (käeline juurutamine)

Tegin esimese juurutamise käsitsi, et välja selgitada, mis seal tegelikult toimub. Kuigi kõike seda on võimalik teha ka lihtsamalt:

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

2. Liigume meie blogi kataloogi: cd blog.example.com

3. Käivitame wrangler: wrangler init — site hugo-worker

4. Loome wrangleri jaoks konfi (sisestage token, kui seda palutakse): wrangler config

Nüüd proovime teha muudatusi just loodud failis wrangler.toml (siin täielik loetelu võimalike seadistuste kohta):

1. Määrame accountid ja zoneid

2. Muudame route midagi sellist nagu *blog.example.com/*

3. Määrame false jaoks workersdev

4. Muudame bucket'i . /public (või seal, kus teie staatiline sait asub)

5. Kui teil on rohkem kui üks domeen teel, peaksite maapealset teed töötavas skriptis parandama: workers-site/index.js (vt funktsiooni handleEvent)

Suurepärane, aeg on käivitada sait käsuga wrangler publish.

Osa 4: Juurutamise automatiseerimine

See juhend on koostatud Gitlabi jaoks, kuid edastab olemuse ja automatiseeritud juurutamise lihtsuse üldiselt.

Samm 1: Loome ja seadistame oma projekti

1. Looge uus GitLabi projekt ja laadige sait üles: kataloog blog.example.com kogu sisu peaks olema projekti juurkataloogis

2. Seadke muutuja CFAPITOKEN siin: Seaded → CI/CD → Variables

Samm 2: Looge fail .gitlab-ci.yml ja käivitage esimene juurutamine

Looge fail .gitlab-ci.yml juurkataloogis järgmise sisuga:

etapid:
  - ehitab
  - juurutab

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


juurutamine:
  pilt: timbru31/ruby-node:2.3
  etapp: juurutamine
  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 töö mõjutab ainult 'master' haru
  sildid:
    - gitlab-org-docker #

Käivitame esimese juurutuse käsitsi (CI / CD → Torud → Käivita toru) või saates commit'i master harusse. Voilà!

Kokkuvõte

Tõsi, võib-olla alahindasin veidi ning kogu protsess võttis veidi rohkem kui kümme minutit. Kuid nüüd on teil kiire sait automaatse juurutamisega ja mitmeid värskeid ideid selle kohta, mida veel Workers'iga teha.

 Cloudflare Workers    Hugo    GitLab Ci

Allikas: habr.com