Det finns två mest populära plattformar idag för att vara värd för statiska webbplatser: Netlify och Google App Engine (GAE)

Netlify fick mycket popularitet nyligen eftersom det ger integrerad erfarenhet av att bygga och distribuera statiska webbplatser - allt i samma plattform

GAE är mer flexibelt i termer av att det stöder icke-statiska webbplatser också, men det saknar verkligen integreringsnivån som Netlify erbjuder. Så varför skulle jag fortfarande använda GAE i många fall? Svaret är enkelt – ofta ger GAE bättre prisalternativ. Samtidigt tillåter det att ha alla funktioner i Netlify och mer med hjälp av några enkla verktyg (GitHub Actions och Reliza Hub) som jag kommer att beskriva i den här artikeln

 Prissättning
Låt mig först täcka prissättningsscenarier när GAE + GitHub Actions-kombinationen är mer vettig. Nyckelpunkten är byggminuter. Netlify’s gratisnivå ger bara 300 byggminuter per månad, vilket inte är mycket på något sätt. Om du använder något som node.js app gjort statisk och dina builds tar 2-3 minuter i genomsnitt, får du bara cirka 100+ builds per månad på Netlify, vilket lätt kanske inte räcker. Speciellt om du har mer än en webbplats

Om du behöver fler byggminuter på Netlify âÃÂàbetalar du antingen $7 per 500 extra minuter, eller gå vidare till nästa nivå som inkluderar 1000 minuter, men kostar $45/månad. Å andra sidan, på GitHub Actions får du 2000 byggminuter gratis för privata arkiv och obegränsade byggminuter för offentliga. Säg att du bygger en dokumentationswebbplats och bestämmer dig för att göra den offentlig på GitHub - du får obegränsade byggminuter på GitHub Actions - och det gör en enorm skillnad

Nästa övervägande är trafikkostnader. Netlify tillhandahåller 100 GB bandbreddsavgång per månad inkluderad på sin gratisnivå, vilket är generöst. Google erbjuder 1 GB utträde per dag gratis, vilket gör det till cirka 30 GB per månad. Så om ditt utträde är mellan 30 GB och 100 GB kan du få ett bättre erbjudande på Netlify. Men när du har passerat 100 GB debiterar Netlify dig $20 för nästa 100 GB den månaden direkt. Google har en prispolicy per utgående GB som kostar 0,12 USD. Det betyder att du betalar $12/100GB âÃÂàkontra $20/100GB på Netlify

Så beroende på trafik kan du vara bättre på antingen Netlify eller på GAE från den potentiella utgångspunkten. Men i många fall skulle GAE ge bättre värde även här
Sista ord om prissättning om du använder något som GitHub Actions eller CircleCI för dina builds, kan du fortfarande distribuera på Netlify âÃÂàvilket gör GitHub Actions mer flexibelt system

 Konfigurera Google App Engine Project
Vi börjar med att gå till httpsconsole.cloud.google.com/appengine och skapa ett nytt projekt. Om du redan hade ett, klicka först på ditt projektnamn högst upp och klicka sedan på
**NYTT PROJEKT**

Ange projektnamn, notera här projekt-ID som du får (du kommer att behöva det senare) i mitt fall är det
*âÃÂÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂàoch klicka på **SKAPA Byt sedan till detta projekt från projektväljaren högst upp på sidan

Klicka på
**Skapa applikation** och välj önskad region. Välj sedan Python och standardmiljö för statisk applikation (gratis nivå gäller endast standardmiljö). Vid det här laget är din ansökan redo för nästa steg

För att peka ditt domännamn till den här applikationen, navigera till httpsconsole.cloud.google.com/appengine/settings/domains

och klicka
**Lägg till en anpassad domän Följ instruktionerna och peka DNS från din domän till Googles tillhandahållna poster. När detta är gjort kommer Google automatiskt att peka din domän till denna applikation och även hantera SSL-certifikat

