Cumu fà un situ staticu in Cloudflare Workers Sites

Bonghjornu! Mi chjamu Dima, sò un capu tecnicu per a squadra SysOps in Wrike. In questu articulu vi dicu cumu fà un situ web u più vicinu à l'utilizatore pussibule in 10 minuti è 5 dollari à u mese è automatizà a so implementazione. L'articulu ùn hà quasi nunda di fà cù i prublemi chì risolvemu in a nostra squadra. Questa hè piuttostu a mo sperienza persunale è impressioni di cunnosce una tecnulugia chì hè nova per mè. Aghju pruvatu à descriverà i passi in u più dettagliu pussibule per chì l'istruzzioni seranu utili per e persone cù una sperienza diversa. Spergu chì vi piacerà. Vai !

Cumu fà un situ staticu in Cloudflare Workers Sites

Allora, forsi avete digià trovu un modu simplice è economicu per accoglie un situ web. Forsi ancu gratuitu, cum'è descrittu in questu grande articulu.

Ma di colpu vi sò sempre annoiatu è vulete tuccà u bravu novu mondu di a tecnulugia ? Diciamu chì pensate à l'automatizazione di implementazione è vulete accelerà u vostru situ quantu pussibule? In questu articulu avemu da aduprà Hugo, ma questu hè facultativu.

Usemu Gitlab CI / CD per l'automatizazione, ma chì ne di l'accelerazione? Implementemu u situ direttamente in Cloudflare usendu I siti di u travagliu.

Ciò chì hè necessariu per inizià:

Parte 1: Installazione di Hugo

Sè avete digià installatu Hugo, o se preferite un altru generatore di situ staticu (o ùn aduprate micca), pudete saltà sta parte.

  1. Scaricate Hugo da https://github.com/gohugoio/hugo/releases

  2. Pusemu u schedariu eseguibile Hugo secondu unu di quelli definiti in PATH modi

  3. Crià un novu situ: hugo new site blog.example.com

  4. Cambia u cartulare attuale à u novu creatu: cd blog.example.com

  5. Sceglite un tema di disignu (https://github.com/budparr/gohugo-theme-ananke/releases o qualunque cosa)

  6. Creemu u primu postu: hugo new posts/my-amazing-post.md

  7. Aghjunghjite u cuntenutu à u schedariu creatu: cuntenutu/posts/my-amazing-post.md.
    Quandu tuttu hè fattu, cambiate u valore di draft à sbagliate

  8. Generazione di fugliali statici: hugo -D

Avà u nostru situ staticu hè situatu in un cartulare ./publicu è pronta per a vostra prima implementazione manuale.

Parte 2: Configurazione di Cloudflare

Avà fighjemu a configurazione iniziale di Cloudflare. Assumimu chì avemu digià un duminiu per u situ. Pigliemu cum'è un esempiu blog.example.com.

Passu 1: Crea una entrata DNS

Prima, selezziunate u nostru duminiu, è dopu l'elementu di menu DNS. Creemu un blog A-record è indichemu qualchì IP fittizia per questu (questu hè u ufficiale raccomandazione, ma anu pussutu fà un pocu più bellu).

Cumu fà un situ staticu in Cloudflare Workers Sites

Passu 2: Cloudflare Token

  1. My profile -> Tokens API tab-> Crea Token -> Crea un token persunalizatu

Cumu fà un situ staticu in Cloudflare Workers Sites

Quì avete bisognu di limità u token à i cunti è i zoni, ma lasciate l'opzione Edit per i permessi listati in a stampa.

Salvà u token per u futuru, avemu bisognu in a terza parte.

Passu 3: Get accountid è zoneid

Domain Overview → [barra laterale destra]

Cumu fà un situ staticu in Cloudflare Workers SitesQuessi sò i mei, ùn l'utilizate micca per piacè :)

Salvà accantu à u token, avemu ancu bisognu in a terza parte.

Passu 4: Attivà i travagliadori

Domain Travagghiatura Gestite i Travagliadori

Avemu sceltu un nome unicu è tariffu Lavoratori → Illimitatu ($ 5 per mese oghje). Se vulete, pudete più tardi aghjurnà à a versione libera.

Parte 3: Prima implementazione (implementazione manuale)

Aghju fattu a prima implementazione manuale per sapè ciò chì succede veramente. Ancu se tuttu questu pò esse fattu più simplice:

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

  2. Andemu à u cartulare di u nostru blog: cd blog.example.com

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

  4. Crea una cunfigurazione per wrangler (intra in u token quandu hè dumandatu): wrangler config

Avà pruvemu à fà cambiamenti à u schedariu novu creatu wrangler.toml (ccà lista cumpleta di i paràmetri pussibuli):

  1. Avemu indicatu accountid è zoneid

  2. Cambia a strada à qualcosa cum'è *blog.example.com/*

  3. Avemu indicatu sbagliate di travagliadori dev

  4. Cambia bucket à ./public (o induve si trova u vostru situ staticu)

  5. Sì avete più di un duminiu in u percorsu, allora duvete curregà a strada in u script di travagliu: i travagliadori-site/index.js (vede a funzione handleEvent)

Grande, hè ora di implementà u situ cù a squadra wrangler publish.

Parte 4: Automatizazione di implementazione

Questa guida hè scritta per Gitlab, ma cattura l'essenza è a facilità di implementazione automatizata in generale.

Passu 1: Crea è cunfigurà u nostru prughjettu

  1. Crea un novu prughjettu GitLab è carica u situ: annuariu blog.example.com cù tutti i cuntenuti deve esse situatu in u cartulare radicali di u prughjettu

  2. Avemu stabilitu variabile CFAPITOKEN quì: taliata CI / CDVariables

Passu 2: Crea un schedariu .gitlab-ci.yml è eseguisce a prima implementazione

Crea un schedariu .gitlab-ci.yml in a ràdica cù u cuntenutu seguente:

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 #

Lancemu a prima implementazione manualmente (CI/CD Pipelines Run Pipeline) o en s'engageant à la branche maîtresse. Voila!

cunchiusioni

Ebbè, l'aghju forse sottumessu un pocu, è tuttu u prucessu hà pigliatu pocu più di deci minuti. Ma avà avete un situ veloce cù implementazione automatica è alcune idee fresche nantu à ciò chì pudete fà cù i travagliadori.

 I travagliadori di Cloudflare    Hugo    GitLab Ci

Source: www.habr.com

Add a comment