Es gibt heute zwei beliebteste Plattformen zum Hosten statischer Websites: Netlify und Google App Engine (GAE)

Netlify hat in letzter Zeit viel Popularität erlangt, weil es integrierte Erfahrung mit dem Erstellen und Bereitstellen statischer Websites bietet – alles auf derselben Plattform

GAE ist flexibler, da es auch nicht statische Websites unterstützt, aber es fehlt sicherlich das Integrationsniveau, das Netlify bietet. Warum sollte ich in vielen Fällen immer noch GAE verwenden? Die Antwort ist einfach: Häufig bietet GAE bessere Preisoptionen. Gleichzeitig ermöglicht es alle Funktionen von Netlify und mehr mit wenigen einfachen Tools (GitHub Actions und Reliza Hub), die ich in diesem Artikel beschreiben werde

 Preisgestaltung
Lassen Sie mich zunächst auf Preisszenarien eingehen, wenn die Kombination aus GAE und GitHub-Aktionen sinnvoller ist. Der Schlüsselpunkt sind Build-Minuten. Die kostenlose Stufe von Netlify bietet nur 300 Build-Minuten pro Monat, was in keiner Weise viel ist. Wenn Sie so etwas wie die statisch gemachte node.js-App verwenden und Ihre Builds durchschnittlich 2-3 Minuten dauern, erhalten Sie auf Netlify nur etwa 100+ Builds pro Monat, was leicht nicht ausreichen kann. Vor allem, wenn Sie mehr als eine Website haben

Wenn Sie mehr Build-Minuten auf Netlify benötigen, zahlen Sie entweder 7 US-Dollar pro 500 zusätzliche Minuten oder wechseln Sie zur nächsten Stufe, die 1000 Minuten umfasst, aber 45 US-Dollar pro Monat kostet. Andererseits erhalten Sie bei GitHub Actions 2000 Build-Minuten kostenlos für private Repositories und unbegrenzte Build-Minuten für öffentliche. Angenommen, Sie erstellen eine Dokumentations-Website und beschließen, sie auf GitHub zu veröffentlichen – Sie erhalten unbegrenzte Build-Minuten auf GitHub Actions – und das macht ein riesiger unterschied

Die nächste Überlegung sind die Verkehrskosten. Netlify bietet 100 GB ausgehende Bandbreite pro Monat, die in seiner kostenlosen Stufe enthalten ist, was großzügig ist. Google bietet 1 GB ausgehenden Traffic pro Tag kostenlos an, was ungefähr 30 GB pro Monat entspricht. Wenn Ihr Ausgang also zwischen 30 GB und 100 GB groß ist, erhalten Sie möglicherweise ein besseres Angebot für Netlify. Sobald Sie jedoch 100 GB überschritten haben, berechnet Ihnen Netlify sofort 20 US-Dollar für die nächsten 100 GB in diesem Monat. Google hat eine Preispolitik pro ausgehendem GB, die 0,12 $ kostet. Das bedeutet, dass Sie bei Netlify 12 $/100 GB statt 20 $/100 GB bezahlen

Abhängig vom Datenverkehr sind Sie also möglicherweise entweder auf Netlify oder auf GAE von der Egress-Perspektive besser. Aber auch hier wäre GAE in vielen Fällen günstiger
Ein letztes Wort zur Preisgestaltung – wenn Sie etwas wie GitHub Actions oder CircleCI für Ihre Builds verwenden, können Sie immer noch auf Netlify bereitstellen – was macht GitHub Actions flexibleres System

 Konfigurieren des Google App Engine-Projekts
Wir gehen zunächst zu httpsconsole.cloud.google.com/appengine und erstellen ein neues Projekt. Wenn Sie bereits einen hatten, klicken Sie zuerst oben auf Ihren Projektnamen und dann auf
**NEUES PROJEKT**

Geben Sie den Projektnamen ein, notieren Sie hier die Projekt-ID, die Sie erhalten (Sie werden sie später benötigen) âÃÂà in meinem Fall ist es
*âÃÂÃÃÂevie-landing-tutorialâÃÂÃÂ* âÃÂâ und klicken Sie auf **CREATE. Wechseln Sie dann zu dieses Projekt aus der Projektauswahl oben auf der Seite

Klicke auf
**Anwendung erstellen** und wählen Sie Ihre gewünschte Region aus. Wählen Sie dann für die statische Anwendung Python und die Standardumgebung aus (das kostenlose Kontingent gilt nur für die Standardumgebung). An dieser Stelle ist Ihre Bewerbung bereit für die nächsten Schritte

