🥇Come creare un sito statico su Cloudflare Workers Sites

Ciao! Mi chiamo Dima e sono il tech lead del team SysOps in Wrike. In questo articolo, ti mostrerò come, in 10 minuti e per soli 5 dollari al mese, puoi creare un sito che si avvicina molto all'utente e automatizzare il suo deployment. L'articolo ha poco a che fare con i problemi che affrontiamo all'interno del nostro team. Piuttosto, si tratta della mia esperienza personale e delle mie impressioni su una tecnologia nuova per me. Ho cercato di descrivere i passaggi in modo il più dettagliato possibile, affinché le istruzioni risultino utili per persone con esperienze diverse. Spero che ti piaccia. Iniziamo!

Quindi, probabilmente hai già trovato un modo semplice ed economico per ospitare il tuo sito. Forse anche gratis, come descritto in questo ottimo articolo.

Ma se ti annoi e vuoi esplorare il meraviglioso nuovo mondo delle tecnologie? Diciamo che stai pensando all'automazione del deployment e vuoi massimizzare la velocità del sito? In questo articolo utilizzeremo Hugo, ma non è obbligatorio.

Per l'automazione utilizziamo Gitlab CI/CD, ma cosa fare per accelerare? Procediamo a distribuire il sito direttamente su Cloudflare tramite Worker Sites.

Cosa serve per iniziare:

Gitlab (proprio o cloud)
Account su Cloudflare
Installato nodejs/npm

Parte 1: Installazione di Hugo

Se hai già installato Hugo o se preferisci un altro generatore di siti statici (o non ne utilizzi affatto), puoi saltare questa parte.

Scarichiamo Hugo da https://github.com/gohugoio/hugo/releases
Posizioniamo il file eseguibile Hugo in uno dei seguenti PATH percorso
Creiamo un nuovo sito: hugo new site blog.example.com
Cambia la directory corrente nella appena creata: cd blog.example.com
Scegli un tema (https://github.com/budparr/gohugo-theme-ananke/releases o qualsiasi altra cosa)
Creiamo il primo post: hugo new posts/my-amazing-post.md
Aggiungiamo contenuto al file creato: content/posts/my-amazing-post.md.
Quando tutto è fatto, cambiamo il valore di draft in false
Generiamo i file statici: hugo -D

Ora il nostro sito statico si trova nella directory ./public ed è pronto per il primo deployment manuale.

Parte 2: Configuriamo Cloudflare

Ora occupiamoci della configurazione iniziale di Cloudflare. Supponiamo che il dominio per il sito sia già disponibile. Prendiamo come esempio blog.example.com.

Passo 1: Creiamo un record DNS

Prima di tutto selezioniamo il nostro dominio, quindi il punto di menu DNS. Creiamo un record A per blog e indichiamo un IP fittizio (questo è un consiglio ufficiale., ma potrebbero farlo in modo più carino).

Passo 2: Token Cloudflare

Il mio profilo -> Token API tab-> Crea token -> Crea token personalizzato

Qui dovrai limitare il token a specifici account e zone, ma lasciare la possibilità di modificare per le autorizzazioni elencate nell'immagine.

Salva il token per futuro uso, ci servirà nella terza parte.

Passo 3: Recuperiamo accountid e zoneid

Dominio → Panoramica → [pannello laterale destro]

Questi sono i miei, non usarli per favore 🙂

Salvali insieme al token, serviranno anche nella terza parte.

Passo 4: Attivazione dei Workers

Dominio → Workers → Gestisci Workers

Scegli un nome unico e il piano Workers → Illimitato (5$ al mese al momento). In seguito puoi scegliere di passare alla versione gratuita.

Parte 3: Primo deploy (distribuzione manuale)

Ho effettuato il primo deploy manualmente per capire cosa sta succedendo veramente. Anche se si potrebbe fare tutto in modo più semplice:

Installiamo wrangler: npm i @cloudflare/wrangler -g
Passiamo alla directory del nostro blog: cd blog.example.com
Avviamo wrangler: wrangler init — site hugo-worker
Creiamo il config per wrangler (inserisci il token quando richiesto): wrangler config

Ora proviamo a modificare il file appena creato wrangler.toml (qui l'elenco completo delle impostazioni disponibili):

Indichiamo accountid e zoneid
Modifichiamo rotta in qualcosa come *blog.example.com/*
Indichiamo false per workersdev
Modifichiamo bucket in ./public (o la posizione del tuo sito statico)
Se hai più di un dominio nella rotta, dovrai correggere il percorso nello script di lavoro: workers-site/index.js (vedi la funzione handleEvent)

Ottimo, è ora di pubblicare il sito con il comando wrangler publish.

Parte 4: Automazione del deployment

Questa guida è stata redatta per GitLab, ma trasmette l'essenza e la semplicità del deployment automatizzato in generale.

Passo 1: Creiamo e configuriamo il nostro progetto

Creiamo un nuovo progetto GitLab e carichiamo il sito: la directory blog.example.com con tutto il contenuto deve trovarsi nella radice del progetto
Impostiamo variabile CFAPITOKEN qui: Impostazioni → CI/CD → Variabili

Passo 2: Creiamo il file .gitlab-ci.yml e avviamo il primo deployment

Creiamo il file .gitlab-ci.yml nella radice con il seguente contenuto:

fasi:
  - costruzione
  - distribuzione

costruzione:
  immagine: monachus/hugo
  fase: costruzione
  variabili:
    GIT_SUBMODULE_STRATEGY: ricorsivo
  script:
    - cd blog.example.com/
    - hugo
  artefatti:
    percorsi:
      - blog.example.com/public
  solo:
    - master # questo lavoro influenzerà solo il ramo 'master'
  tag:
    - gitlab-org-docker #


distribuzione:
  immagine: timbru31/ruby-node:2.3
  fase: distribuzione
  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
  artefatti:
    percorsi:
      - blog.example.com/public
  solo:
    - master # questo lavoro influenzerà solo il ramo 'master'
  tag:
    - gitlab-org-docker #

Avviamo la prima distribuzione manualmente (CI / CD → Pipeline → Esegui Pipeline) o inviando un commit nel ramo master. Voilà!

Conclusione

Beh, forse ho leggermente minimizzato, e l'intero processo ha richiesto un po' più di dieci minuti. Ma ora avete un sito veloce con distribuzione automatica e qualche idea fresca su cosa si possa ancora fare con Workers.

Cloudflare Workers Hugo GitLab Ci

Fonte: habr.com