Er zijn momenteel 2 populairste platforms om statische websites te hosten: Netlify en Google App Engine (GAE)

Netlify is de laatste tijd enorm populair geworden omdat het een geïntegreerde ervaring biedt met het bouwen en implementeren van statische websites, allemaal op hetzelfde platform

GAE is flexibeler omdat het ook niet-statische websites ondersteunt, maar het mist zeker het niveau van integratie dat Netlify biedt. Dus waarom zou ik in veel gevallen nog steeds GAE gebruiken? Het antwoord is eenvoudig: vaak biedt GAE betere prijsopties. Tegelijkertijd maakt het het mogelijk om alle functies van Netlify en meer te hebben met behulp van enkele eenvoudige tools (GitHub Actions en Reliza Hub) die ik in dit artikel zal beschrijven

 Prijzen
Laat me eerst prijsscenario's behandelen wanneer de combinatie GAE + GitHub Actions logischer is. Het belangrijkste punt zijn bouwminuten. De gratis laag van Netlify geeft slechts 300 bouwminuten per maand, wat in geen geval veel is. Als je zoiets als de node.js-app gebruikt die statisch is gemaakt en je builds gemiddeld 2-3 minuten duren, krijg je slechts ongeveer 100+ builds per maand op Netlify, wat misschien niet genoeg is. Zeker als je meer dan één website hebt

Als je meer build-minuten op Netlify nodig hebt, betaal je ofwel $ 7 per 500 extra minuten, of ga je naar het volgende niveau dat 1000 minuten omvat, maar $ 45 per maand kost. Aan de andere kant krijg je op GitHub Actions 2000 buildminuten gratis voor privérepository's en onbeperkte buildminuten voor openbare. Stel dat u een documentatiewebsite aan het bouwen bent en besluit deze openbaar te maken op GitHub ÃÂàu krijgt onbeperkte bouwminuten op GitHub Actions âÃÂàen dat maakt een enorm verschil

De volgende overweging zijn de verkeerskosten. Netlify biedt 100 GB uitgaande bandbreedte per maand inbegrepen in zijn gratis laag, wat genereus is. Google biedt 1 GB uitgaand verkeer per dag gratis aan, wat neerkomt op ongeveer 30 GB per maand. Dus als uw uitgaand verkeer tussen 30 GB en 100 GB ligt, krijgt u mogelijk een betere deal op Netlify. Zodra u echter de 100 GB voorbij bent, brengt Netlify u die maand meteen $ 20 in rekening voor de volgende 100 GB. Google hanteert een prijsbeleid per GB uitgaand verkeer dat $ 0,12 kost. Dit betekent dat u $ 12/100 GB betaalt in plaats van $ 20/100 GB op Netlify

Dus afhankelijk van het verkeer, ben je misschien beter af op Netlify of op GAE vanuit het perspectief van uitgaand verkeer. Maar in veel gevallen zou GAE ook hier meer waarde bieden
Laatste woord over prijzen âÃÂàals u iets als GitHub Actions of CircleCI gebruikt voor uw builds, kunt u nog steeds implementeren op Netlify ÃÂàwaardoor GitHub Actions flexibeler systeem

 Google App Engine-project configureren
We beginnen door naar httpsconsole.cloud.google.com/appengine te gaan en een nieuw project te maken. Als je er al een had, klik dan eerst op je projectnaam bovenaan en daarna op
**NIEUW PROJECT**

Voer de projectnaam in, noteer hier het project-ID dat u krijgt (u hebt het later nodig) âÃÂàin mijn geval is het
*âÃÂÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂàen klik op **MAKEN Schakel vervolgens over naar dit project via de projectkiezer bovenaan de pagina

Klik op
**Create Application** en kies de gewenste regio. Selecteer vervolgens voor statische toepassingen Python en Standard-omgeving (gratis laag is alleen van toepassing op Standard-omgeving). Op dit punt is uw aanvraag klaar voor de volgende stappen

