Ciao! Mi chiamo Dima, sono un responsabile tecnico per il team SysOps di Wrike. In questo articolo ti dirò come realizzare un sito web il più vicino possibile all'utente in 10 minuti e 5 dollari al mese e automatizzarne la distribuzione. L'articolo non ha quasi nulla a che fare con i problemi che risolviamo all'interno del nostro team. Questa è piuttosto la mia esperienza personale e le mie impressioni nel conoscere una tecnologia che per me è nuova. Ho cercato di descrivere i passaggi nel modo più dettagliato possibile in modo che le istruzioni fossero utili a persone con esperienze diverse. Spero che ti divertirai. Andare!
Quindi, forse hai già trovato un modo semplice ed economico per ospitare un sito web. Magari anche gratis, come descritto in questo.
Ma all'improvviso sei ancora annoiato e vuoi toccare il nuovo mondo della tecnologia? Diciamo che stai pensando di automatizzare la distribuzione e vorresti velocizzare il più possibile il tuo sito? In questo articolo useremo, ma questo è facoltativo.
Usiamo Gitlab CI/CD per l'automazione, ma per quanto riguarda l'accelerazione? Distribuiamo il sito direttamente su Cloudflare utilizzando.
Cosa è necessario per iniziare:
-
Gitlab (il tuo o )
-
su Cloudflare
-
Installato
Parte 1: Installazione di Hugo
Se hai già installato Hugo, o se preferisci un generatore di siti statici diverso (o non ne usi affatto), puoi saltare questa parte.
-
Scarica Hugo da
-
Posizioniamo il file eseguibile di Hugo secondo uno di quelli definiti in modi
-
Creazione di un nuovo sito:
hugo new site blog.example.com -
Cambia la directory corrente in quella appena creata:
cd blog.example.com -
Seleziona un tema di design ( o altro)
-
Creiamo il primo post:
hugo new posts/my-amazing-post.md -
Aggiungi contenuto al file creato: content/posts/my-amazing-post.md.
Al termine, modificare il valore della bozza in falso -
Generazione di file statici:
hugo -D
Ora il nostro sito statico si trova all'interno di una directory ./pubblico e pronto per la tua prima distribuzione manuale.
Parte 2: configurazione di Cloudflare
Ora diamo un'occhiata alla configurazione iniziale di Cloudflare. Supponiamo di avere già un dominio per il sito. Prendiamo come esempio blog.esempio.com.
Passaggio 1: crea una voce DNS
Per prima cosa seleziona il nostro dominio, quindi la voce di menu DNS. Creiamo un record A del blog e indichiamo alcuni IP fittizi (questo è quello ufficiale, ma avrebbero potuto renderlo un po' più carino).
Passaggio 2: token Cloudflare
-
Il mio Profilo -> Token API scheda-> Crea token -> Crea token personalizzato
Qui dovrai limitare il token ad account e zone, ma lasciare l'opzione Modifica per le autorizzazioni elencate nell'immagine.
Conserva il token per il futuro, ne avremo bisogno nella terza parte.
Passaggio 3: ottieni accountid e zoneid
Dominio → Panoramica → [barra laterale destra]
Questi sono miei, non usateli per favore :)
Salvateli accanto al token, ci serviranno anche nella terza parte.
Passaggio 4: attivare i lavoratori
Dominio → Lavoratori → Gestisci i lavoratori
Scegliamo un nome e una tariffa univoci Lavoratori → Illimitato ($ 5 al mese oggi). Se lo desideri, puoi successivamente aggiornare alla versione gratuita.
Parte 3: prima distribuzione (distribuzione manuale)
Ho eseguito la prima distribuzione manuale per scoprire cosa stava realmente succedendo lì. Sebbene tutto ciò possa essere fatto in modo più semplice:
-
Installa l'attaccabrighe:
npm i @cloudflare/wrangler -g -
Andiamo alla directory del nostro blog:
cd blog.example.com -
Avvia wrangler:
wrangler init — site hugo-worker -
Crea una configurazione per wrangler (inserisci il token quando richiesto):
wrangler config
Ora proviamo ad apportare modifiche al file appena creato wrangler.toml ( elenco completo delle possibili impostazioni):
-
specificare accountid e zoneid
-
cambiamento route a qualcosa come *blog.esempio.com/*
-
specificare falso per lavoratoridev
-
Cambia il bucket in ./public (o dove si trova il tuo sito statico)
-
Se hai più di un dominio nel percorso, dovresti correggere il percorso nello script di lavoro: sito-lavoratori/index.js (vedi funzione handleEvent)
Ottimo, è ora di distribuire il sito utilizzando il team wrangler publish.
Parte 4: Automazione della distribuzione
Questa guida è scritta per Gitlab, ma cattura l'essenza e la facilità della distribuzione automatizzata in generale.
Passaggio 1: crea e configura il nostro progetto
-
Crea un nuovo progetto GitLab e carica la directory site: blog.esempio.com con tutto il contenuto deve trovarsi nella directory principale del progetto
-
Prepariamo variabile CFAPITOKEN qui: Impostazioni profilo → CI / CD → Variabili
Passaggio 2: crea un file .gitlab-ci.yml ed esegui la prima distribuzione
Crea un file .gitlab-ci.yml nella root con il seguente contenuto:
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 #Lanciamo manualmente la prima distribuzione (CI/CD → Condotte → Esegui pipeline) o impegnandosi nel ramo principale. Ecco!
conclusione
Beh, potrei averlo sottostimato leggermente e l'intero processo ha richiesto poco più di dieci minuti. Ma ora hai un sito veloce con distribuzione automatica e alcune nuove idee su cos'altro puoi fare con Workers.
Fonte: habr.com