Slutligen måste vi förbereda ett tjänstkonto som skulle ansvara för automatiska distributioner. Navigera till httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (ersätt
*ditt_projekt_id *i den här länken med ditt faktiska projekt-id, i mitt fall skulle detta vara *evie-landing-tutorial Du kommer till följande menysida:
Klicka på ikonen med tre punkter i kolumnen Åtgärder nära App Engines standardtjänstkonto. Och välj
Alternativet **Skapa nyckel** från rullgardinsmenyn

Välj JSON som din nyckeltyp och klicka
**CREATE Detta kommer att ladda ner .json-filen till din maskin. Det sista vi behöver göra här är att koda den här filen i base64-format - vi kommer att behöva detta senare när vi flyttar till GitHub Actions

Detta kan göras genom att använda kommandoraden enligt följande:
base64 your_json_file.json >key.base64
Då skulle filen key.base64 ha den base64-kodade nyckeln

**Säkerhetsnotering här tillåter dessa json- och base64-nyckelfiler att styra ditt GAE-projekt, så efter att du har lagt till dem i GitHub Actions (som jag kommer att visa nedan), rekommenderas det att strimla radera dessa filer. Detta kan göras från cli enligt följande:
shred key_file_name&& rm nyckelfilnamn
När nyckeln har erhållits måste vi aktivera Google App Engine APIs âÃÂàför att göra det besök sidan httpsconsole.developers.google.com/apis/api/appengine .googleapis.com/overview och klicka
**GÖR DET MÖJLIGT**

 Ställa in GitHub Repository och GitHub-åtgärder
Äntligen är det dags att förbereda vårt GitHub Repository. Denna handledning täcker inställningen av Evie-temat av Undraw. (Detta är temat som jag för närvarande använder för Reliza Hub-målsidan!) Det ursprungliga Evie-temat är värd här, men jag kommer att använda Relizas gaffel i det här förrådet

Som jag nämnde redan i andra artiklar, är min byggfilosofi nu för tiden att förankra allt och använda
docker build som en enhetlig CI-byggmiljö över flera plattformar. Därför lade jag till Dockerfile, nginx-konfiguration och uppdaterade även npm-versioner i förhållande till det ursprungliga Evie-temat för att ha en fungerande dockeriserad build

Om vi ​​nu gör det
docker build-kommando på RelizaâÃÂÃÂs Evie-förvarsinnehåll, det kommer att bygga en nginx-baserad bild som serverar Evie-tema utan dokumentation på port 80

Det är nu dags att förbereda GitHub Actions-skriptet. Vi kommer att använda actions-hub/gcloud@master action som gör hela processen enkel

Vi börjar med att ställa in 2 GitHub Actions-hemligheter som behövs för handlingen. Navigera till Inställningar ->Hemligheter i ditt GitHub-förråd och klicka
**Ny hemlighet** för att ställa in följande 2 hemligheter:
- GCLOUD_PROJECT_ID âÃÂàställ in den till projekt-id:t som noterades när du skapade ditt projekt: evie-landing-tutorial i mitt fall

- GOOGLE_APPLICATION_CREDENTIALS âÃÂàställ in den till innehållet i base64-kodad json-key-fil som erhållits för Googles tjänstkonto ovan

Nu i förvaret skapar jag .github-katalogen och sedan arbetsflödeskatalogen inuti den. Och inuti den skapar jag gae_build.yml. Vi måste också lägga till filen app.yaml som innehåller GAE-konfiguration och som skulle vara väldigt enkel för det statiska appanvändningsfallet som jag har

När du har tryckt på den här koden kommer den att utlösa GitHub Actions-bygget, vilket kommer att göra en distribution till din GAE-applikation och dina tjänster kommer att gå live! Varje efterföljande push till GitHub kommer automatiskt att utlösa ett nytt GitHub Actions-bygge och automatiskt uppdatera applikationen på GAE

Nu har du grundläggande CICD-pipeline för din statiska webbplats redo! Du kan sluta här eller så kan du fortsätta läsa hur du kan lägga till funktionalitet för godkännande och distribution med hjälp av Reliza Hub

 BONUS: Lägga till godkännanden och synlighet med hjälp av Reliza Hub

Antag att vi inte vill att varje nybyggnation ska gå till produktion automatiskt.Istället vill vi att de först ska distribueras någonstans som inte är produktion, och sedan om vi gillar dem behöver du eller din godkännare (säg din marknadschef) att klicka på en knapp och främja till produktionSå här kan detta uppnås med Reliza Hub ovanpå konfigurationen jag beskrivit hittills1 à ¢ÃÂàStreama release-metadata till Reliza HubNavigera först till httpsapp.relizahub.com, autentisera med GitHub och skapa din organisation, i mitt fall kommer jag att använda*âÃÂÃÂEvie Landing TutorialâÃÂÃÂ* som organisationsnamn.Klicka på menyalternativet **VCS** och sedan på pluscirkelikonen för att lägga till ett VCS-förrådKlistra in din GitHub-repository-URI i ingången och Reliza Hub kommer att analysera det automatisktKlicka på**Skicka och detta kommer att skapa ditt arkiv.Fortsätt till projektmenyn och klicka på pluscirkelikonen för att skapa ett projekt.Ange ditt projektnamn (jag kommer att använda *Evie Landing Set version schema to Single Component (Major) âÃÂàdet beror på att GAE använder sin egen versionshantering bestående av en komponent âÃÂàsom vi kommer att använda i Reliza Hub som den ärVälj VCS-förråd som det du just skapade i föregående stegOch klicka**Skicka Detta kommer att skapa ett nytt projektKlicka sedan på det nyskapade projektnamnet och klicka på låsikonen för att generera projekt api-nyckelNär du ser API-ID och API-nyckel genererade för ditt projekt, skapa 2 nya hemligheter i GitHub Actions âÃÂàRELIZA_API_PROJECT_ID och RELIZA_API_PROJECT_KEY med motsvarande värdenNu , det är dags att uppdatera vårt gae_build.yml-skript för att strömma byggdetaljer till Reliza och även byta till no-promote-läge.Detta betyder att vid varje git-push kommer en distribution att skapas på GAE, men Google kommer att byt inte trafik till den här nya distributionen förrän något manuellt steg sent rDet uppdaterade skriptet inkluderar rapportering av byggtidsspårning till Reliza Hub och kommer även att ha URI för varje icke-promoterad distribution på GAE.Du kan hitta beskrivningen av de olika flaggorna vi använder i GitHub-arkivet för Reliza Go ClientEfter att GitHub-åtgärder har körts vid push-slut, kan du navigera till sidan för din release i Reliza Hub och se följande bild:Observera att om du klickar på länken**Testa slutpunkt** kommer du till den faktiska distributionsversionen på GAE som motsvarar denna källkodspost âÃÂàmen ännu inte marknadsförd för att betjäna trafikDu kan också lägga till slack integration genom att följa guiden här för att få meddelanden om varje ny release på Reliza Hub2 âÃÂàLägga till godkännandenGå till sidan Inställningar för Reliza Hub och konfigurera din godkännandematris längst ned i den för PRODUKTIONSmiljö.I mitt fall kommer jag bara att kräva ett godkännande från MARKETING för att en utgåva ska marknadsföras till produktion.Följande:Klicka på**Spara matris**Nästa Jag installerar Reliza GitHub-appen à¢ÃÂàhttpsgithub.com/apps/reliza-hub âÃÂàoch följ handledningen jag har skrivit tidigare för att registrera det för projektetSlutligen, I ett nytt GitHub Actions-arbetsflöde som skulle triggas vid godkännanden från Reliza Hub âÃÂàdu kan se det här.I huvudsak frågar detta arbetsflöde Reliza Hub efter den senaste produktionsgodkända versionen och begär sedan att Google App Engine byter trafik till den versionenDet enda som kräver konfiguration i denna version skriptet är RELIZA_PROJECT_ID miljövariabel âÃÂàsom måste ställas in på projektets UUID som erhållits på projektsidan i Reliza Hub:Nu, senaste projektutgåvan med ett godkännande från MARKETING kommer automatiskt att marknadsföras på Google App Engine-sidanFör detaljer, hur du kan lägga till godkännare till organisationen, se min handledningsvideo om godkännanden3 âÃÂàLägg till synlighet för vad som används närSlutligen vill vi lägga till synlighet på Reliza Hub om vilken version som faktiskt distribueras och närFör att göra det, gå först till Instanser i Reliza Hub och klicka på pluscirkelikonen för att skapa en ny instansJag anger sedan URI för min instans och väljer miljö som PRODUCTION âÃÂàeftersom jag bara har produktionsmiljö på denna statiska webbplats.Genom att klicka på**Skicka** skapas min nya instansDärefter väljer jag den här nyskapade instansen och klickar på låsikonen för att generera dess api-nyckelNär API ID och API Key genereras, skapa 2 nya hemligheter i GitHub Actions âÃÂàRELIZA_API_INSTANCE_ID och RELIZA_API_INSTANCE_KEY med motsvarande värdenMed detta uppdaterar jag först mitt skript för driftsättning vid godkännande för att lägga till en sektion för att söka efter distribution på GAE och streama det till Reliza Hub.Och jag lägger också till ett cron GitHub Actions-arbetsflöde för att verifiera tillståndet för min GAE-applikationNär något av dessa arbetsflöden har körts kommer vi att få en ögonblicksbild av driftsättningen av vår GAE-applikation i Reliza Hub i vår instans ser följande:SammanfattningDet här är det, nu har vi en komplett CI CD-pipeline med tryckknappar med GitHub Actions som distribueras till GAE och godkännanden och synlighet förvaltas av Reliza Hub.Vi kan också ha Slack-aviseringar och vår marknadschef som ser ändringar och trycker på knappar för att marknadsföra dem till produktion utan att fråga teknisk personal.Hur coolt är det?
Om du vill prata med mig och diskutera detta eller annat arbetsflöde vidare âÃÂàboka ett 30-minuters Reliza Hub-demosamtal med mig àoch jag ska göra mitt bästa för att hjälpa.