Ci sono 2 piattaforme più popolari oggi per ospitare siti web statici: Netlify e Google App Engine (GAE)

Netlify ha guadagnato molta popolarità di recente perché fornisce un'esperienza integrata con la creazione e l'implementazione di siti Web statici âÃÂàtutti nella stessa piattaforma

GAE è più flessibile in quanto supporta anche siti Web non statici, ma certamente manca del livello di integrazione fornito da Netlify. Allora perché dovrei ancora usare GAE in molti casi? La risposta è semplice: spesso GAE offre opzioni di prezzo migliori. Allo stesso tempo permette di avere tutte le funzionalità di Netlify e molto altro utilizzando pochi e semplici strumenti (GitHub Actions e Reliza Hub) che descriverò in questo articolo

 Prezzi
Vorrei prima coprire gli scenari di prezzo quando la combinazione di azioni GAE + GitHub ha più senso. Il punto chiave sono i minuti di costruzione. Il livello gratuito di Netlify offre solo 300 minuti di build al mese, il che non è molto per nessun account. Se stai utilizzando qualcosa come l'app node.js resa statica e le tue build richiedono in media 2-3 minuti, ottieni solo circa 100+ build al mese su Netlify, il che potrebbe non essere sufficiente. Soprattutto se hai più di un sito web

Se hai bisogno di più minuti di build su Netlify âÃÂàpaga $ 7 per 500 minuti extra o passa al livello successivo che include 1000 minuti, ma costa $ 45 al mese. D'altra parte, su GitHub Actions ottieni 2000 minuti di build gratuiti per repository privati ​​e minuti di build illimitati per quelli pubblici. Supponiamo che tu stia costruendo un sito Web di documentazione e decidi di renderlo pubblico su GitHub âÃÂàottieni minuti di build illimitati su GitHub Actions âÃÂàe questo rende una differenza enorme

La considerazione successiva riguarda i costi del traffico. Netlify fornisce 100 GB di larghezza di banda in uscita al mese inclusa nel suo livello gratuito, il che è generoso. Google offre 1 GB in uscita al giorno gratuitamente, il che lo rende circa 30 GB al mese. Quindi, se la tua uscita è compresa tra 30 GB e 100 GB, potresti ottenere un affare migliore su Netlify. Tuttavia, una volta superati i 100 GB, Netlify ti addebita subito $ 20 per i successivi 100 GB di quel mese. Google ha una politica dei prezzi per GB in uscita che costa $ 0,12. Ciò significa che paghi $ 12/100 GB âÃÂàcontro $ 20/100 GB su Netlify

Quindi, a seconda del traffico, potresti essere migliore su Netlify o su GAE dal punto di vista dell'uscita. Ma in molti casi GAE fornirebbe anche qui un valore migliore
L'ultima parola sui prezzi âÃÂàse stai utilizzando qualcosa come GitHub Actions o CircleCI per le tue build, puoi comunque distribuire su Netlify âÃÂàche rende GitHub Azioni sistema più flessibile

 Configurazione del progetto Google App Engine
Iniziamo andando su httpsconsole.cloud.google.com/appengine e creiamo un nuovo progetto. Se ne avevi già uno âÃÂàprima fai clic sul nome del tuo progetto in alto e poi fai clic su
**NUOVO PROGETTO**

Inserisci il nome del progetto, annota qui l'ID del progetto che stai ricevendo (ne avrai bisogno in seguito) âÃÂànel mio caso è
*âÃÂÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂàe fai clic su **CREA Poi passa a questo progetto dal selettore di progetto nella parte superiore della pagina

