🥇Kako napraviti statičnu web stranicu na Cloudflare Workers Sites

Zdravo! Zovem se Dima, tehnički sam voditelj SysOps tima u Wrikeu. U ovom članku ću vam reći kako napraviti web mjesto što bliže korisniku u 10 minuta i 5 dolara mjesečno i automatizirati njegovo postavljanje. Članak nema gotovo nikakve veze s problemima koje rješavamo unutar našeg tima. Ovo je prije moje osobno iskustvo i dojmovi upoznavanja s tehnologijom koja mi je nova. Nastojao sam što detaljnije opisati korake kako bi upute bile korisne osobama s drugačijim iskustvom. Nadam se da ćete uživati. Ići!

Dakle, možda ste već pronašli jednostavan i jeftin način za hostiranje web stranice. Možda čak i besplatno, kao što je opisano u ovome odličan članak.

Ali iznenada vam je i dalje dosadno i želite dotaknuti vrli novi svijet tehnologije? Recimo da razmišljate o automatizaciji implementacije i želite što je više moguće ubrzati svoju web stranicu? U ovom ćemo članku koristiti Hugo, ali ovo nije obavezno.

Koristimo Gitlab CI/CD za automatizaciju, ali što je s ubrzanjem? Implementirajmo web mjesto izravno u Cloudflare pomoću Radnička mjesta.

Što je potrebno za početak:

Gitlab (vaš vlastiti ili oblačno)
Račun na Cloudflareu
Instalirano čvorovi/npm

Dio 1: Instalacija Huga

Ako već imate instaliran Hugo ili ako više volite drugi generator statičkih stranica (ili ga uopće ne koristite), možete preskočiti ovaj dio.

Preuzmite Hugo sa https://github.com/gohugoio/hugo/releases
Smještamo Hugo izvršnu datoteku prema jednoj od onih definiranih u PUT načine
Izrada nove stranice: hugo new site blog.example.com
Promijenite trenutni direktorij u novostvoreni: cd blog.example.com
Odaberite temu dizajna (https://github.com/budparr/gohugo-theme-ananke/releases Ili štogod)
Kreirajmo prvi post: hugo new posts/my-amazing-post.md
Dodajte sadržaj stvorenoj datoteci: content/posts/my-amazing-post.md.
Kada je sve gotovo, promijenite vrijednost nacrta u lažan
Generiranje statičkih datoteka: hugo -D

Sada se naša statična stranica nalazi unutar imenika ./javnost i spreman za vašu prvu ručnu implementaciju.

Dio 2: Postavljanje Cloudflarea

Sada pogledajmo početno postavljanje Cloudflarea. Pretpostavimo da već imamo domenu za stranicu. Uzmimo kao primjer blog.example.com.

Korak 1: Napravite DNS unos

Prvo odaberite našu domenu, a zatim stavku izbornika DNS. Stvaramo A-zapis bloga i za njega navodimo neki fiktivni IP (ovo je službeni rekomendaciâ, ali mogli su ga malo proljepšati).

Korak 2: Cloudflare token

Moj profil -> API tokeni kartica-> Napravite token -> Stvorite prilagođeni token

Ovdje ćete morati ograničiti token na račune i zone, ali ostavite opciju Uredi za dopuštenja navedena na slici.

Sačuvajte token za budućnost, trebat će nam u trećem dijelu.

Korak 3: Nabavite accountid i zoneid

Domena → Pregled → [desna bočna traka]

Ovo su moji, nemojte ih koristiti molim vas :)

Spremite ih pored tokena, trebat će nam i u trećem dijelu.

Korak 4: Aktivirajte radnike

Domena → Radnici → Upravljanje radnicima

Biramo jedinstveno ime i tarifu Radnici → Neograničeno (5 USD mjesečno danas). Ako želite, kasnije možete nadograditi na besplatnu verziju.

Dio 3: Prva implementacija (ručna implementacija)

Napravio sam prvu ručnu implementaciju kako bih saznao što se tamo zapravo događa. Iako se sve ovo može učiniti jednostavnije:

Instaliraj Wrangler: npm i @cloudflare/wrangler -g
Idemo u imenik našeg bloga: cd blog.example.com
Launch wrangler: wrangler init — site hugo-worker
Napravite konfiguraciju za Wrangler (unesite token kada se to od vas zatraži): wrangler config

Sada pokušajmo unijeti izmjene u novostvorenu datoteku svađalica.toml (здесь potpuni popis mogućih postavki):

Ukazujemo accountid i zoneid
Promijeniti put na nešto poput *blog.example.com/*
Ukazujemo lažan za radnicidev
Promijeni kantu u ./public (ili gdje se nalazi vaša statična stranica)
Ako imate više od jedne domene u stazi, trebali biste ispraviti stazu u radnoj skripti: radnici-site/index.js (vidi funkciju handleEvent)

Sjajno, vrijeme je za implementaciju stranice pomoću tima wrangler publish.

Dio 4: Automatizacija implementacije

Ovaj je vodič napisan za Gitlab, ali obuhvaća bit i jednostavnost automatizirane implementacije općenito.

Korak 1: Kreirajte i konfigurirajte naš projekt

Napravite novi GitLab projekt i prenesite site: imenik blog.example.com sa svim sadržajima mora se nalaziti u korijenskom direktoriju projekta
Postavili smo varijabla CFAPITOKEN ovdje: Postavke → CI / CD → Varijable

Korak 2: Stvorite .gitlab-ci.yml datoteku i pokrenite prvu implementaciju

Stvorite datoteku .gitlab-ci.yml u korijenu sa sljedećim sadržajem:

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 #

Prvu implementaciju pokrećemo ručno (CI/CD → Cjevovodi → Pokreni cjevovod) ili opredjeljenjem za glavnu granu. Voila!

Zaključak

Pa, možda sam to malo podcijenio, a cijeli je proces trajao nešto više od deset minuta. Ali sada imate brzu stranicu s automatskim postavljanjem i neke svježe ideje o tome što još možete učiniti s Workersima.

Radnici Cloudflare Hugo GitLab Ci

Izvor: www.habr.com

Kako napraviti statičnu stranicu na Cloudflare Workers stranicama