Om uw domeinnaam naar deze applicatie te verwijzen, navigeert u naar httpsconsole.cloud.google.com/appengine/settings/domains

en klik
**Voeg een aangepast domein toe Volg de instructies en verwijs DNS van uw domein naar de door Google verstrekte records. Wanneer dit is gebeurd, zal Google uw domein automatisch naar deze applicatie verwijzen en ook het SSL-certificaat beheren

Ten slotte moeten we een serviceaccount voorbereiden dat verantwoordelijk is voor automatische implementaties. Navigeer naar httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (vervang
*your_project_id *in deze link met je daadwerkelijke project-id, in mijn geval zou dit *evie-landing-tutorial zijn Je komt op de volgende menupagina:
Klik op het pictogram met drie stippen in de kolom Acties in de buurt van het standaard serviceaccount van App Engine. En selecteer
**Creëer sleutel** optie in het vervolgkeuzemenu

Kies JSON als uw sleuteltype en klik
**CREATE Hiermee wordt het .json-bestand naar uw computer gedownload. Het laatste wat we hier moeten doen, is dit bestand coderen in base64-indeling. We hebben dit later nodig wanneer we naar GitHub Actions gaan

Dit kan worden gedaan door de opdrachtregel als volgt te gebruiken:
base64 your_json_file.json >key.base64
Dan zou het key.base64-bestand de base64-gecodeerde sleutel hebben

**Veiligheidsopmerking: deze json- en base64-sleutelbestanden maken het mogelijk om uw GAE-project te besturen, dus nadat u ze hebt toegevoegd aan GitHub Actions (zoals ik hieronder zal laten zien), wordt aanbevolen om ze te versnipperen verwijder deze bestanden. Dit kan als volgt worden gedaan vanuit cli:
versnipperen key_file_name&& rm key_file_name
Zodra de sleutel is verkregen, moeten we Google App Engine API's inschakelen âÃÂàga hiervoor naar de pagina httpsconsole.developers.google.com/apis/api/appengine .googleapis.com/overview en klik
**INSCHAKELEN**

 GitHub-repository en GitHub-acties instellen
Eindelijk is het tijd om onze GitHub Repository voor te bereiden. Deze tutorial behandelt de installatie van het Evie-thema door Undraw. (Dit is het thema dat ik momenteel gebruik voor de bestemmingspagina van Reliza Hub!) Het originele Evie-thema wordt hier gehost, maar ik zal de vork van Reliza gebruiken in deze repository

Zoals ik al in andere artikelen heb vermeld, is mijn bouwfilosofie tegenwoordig om alles te koppelen en te gebruiken
docker gebouwd als een uniforme CI-bouwomgeving op meerdere platforms. Daarom heb ik Dockerfile, nginx-configuratie en ook bijgewerkte npm-versies ten opzichte van het originele Evie-thema toegevoegd om een ​​werkende dockerized build te hebben

Als we dat nu doen
docker build-opdracht op de RelizaÃÂÃÂs inhoud van de Evie-repository, het zal een op nginx gebaseerde afbeelding bouwen die het Evie-thema bedient zonder documentatie op poort 80

Het is nu tijd om het GitHub Actions-script voor te bereiden. We zullen action-hub/gcloud@master action gebruiken, wat het hele proces eenvoudig maakt

We beginnen met het instellen van 2 GitHub Actions-geheimen die nodig zijn voor de actie. Navigeer naar Instellingen ->Geheimen in uw GitHub-repository en klik
**Nieuw geheim** om de volgende 2 geheimen in te stellen:
- GCLOUD_PROJECT_ID âÃÂàstel het in op de project-ID die is genoteerd toen u uw project aan het maken was: evie-landing-tutorial in mijn geval

- GOOGLE_APPLICATION_CREDENTIALS âÃÂàstel het in op de inhoud van het base64-gecodeerde json-key-bestand dat is verkregen voor het Google-serviceaccount hierboven

Nu maak ik in de repository de .github-directory en vervolgens de workflows-directory erin. En daarin maak ik gae_build.yml. We moeten ook een app.yaml-bestand toevoegen dat de GAE-configuratie bevat en dat heel eenvoudig zou zijn voor de statische app-use-case die ik heb

Nadat u deze code heeft gepusht, wordt de GitHub Actions-build geactiveerd, die een implementatie naar uw GAE-toepassing zal uitvoeren en uw services live gaan! Elke volgende push naar GitHub activeert automatisch een nieuwe GitHub Actions-build en updatet de applicatie automatisch op GAE

Nu heb je de basis CICD-pijplijn voor je statische website gereed! U kunt hier stoppen of u kunt verder lezen hoe u functionaliteit voor goedkeuring en zichtbaarheid van implementatie kunt toevoegen met behulp van Reliza Hub

 BONUS: goedkeuringen en zichtbaarheid toevoegen met behulp van Reliza Hub

Stel, we willen niet dat elke nieuwe build automatisch in productie gaat.In plaats daarvan willen we dat ze eerst ergens worden ingezet wat geen productie is, en als we ze leuk vinden, heeft u of uw goedkeurder (bijvoorbeeld uw marketingmanager) nodig om op een knop te klikken en naar productie te promoverenHier is hoe dit kan worden bereikt met Reliza Hub bovenop de configuratie die ik tot nu toe heb beschreven1 à ¢ÃÂàStreaming release metadata naar Reliza HubNavigeer eerst naar httpsapp.relizahub.com, authenticeer met GitHub en maak uw organisatie aan, in mijn geval zal ikgebruiken *âÃÂÃÂEvie Landing TutorialâÃÂÃÂ* als naam van de organisatie.Klik op het menu-item **VCS** en vervolgens op het plus-cirkelpictogram om een ​​VCS-repository toe te voegenPlak je GitHub-repository-URI in de invoer en Reliza Hub zal ontleed het automatischKlik op**Verzenden en dit zal uw repository maken.Ga naar het menu Projecten en klik op het plus-cirkelpictogram om een ​​project te maken.Voer uw projectnaam in (ik zal *Evie Landing gebruiken Stel versieschema in op Enkele component (hoofd) âÃÂàdat komt omdat GAE zijn eigen versiebeheer gebruikt dat uit één component bestaat âÃÂàdie we zullen gebruiken in Reliza Hub zoals het isKies de VCS-repository die je zojuist hebt gemaakt in de vorige stapEn klik op**Verzenden Hiermee wordt een nieuw project gemaaktKlik vervolgens op deze nieuw gemaakte projectnaam en klik op het slotpictogram om de api-sleutel van het project te genererenWanneer u API ID en API Key ziet gegenereerd voor uw project, maak dan 2 nieuwe geheimen in GitHub Actions âÃÂàRELIZA_API_PROJECT_ID en RELIZA_API_PROJECT_KEY met overeenkomstige waardenNow , is het tijd om ons gae_build.yml-script bij te werken om builddetails naar Reliza te streamen en ook over te schakelen naar de no-promote-modus.Dit betekent dat bij elke git-push een implementatie wordt gemaakt op GAE, maar Google zal verkeer pas overschakelen naar deze nieuwe implementatie als er een handmatige stap te laat is rHet bijgewerkte script bevat rapportage van het bijhouden van de bouwtijd aan Reliza Hub en bevat ook de URI van elke niet-gepromote implementatie op GAE.Je kunt de beschrijving van de verschillende vlaggen die we gebruiken vinden in de GitHub-repository van Reliza Go ClientNadat GitHub-acties zijn uitgevoerd op push-completes, kun je naar de pagina van uw release in Reliza Hub en zie de volgende afbeelding:Houd er rekening mee dat als u op de link**Testendpoint** klikt, u naar de daadwerkelijke implementatieversie op GAE gaat die overeenkomt met dit broncode-item âÃÂàmaar nog niet gepromoveerd om verkeer te bedienenU kunt ook slappe integratie toevoegen door de gids hier te volgen om meldingen van elke nieuwe release te ontvangen op Reliza Hub2 âÃÂàGoedkeuringen toevoegenGa naar de pagina Instellingen van Reliza Hub en configureer onderaan je goedkeuringsmatrix voor PRODUCTIE omgeving.In mijn geval heb ik alleen een goedkeuring van MARKETING nodig om een ​​release te promoveren naar productie.Als volgt:Klik op**Matrix opslaan**Vervolgens installeer ik de Reliza GitHub-app à¢ÃÂàhttpsgithub.com/apps/reliza-hub âÃÂàen volg de tutorial die ik eerder heb geschreven om registreer het voor het projectTen slotte heb ik een nieuwe GitHub Actions-workflow die zou worden geactiveerd bij goedkeuringen van Reliza Hub âÃÂàje kunt het hier zien.In wezen vraagt ​​deze workflow Reliza Hub om de meest recente productie-goedgekeurde versie en vraagt ​​vervolgens Google App Engine om verkeer naar die versie over te schakelenHet enige dat configuratie vereist in deze script is RELIZA_PROJECT_ID omgevingsvariabele âÃÂàdie moet worden ingesteld op project-UUID verkregen op de projectpagina in Reliza Hub:Nu, laatste projectuitgave met een goedkeuring van MARKETING zou automatisch gepromoot worden aan de kant van Google App EngineVoor meer informatie over hoe u goedkeurders aan de organisatie kunt toevoegen, bekijkt u mijn zelfstudievideo over goedkeuringen3 âÃÂàZichtbaarheid toevoegen voor wat wordt geïmplementeerd wanneerTen slotte willen we zichtbaarheid toevoegen aan Reliza Hub over welke release daadwerkelijk wordt geïmplementeerd en wanneerGa hiervoor eerst naar Instances in Reliza Hub en klik op het plus-cirkelpictogram om een ​​nieuwe te maken instantieIk voer vervolgens de URI van mijn instantie in en selecteer de omgeving als PRODUCTIE ÃÂàaangezien ik alleen een productieomgeving op deze statische website heb.Door te klikken op**Verzenden** wordt mijn nieuwe instantie gemaaktVervolgens selecteer ik deze nieuw gemaakte instantie en klik op het slotpictogram om de api-sleutel te genererenWanneer API ID en API Key worden gegenereerd, maak dan 2 nieuwe geheimen aan in GitHub Actions âÃÂàRELIZA_API_INSTANCE_ID en RELIZA_API_INSTANCE_KEY met overeenkomstige waardenHiermee update ik eerst mijn on-approval implementatiescript om sectie toe te voegen om te controleren op implementatie op GAE en deze naar Reliza Hub te streamen.En ik voeg ook een cron GitHub Actions-workflow toe om de status van mijn GAE-applicatie te verifiërenNadat een van deze workflows is uitgevoerd, krijgen we de implementatiemomentopname van onze GAE-applicatie in Reliza Hub ziet er in onze instantie als volgt uit:SamenvattingDit is het, nu hebben we een volledige drukknop-CI CD-pijplijn met GitHub-acties die worden geïmplementeerd in GAE en goedkeuringen en zichtbaarheid beheerd door Reliza Hub.We kunnen ook Slack-meldingen hebben en onze marketingmanager wijzigingen bekijken en op knoppen drukken om ze naar productie te promoveren zonder technisch personeel te vragen.Hoe gaaf is dat?
Als je met me wilt praten en deze of andere workflow verder wilt bespreken, boek dan een vrijblijvende 30 minuten durende Reliza Hub-demogesprek met mij âààen ik zal mijn best doen om te helpen.