Kako napraviti statičnu stranicu na Cloudflare Workers stranicama

Zdravo! Moje ime je Dima, ja sam tehnički vođa za SysOps tim u Wrikeu. U ovom članku ću vam reći kako napraviti web stranicu što bliže korisniku za 10 minuta i 5 dolara mjesečno i automatizirati njeno postavljanje. Članak nema gotovo nikakve veze s problemima koje rješavamo unutar našeg tima. Ovo je prije moje lično iskustvo i utisci upoznavanja tehnologije koja mi je nova. Pokušao sam što detaljnije opisati korake kako bi upute bile korisne ljudima s drugačijim iskustvom. Nadam se da ćete uživati. Idi!

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

Ali odjednom vam je i dalje dosadno i želite da dotaknete hrabri novi svijet tehnologije? Recimo da razmišljate o automatizaciji implementacije i želite da ubrzate svoju stranicu što je više moguće? U ovom članku ćemo koristiti hugo, ali ovo nije obavezno.

Mi koristimo Gitlab CI/CD za automatizaciju, ali šta je sa ubrzanjem? Hajde da postavimo sajt direktno na Cloudflare koristeći Worker Sites.

Šta je potrebno za početak:

• Gitlab (vaš ili cloudy)

• račun na Cloudflare

• Instalirano nodejs/npm

Dio 1: Instaliranje Huga

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

1. Preuzmite Hugo sa https://github.com/gohugoio/hugo/releases

2. Mi postavljamo Hugo izvršnu datoteku prema jednom od onih definiranih u PUT načine

3. Kreiranje novog sajta: hugo new site blog.example.com

4. Promijenite trenutni direktorij u novokreirani: cd blog.example.com

5. Odaberite temu dizajna (https://github.com/budparr/gohugo-theme-ananke/releases ili šta god)

6. Kreirajmo prvi post: hugo new posts/my-amazing-post.md

7. Dodajte sadržaj kreiranom fajlu: content/posts/my-amazing-post.md.
   Kada je sve gotovo, promijenite vrijednost nacrta u lažan

8. Generisanje statičkih fajlova: hugo -D

Sada se naša statička stranica nalazi unutar direktorija ./public i spremni za vašu prvu ručnu implementaciju.

Dio 2: Postavljanje Cloudflarea

Pogledajmo sada početno podešavanje Cloudflarea. Pretpostavimo da već imamo domenu za stranicu. Uzmimo za primjer blog.example.com.

Korak 1: Kreirajte DNS unos

Prvo odaberite našu domenu, a zatim stavku menija DNS. Kreiramo blog A-zapis i za njega naznačavamo neki fiktivni IP (ovo je službeni preporuka, ali mogli su je malo uljepšati).

Korak 2: Cloudflare Token

1. Moj profil -> API tokeni tab-> Kreirajte token -> Kreirajte prilagođeni token

Ovdje ćete morati ograničiti token na račune i zone, ali ostavite opciju Uredi za dozvole navedene na slici.

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

Korak 3: Nabavite accountid i zoneid

područje → pregled → [desna bočna traka]

Ovo su moje, nemoj ih koristiti molim te :)

Sačuvajte ih pored tokena, takođe će nam trebati u trećem delu.

Korak 4: Aktivirajte Workers

područje → Radnici → Upravljanje radnicima

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

Dio 3: Prvo postavljanje (ručno postavljanje)

Uradio sam prvu ručnu implementaciju da saznam šta se tamo zaista dešava. Iako se sve ovo može učiniti jednostavnije:

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

2. Idemo u direktorij našeg bloga: cd blog.example.com

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

4. Kreirajte konfiguraciju za wrangler (unesite token kada se to od vas zatraži): wrangler config

Pokušajmo sada napraviti promjene u novokreiranom fajlu wrangler.toml (ovdje potpuna lista mogućih postavki):

1. Navedite accountid i zoneid

2. Change ruta na nešto poput *blog.example.com/*

3. Navedite lažan do Workersdev

4. Promijenite kantu u ./public (ili gdje se nalazi vaša statična stranica)

5. Ako imate više od jedne domene na putanji, tada biste trebali ispraviti putanju u radnoj skripti: Workers-site/index.js (vidi funkciju handleEvent)

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

Dio 4: Automatizacija implementacije

Ovaj vodič je napisan za Gitlab, ali obuhvata suštinu i lakoću automatizovane implementacije uopšte.

Korak 1: Kreirajte i konfigurišite naš projekat

1. Kreirajte novi GitLab projekat i prenesite site: direktorij blog.example.com sa svim sadržajima moraju se nalaziti u korijenskom direktoriju projekta

2. Postavili smo varijabla CFAPITOKEN ovdje: Postavke → CI / CD → varijable

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

Kreirajte fajl .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 #

Pokrećemo prvu implementaciju ručno (CI/CD → Cjevovodi → Pokreni cjevovod) ili predajom na glavnu granu. Voila!

zaključak

Pa, možda sam malo potcijenio, a cijeli proces je trajao nešto više od deset minuta. Ali sada imate brzu stranicu s automatskom implementacijom i nekoliko svježih ideja o tome šta još možete učiniti s Workers-om.

 Cloud Flare Workers    hugo    GitLab Ci

izvor: www.habr.com