Um Ihren Domänennamen auf diese Anwendung zu verweisen, navigieren Sie zu httpsconsole.cloud.google.com/appengine/settings/domains

und klicken
**Hinzufügen einer benutzerdefinierten Domain Folgen Sie den Anweisungen und verweisen Sie DNS von Ihrer Domain auf die von Google bereitgestellten Einträge. Wenn dies erledigt ist, verweist Google Ihre Domain automatisch auf diese Anwendung und verwaltet auch das SSL-Zertifikat

Schließlich müssen wir ein Dienstkonto vorbereiten, das für automatische Bereitstellungen verantwortlich wäre. Navigieren Sie zu httpsconsole.cloud.google.com/iam-admin/serviceaccounts?project=your_project_id (ersetzen Sie
*your_project_id *in diesem Link mit Ihrer tatsächlichen Projekt-ID, in meinem Fall wäre dies *evie-landing-tutorial Sie gelangen auf die folgende Menüseite:
Klicken Sie auf das 3-Punkte-Symbol in der Spalte „Aktionen“ neben dem App Engine-Standarddienstkonto. Und auswählen
Option **Schlüssel erstellen** aus dem Dropdown-Menü

Wählen Sie JSON als Schlüsseltyp und klicken Sie auf
**CREATE Dadurch wird die .json-Datei auf Ihren Computer heruntergeladen. Das Letzte, was wir hier tun müssen, ist, diese Datei im Base64-Format zu codieren – wir werden dies später brauchen, wenn wir zu GitHub Actions wechseln

Dies kann über die Befehlszeile wie folgt erfolgen:
base64 your_json_file.json >key.base64
Dann hätte die key.base64-Datei den base64-codierten Schlüssel

**Sicherheitshinweis: Diese JSON- und Base64-Schlüsseldateien ermöglichen die Steuerung Ihres GAE-Projekts. Daher wird empfohlen, sie zu schreddern, nachdem Sie sie zu GitHub-Aktionen hinzugefügt haben (wie ich unten zeigen werde). lösche diese Dateien. Dies kann über CLI wie folgt erfolgen:
schreddern key_file_name&& rm key_file_name
Sobald der Schlüssel abgerufen wurde, müssen wir die Google App Engine-APIs aktivieren. Besuchen Sie dazu die Seite httpsconsole.developers.google.com/apis/api/appengine .googleapis.com/overview und klicken Sie auf
**ERMÖGLICHEN**

 Einrichten von GitHub-Repository und GitHub-Aktionen
Schließlich ist es an der Zeit, unser GitHub-Repository vorzubereiten. Dieses Tutorial behandelt die Einrichtung des Evie-Designs von Undraw. (Dies ist das Thema, das ich derzeit für die Zielseite des Reliza-Hubs verwende!) Das ursprüngliche Evie-Thema wird hier gehostet, aber ich werde den Fork von Reliza in diesem Repository verwenden

Wie ich bereits in anderen Artikeln erwähnt habe, besteht meine Build-Philosophie heutzutage darin, alles zu docken und zu verwenden
Docker-Build als einheitliche CI-Build-Umgebung über mehrere Plattformen hinweg. Daher habe ich Dockerfile, nginx-Konfiguration hinzugefügt und auch npm-Versionen relativ zum ursprünglichen Evie-Design aktualisiert, um einen funktionierenden dockerisierten Build zu haben

Nun, wenn wir das tun
Docker-Build-Befehl auf den Evie-Repository-Inhalten von Reliza, erstellt er ein nginx-basiertes Image, das das Evie-Thema ohne Dokumentation auf Port 80 bedient

Es ist jetzt an der Zeit, das GitHub Actions-Skript vorzubereiten. Wir werden die Aktion actions-hub/gcloud@master verwenden, was den gesamten Prozess vereinfacht

Wir beginnen mit dem Festlegen von 2 GitHub-Aktionsgeheimnissen, die von der Aktion benötigt werden. Navigieren Sie in Ihrem GitHub-Repository zu Einstellungen ->Geheimnisse und klicken Sie auf
**Neues Geheimnis** zum Festlegen der folgenden 2 Geheimnisse:
- GCLOUD_PROJECT_ID âÃÂà setze es auf die Projekt-ID, die du dir notiert hast, als du dein Projekt erstellt hast: in meinem Fall evie-landing-tutorial

- GOOGLE_APPLICATION_CREDENTIALS âÃÂàauf den Inhalt der Base64-kodierten JSON-Key-Datei setzen, die oben für das Google-Dienstkonto erhalten wurde

Jetzt erstelle ich im Repository das Verzeichnis .github und dann das Verzeichnis Workflows darin. Und darin erstelle ich gae_build.yml. Außerdem müssen wir die Datei app.yaml hinzufügen, die die GAE-Konfiguration enthält und für den statischen Anwendungsfall, den ich habe, sehr einfach wäre

Nachdem Sie diesen Code gedrückt haben, wird der GitHub Actions-Build ausgelöst, der eine Bereitstellung für Ihre GAE-Anwendung vornimmt und Ihre Dienste live gehen! Jeder nachfolgende Push auf GitHub löst automatisch einen neuen GitHub Actions-Build aus und aktualisiert automatisch die Anwendung auf GAE

Jetzt haben Sie die grundlegende CICD-Pipeline für Ihre statische Website fertig! Sie können hier aufhören oder weiterlesen, wie Sie mit Reliza Hub Genehmigungs- und Deployment-Sichtbarkeitsfunktionen hinzufügen können

 BONUS: Hinzufügen von Genehmigungen und Sichtbarkeit mit Reliza Hub

Angenommen, wir möchten nicht, dass jeder neue Build automatisch in Produktion geht. Stattdessen möchten wir, dass sie zuerst an einem Ort außerhalb der Produktion bereitgestellt werden, und wenn sie uns dann gefallen, müssen Sie oder Ihr Genehmiger (z. B. Ihr Marketingmanager) auf eine Schaltfläche klicken und zur Produktion fördern  Hier ist, wie dies mit Reliza Hub zusätzlich zu der Konfiguration, die ich bisher beschrieben habe, erreicht werden kann   1 âÃÂà Streaming-Release-Metadaten an Reliza Hub Navigieren Sie zunächst zu httpsapp.relizahub.com, authentifizieren Sie sich bei GitHub und erstellen Sie Ihre Organisation, in meinem Fall werde ich verwenden * à ¢ à ¢ à ¡ ¢ Evie Landing Tutorial ¢ ¦ ª * als Organisationsname. Klicken Sie auf das Menüelement **VCS** und dann auf das Plus-Kreis-Symbol, um ein VCS-Repository hinzuzufügen  Fügen Sie Ihren GitHub-Repository-URI in die Eingabe ein und Reliza Hub analysiert ihn automatisch  Klicken **Senden Sie und dies wird Ihr Repository erstellen. Gehen Sie zum Menü Projekte und klicken Sie auf das Plus-Kreis-Symbol, um ein Projekt zu erstellen. Geben Sie Ihren Projektnamen ein (ich werde * Evie Landing Set Versionsschema für Einzelkomponente (Major) âÃÂà verwenden, da GAE seine eigene Versionierung verwendet, die aus einer Komponente âà besteht ÂÃÂ, die wir unverändert im Reliza Hub verwenden werden. Wählen Sie das VCS-Repository als dasjenige aus, das Sie gerade im vorherigen Schritt erstellt haben  Und klicken **Senden Dies erstellt ein neues Projekt. Klicken Sie dann auf diesen neu erstellten Projektnamen und klicken Sie auf das Schlosssymbol, um den Projekt-API-Schlüssel zu generieren  Wenn Sie sehen, dass die API-ID und der API-Schlüssel für Ihr Projekt generiert wurden, erstellen Sie zwei neue Geheimnisse in GitHub Actions – RELIZA_API_PROJECT_ID und RELIZA_API_PROJECT_KEY mit entsprechenden Werten  Jetzt ist es an der Zeit, unser gae_build.yml-Skript zu aktualisieren, um Build-Details an Reliza zu streamen und auch in den No-Promote-Modus zu wechseln. Dies bedeutet, dass bei jedem Git-Push ein Deployment auf GAE erstellt wird, aber Google den Datenverkehr erst einige manuelle Schritte später auf dieses neue Deployment umstellt  Das aktualisierte Skript enthält Berichte über die Verfolgung der Build-Zeit an Reliza Hub und enthält auch URIs für jede nicht geförderte Bereitstellung auf GAE. Die Beschreibung der verschiedenen Flags, die wir verwenden, finden Sie im GitHub-Repository von Reliza Go Client  Nachdem die Ausführung von GitHub-Aktionen bei Push abgeschlossen ist, können Sie dann zur Seite Ihres Releases in Reliza Hub navigieren und das folgende Bild sehen:  Beachten Sie, dass das Klicken auf die Der Link **Endpunkt testen** führt Sie zur tatsächlichen Bereitstellungsversion auf GAE, die diesem Quellcodeeintrag entspricht, aber noch nicht für die Bereitstellung von Datenverkehr heraufgestuft wurde  Sie können auch die Slack-Integration hinzufügen, indem Sie der Anleitung hier folgen, um Benachrichtigungen über jede neue Version auf Reliza Hub zu erhalten   2 âÃÂà Genehmigungen hinzufügen Gehen Sie zur Einstellungsseite von Reliza Hub und konfigurieren Sie unten Ihre Genehmigungsmatrix für die PRODUKTIONS-Umgebung. In meinem Fall benötige ich nur eine Genehmigung von MARKETING, damit eine Veröffentlichung in die Produktion befördert werden kann. Wie folgt:  Klicke auf **Matrix speichern**  Als nächstes installiere ich die Reliza GitHub App âÃÂà httpsgithub.com/apps/reliza-hub âÃÂàund folge dem Tutorial IâàIch habe schon früher geschrieben, um es für das Projekt zu registrieren  Schließlich gibt es noch einen neuen GitHub-Aktions-Workflow, der bei Genehmigungen von Reliza Hub ausgelöst wird – Sie können ihn hier sehen. Im Wesentlichen fragt dieser Workflow Reliza Hub nach der neuesten produktionsgenehmigten Version ab und fordert dann Google App Engine auf, den Datenverkehr auf diese Version umzustellen  Das einzige, was in diesem Skript konfiguriert werden muss, ist die RELIZA_PROJECT_ID-Umgebungsvariable âÃÂÃ, die auf die Projekt-UUID gesetzt werden muss, die auf der Projektseite in Reliza Hub abgerufen wird:  Jetzt wird die neueste Projektversion mit einer Genehmigung von MARKETING automatisch auf der Seite von Google App Engine beworbenEinzelheiten dazu, wie Sie der Organisation Genehmiger hinzufügen können, finden Sie in meinem Tutorial-Video zu Genehmigungen3 âÃÂà Hinzufügen von Sichtbarkeit für das, was bereitgestellt wird, wennAbschließend möchten wir auf Reliza Hub sichtbar machen, welche Version tatsächlich bereitgestellt wird und wannUm dies zu tun, gehen Sie zuerst zu Instanzen in Reliza Hub und klicken Sie auf das Plus-Kreis-Symbol, um eine neue zu erstellen InstanzIch gebe dann den URI meiner Instanz ein und wähle als Umgebung PRODUCTION âÃÂÃÂ, da ich nur eine Produktionsumgebung auf dieser statischen Website habe.Klicken auf**Senden** erstellt meine neue InstanzAls nächstes wähle ich diese neu erstellte Instanz aus und klicke auf das Schlosssymbol, um ihren API-Schlüssel zu generierenWenn API-ID und API-Schlüssel generiert werden, erstellen Sie 2 neue Geheimnisse in GitHub-Aktionen – RELIZA_API_INSTANCE_ID und RELIZA_API_INSTANCE_KEY mit entsprechenden WertenDamit aktualisiere ich zuerst mein On-Approval-Bereitstellungsskript, um einen Abschnitt hinzuzufügen, um die Bereitstellung auf GAE zu prüfen, und streame es an Reliza Hub.Außerdem füge ich einen Cron-GitHub-Aktions-Workflow hinzu, um den Status meiner GAE-Anwendung zu überprüfen.Nachdem einer dieser Workflows ausgeführt wurde, erhalten wir den Bereitstellungs-Snapshot unserer GAE-Anwendung Reliza Hub sieht in unserer Instanz wie folgt aus:ZusammenfassungDas ist es, jetzt haben wir eine vollständige Push-Button-CI-CD-Pipeline mit GitHub-Aktionen, die auf GAE bereitgestellt werden, sowie Genehmigungen und Sichtbarkeit verwaltet von Reliza Hub.Wir können auch Slack-Benachrichtigungen und unseren Marketing-Manager veranlassen, Änderungen anzuzeigen und Schaltflächen zu drücken, um sie in die Produktion hochzustufen, ohne das technische Personal zu fragen.Wie cool ist das denn?
Wenn Sie mit mir sprechen und diesen oder einen anderen Workflow weiter besprechen möchten, buchen Sie ein unverbindliches 30-minütiges Reliza Hub-Demo-Gespräch mit mir ÃÂ und ich werde mein Bestes geben, um zu helfen.