Clicca su
**Crea applicazione** e scegli la regione desiderata. Quindi per l'applicazione statica selezionare l'ambiente Python e Standard (il livello gratuito si applica solo all'ambiente Standard). A questo punto la tua applicazione è pronta per i passaggi successivi

Per indirizzare il tuo nome di dominio a questa applicazione, vai su httpsconsole.cloud.google.com/appengine/settings/domains

e clicca
**Aggiungi un dominio personalizzato Segui le istruzioni e indirizza il DNS dal tuo dominio ai record forniti da Google. Al termine, Google indirizzerà automaticamente il tuo dominio a questa applicazione e gestirà anche il certificato SSL

Infine, dobbiamo preparare un account di servizio che sarebbe responsabile delle distribuzioni automatiche. Vai a httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (sostituisci
*your_project_id *in questo link con il tuo vero ID progetto, nel mio caso sarebbe *evie-landing-tutorial Arriverai alla seguente pagina del menu:
Fai clic sull'icona con tre puntini nella colonna Azioni vicino all'account di servizio predefinito di App Engine. E seleziona
Opzione **Crea chiave** dal menu a discesa

Scegli JSON come tipo di chiave e fai clic
**CREA Questo scaricherà il file .json sul tuo computer. L'ultima cosa che dobbiamo fare qui è codificare questo file in formato base64 âÃÂàne avremo bisogno in seguito quando passeremo a GitHub Actions

Questo può essere fatto usando la riga di comando come segue:
base64 tuo_json_file.json >chiave.base64
Quindi il file key.base64 avrebbe la chiave codificata base64

**Nota di sicurezza qui questi file chiave json e base64 consentono di controllare il tuo progetto GAE, quindi dopo averli aggiunti alle azioni GitHub (come mostrerò di seguito), si consiglia di distruggere eliminare questi file. Questo può essere fatto da cli come segue:
shred key_file_name&& rm nome_file_chiave
Una volta ottenuta la chiave, dobbiamo abilitare le API di Google App Engine âÃÂàper farlo visita la pagina httpsconsole.developers.google.com/apis/api/appengine .googleapis.com/overview e fai clic
**ABILITARE**

 Impostazione del repository GitHub e delle azioni GitHub
Infine, è il momento di preparare il nostro repository GitHub. Questo tutorial copre la configurazione del tema Evie di Undraw. (Questo è il tema che sto attualmente utilizzando per la landing page di Reliza Hub!) Il tema originale di Evie è ospitato qui, ma userò il fork di Reliza in questo repository

Come ho già detto in altri articoli, la mia filosofia di compilazione in questi giorni è dockerizzare tutto e utilizzare
docker build come ambiente di build CI unificato su più piattaforme. Pertanto, ho aggiunto Dockerfile, configurazione nginx e anche aggiornato le versioni npm relative al tema Evie originale per avere una build dockerizzata funzionante

Ora se lo facciamo
comando docker build sui contenuti del repository Evie di RelizaâÃÂÃÂs, creerà un'immagine basata su nginx che serve il tema Evie senza documentazione sulla porta 80

È giunto il momento di preparare lo script GitHub Actions. Useremo l'azione actions-hub/gcloud@master che semplifica l'intero processo

Iniziamo impostando 2 segreti GitHub Actions necessari per l'azione. Passare a Impostazioni ->Segreti all'interno del repository GitHub e fare clic su
**Nuovo segreto** per impostare i seguenti 2 segreti:
- GCLOUD_PROJECT_ID âÃÂàimpostalo sull'id del progetto annotato quando stavi creando il tuo progetto: evie-landing-tutorial nel mio caso

- GOOGLE_APPLICATION_CREDENTIALS âÃÂàimpostalo sui contenuti del file chiave json con codifica base64 ottenuto per l'account di servizio Google sopra

Ora nel repository creo la directory .github e quindi la directory dei flussi di lavoro al suo interno. E al suo interno creo gae_build.yml. Inoltre, dobbiamo aggiungere il file app.yaml che contiene la configurazione GAE e sarebbe molto semplice per il caso d'uso dell'app statica che ho

Dopo aver inserito questo codice, attiverà la build di GitHub Actions, che effettuerà una distribuzione alla tua applicazione GAE âÃÂàe i tuoi servizi andranno in diretta! Ogni push successivo a GitHub attiverà automaticamente una nuova build di GitHub Actions e aggiornerà automaticamente l'applicazione su GAE

Ora hai la pipeline CICD di base per il tuo sito web statico pronto! Puoi fermarti qui o continuare a leggere come puoi aggiungere la funzionalità di visibilità dell'approvazione e della distribuzione utilizzando Reliza Hub

 BONUS: aggiunta di approvazioni e visibilità utilizzando Reliza Hub

Supponiamo che non vogliamo che ogni nuova build vada automaticamente in produzione.Invece, vogliamo che vengano implementati prima da qualche parte che non sia la produzione, e poi se ci piacciono âÃÂàtu o il tuo approvatore (diciamo, il tuo Marketing Manager) hai bisogno per fare clic su un pulsante e passare alla produzioneEcco come ottenere questo risultato con Reliza Hub oltre alla configurazione che ho descritto finora1 à ¢ÃÂàStreaming dei metadati di rilascio su Reliza HubPer prima cosa, vai su httpsapp.relizahub.com, autenticati con GitHub e crea la tua organizzazione, nel mio caso userò*âÃÂÃÂEvie Landing TutorialâÃÂÃÂ* come nome dell'organizzazione.Fai clic sulla voce di menu **VCS** e poi sull'icona del cerchio più per aggiungere un repository VCSIncolla l'URI del tuo repository GitHub nell'input e Reliza Hub lo farà analizzalo automaticamenteFai clic su**Invia e questo creerà il tuo repository.Vai al menu Progetti e fai clic sull'icona con il cerchio più per creare un progetto.Inserisci il nome del tuo progetto (userò lo schema della versione *Evie Landing Set su Single Component (Major) âÃÂàperché GAE utilizza il proprio controllo delle versioni costituito da un componente âÃÂàche useremo all'interno di Reliza Hub così com'èScegli il repository VCS come quello che hai appena creato nel passaggio precedenteE fai clic su**Invia Questo creerà un nuovo progetto.Quindi fai clic sul nome del progetto appena creato e fai clic sull'icona del lucchetto per generare la chiave API del progettoQuando vedi l'ID API e la chiave API generati per il tuo progetto, crea 2 nuovi segreti in GitHub Actions âÃÂàRELIZA_API_PROJECT_ID e RELIZA_API_PROJECT_KEY con i valori corrispondentiOra , è giunto il momento di aggiornare il nostro script gae_build.yml per eseguire lo streaming dei dettagli della build su Reliza e passare anche alla modalità senza promozione.Ciò significa che a ogni git push verrà creata una distribuzione su GAE, ma Google lo farà non trasferire il traffico a questa nuova implementazione fino a qualche passaggio manuale in ritardo rLo script aggiornato include la segnalazione del monitoraggio del tempo di compilazione a Reliza Hub e avrà anche l'URI di ogni distribuzione non promossa su GAE.Puoi trovare la descrizione dei vari flag che usiamo nel repository GitHub del client Reliza GoAl termine dell'esecuzione delle azioni su push di GitHub, puoi navigare alla pagina di la tua versione in Reliza Hub e vedi la seguente immagine:Nota che facendo clic sul link**Test endpoint** ti porterà alla versione di distribuzione effettiva su GAE corrispondente a questa voce di codice sorgente âÃÂàma non ancora promossa per servire il trafficoPuoi anche aggiungere l'integrazione slack seguendo la guida qui per ricevere notifiche di ogni nuova versione su Reliza Hub2 âÃÂàAggiunta di approvazioniVai alla pagina Impostazioni di Reliza Hub e in fondo configura la tua matrice di approvazione per ambiente PRODUZIONE.Nel mio caso, richiederò solo un'approvazione da parte del MARKETING per una pubblicazione da promuovere alla produzione.Come segue:Fai clic su**Salva matrice**Successivamente installo l'app Reliza GitHub à¢ÃÂàhttpsgithub.com/apps/reliza-hub âÃÂàe segui il tutorial che ho scritto in precedenza per registralo per il progettoInfine, Ia nuovo flusso di lavoro GitHub Actions che verrebbe attivato su approvazioni da Reliza Hub âÃÂàpuoi vederlo qui.Essenzialmente, questo flusso di lavoro interroga Reliza Hub per la versione più recente approvata dalla produzione e quindi richiede a Google App Engine di trasferire il traffico a quella versioneL'unica cosa che richiede la configurazione in questo script è la variabile d'ambiente RELIZA_PROJECT_ID âÃÂàche deve essere impostata sull'UUID del progetto ottenuto nella pagina del progetto in Reliza Hub:Ora, ultimo rilascio del progetto con un'approvazione da MARKETING verrebbe promossa automaticamente sul lato Google App EnginePer i dettagli su come aggiungere approvatori all'organizzazione, guarda il mio video tutorial sulle approvazioni3 âÃÂàAggiungi visibilità per ciò che viene distribuito quandoInfine, vogliamo aggiungere visibilità su Reliza Hub su quale versione è effettivamente distribuita e quandoPer farlo, prima vai su Istanze in Reliza Hub e fai clic sull'icona con il cerchio più per crearne una nuova instanceInserisco quindi l'URI della mia istanza e seleziono l'ambiente come PRODUCTION âÃÂàpoiché ho solo l'ambiente di produzione su questo sito Web statico.Facendo clic su**Invia** crea la mia nuova istanzaSuccessivamente seleziono questa istanza appena creata e faccio clic sull'icona del lucchetto per generare la sua chiave APIQuando vengono generati ID API e chiave API, crea 2 nuovi segreti nelle azioni GitHub âÃÂàRELIZA_API_INSTANCE_ID e RELIZA_API_INSTANCE_KEY con i valori corrispondentiCon questo per prima cosa aggiorno il mio script di distribuzione in fase di approvazione per aggiungere una sezione per verificare la distribuzione su GAE e inviarla in streaming a Reliza Hub.E aggiungo anche un flusso di lavoro cron GitHub Actions per verificare lo stato della mia applicazione GAEDopo l'esecuzione di uno qualsiasi di questi flussi di lavoro, otterremo l'istantanea della distribuzione della nostra applicazione GAE in Reliza Hub nella nostra visualizzazione dell'istanza come segue:RiepilogoEcco fatto, ora abbiamo una pipeline CI CD completa con GitHub Actions che si distribuisce a GAE e approvazioni e visibilità gestito da Reliza Hub.Possiamo anche ricevere notifiche Slack e il nostro responsabile marketing visualizzare le modifiche e premere pulsanti per promuoverle alla produzione senza chiedere al personale tecnico.Quanto è bello?
Se desideri parlare con me e discutere ulteriormente di questo o di altri flussi di lavoro âÃÂàprenota una chiamata demo Reliza Hub di 30 minuti senza vincoli con me âààe farò del mio meglio per aiutare.