Prüfpunkte
Create a Cloud Source Repository
/ 30
Launch the site at TCP port 8080
/ 30
Configure the cloud build and initiate it
/ 40
Hugo-Website mit Cloud Build‑ und Firebase-Pipeline bereitstellen
GSP747
Übersicht
In diesem Lab erstellen Sie eine Pipeline zum Bereitstellen von Websites basierend auf Hugo, einem statischen Website-Builder. Sie speichern den Inhalt der Website in Cloud Source Repositories und stellen die Website mit Firebase bereit. Anschließend erstellen Sie mit Cloud Build eine Pipeline, um neue Inhalte, die mit einem Commit an das Repository übergeben werden, automatisch bereitzustellen.
Lernziele
Themen in diesem Lab:
- Übersicht über statische Websites
- Website mit Hugo einrichten
- Inhalt der Website in Cloud Source Repositories speichern
- Website mit Firebase bereitstellen
- Mit Cloud Build eine Build-Pipeline erstellen, um die Bereitstellung zu automatisieren
Vorbereitung
Die vorliegende Anleitung sollte für das Lab ausreichen. Hilfreich ist außerdem praktische Erfahrung mit den Diensten, die dabei zum Einsatz kommen. Diese Labs könnten auch noch interessant sein:
- Cloud Source Repositories: Qwik Start
- Serverlose Anwendung für das Erstellen von PDF-Dateien in Cloud Run entwickeln
- Firebase Web
Vorteile statischer Websites
Statische Website-Builder wie Hugo sind sehr beliebt, weil sie die Möglichkeit bieten, Websites ohne Webserver zu erstellen. Bei einer statischen Webplattform müssen keine Server-Betriebssysteme oder Software gewartet werden. Sie müssen sich jedoch Gedanken über verschiedene operative Gesichtspunkte machen. Vielleicht möchten Sie Versionen Ihrer Beiträge verwalten, die Website in einem Content Delivery Network (CDN) hosten und ein SSL-Zertifikat bereitstellen.
Dafür können Sie eine CI/CD-Pipeline (Continuous Integration / Continuous Deployment) in Google Cloud nutzen. Mit einer solchen Bereitstellungspipeline können Entwickler dank des automatisierten Bereitstellungsprozesses schneller Neuerungen einführen. In diesem Lab lernen Sie, wie Sie eine Pipeline erstellen, die diese Automatisierung demonstriert.
Einrichtung und Anforderungen
Vor dem Klick auf „Start Lab“ (Lab starten)
Lesen Sie diese Anleitung. Labs sind zeitlich begrenzt und können nicht pausiert werden. Der Timer beginnt zu laufen, wenn Sie auf Lab starten klicken, und zeigt Ihnen, wie lange die Ressourcen für das Lab verfügbar sind.
In diesem praxisorientierten Lab können Sie die Lab-Aktivitäten in einer echten Cloud-Umgebung selbst durchführen – nicht in einer Simulations- oder Demo-Umgebung. Dazu erhalten Sie neue, temporäre Anmeldedaten, mit denen Sie für die Dauer des Labs auf Google Cloud zugreifen können.
Für dieses Lab benötigen Sie Folgendes:
- Einen Standardbrowser (empfohlen wird Chrome)
- Zeit für die Durchführung des Labs – denken Sie daran, dass Sie ein begonnenes Lab nicht unterbrechen können.
Lab starten und bei der Google Cloud Console anmelden
-
Klicken Sie auf Lab starten. Wenn Sie für das Lab bezahlen müssen, wird ein Pop-up-Fenster geöffnet, in dem Sie Ihre Zahlungsmethode auswählen können. Auf der linken Seite befindet sich der Bereich Details zum Lab mit diesen Informationen:
- Schaltfläche Google Cloud Console öffnen
- Restzeit
- Temporäre Anmeldedaten für das Lab
- Ggf. weitere Informationen für dieses Lab
-
Klicken Sie auf Google Cloud Console öffnen (oder klicken Sie mit der rechten Maustaste und wählen Sie Link in Inkognitofenster öffnen aus, wenn Sie Chrome verwenden).
Im Lab werden Ressourcen aktiviert. Anschließend wird ein weiterer Tab mit der Seite Anmelden geöffnet.
Tipp: Ordnen Sie die Tabs nebeneinander in separaten Fenstern an.
Hinweis: Wird das Dialogfeld Konto auswählen angezeigt, klicken Sie auf Anderes Konto verwenden. -
Kopieren Sie bei Bedarf den folgenden Nutzernamen und fügen Sie ihn in das Dialogfeld Anmelden ein.
{{{user_0.username | "Username"}}} Sie finden den Nutzernamen auch im Bereich Details zum Lab.
-
Klicken Sie auf Weiter.
-
Kopieren Sie das folgende Passwort und fügen Sie es in das Dialogfeld Willkommen ein.
{{{user_0.password | "Password"}}} Sie finden das Passwort auch im Bereich Details zum Lab.
-
Klicken Sie auf Weiter.
Wichtig: Sie müssen die für das Lab bereitgestellten Anmeldedaten verwenden. Nutzen Sie nicht die Anmeldedaten Ihres Google Cloud-Kontos. Hinweis: Wenn Sie Ihr eigenes Google Cloud-Konto für dieses Lab nutzen, können zusätzliche Kosten anfallen. -
Klicken Sie sich durch die nachfolgenden Seiten:
- Akzeptieren Sie die Nutzungsbedingungen.
- Fügen Sie keine Wiederherstellungsoptionen oder Zwei-Faktor-Authentifizierung hinzu (da dies nur ein temporäres Konto ist).
- Melden Sie sich nicht für kostenlose Testversionen an.
Nach wenigen Augenblicken wird die Google Cloud Console in diesem Tab geöffnet.
Prozessübersicht
Dieses Diagramm zeigt, was Sie erstellen werden:
Das Ziel ist, Code mit einem Commit übergeben zu können und ihn die Pipeline auslösen zu lassen, wodurch die Website bereitgestellt wird. Dazu führen Sie zwei Aufgaben aus. Zuerst erstellen Sie die Website lokal und stellen sie manuell in Firebase bereit, damit Sie den gesamten Prozess kennenlernen. Danach automatisieren Sie den Prozess, indem Sie mit Cloud Build eine Pipeline erstellen.
Aufgabe 1: Manuelle Bereitstellung
Erstellen Sie die Website zuerst manuell auf einer Linux-Instanz, um den gesamten Prozess kennenzulernen. Außerdem nutzen Sie die Linux-Instanz, um einige einmalige Aufgaben zu erledigen, die nötig sind, um Firebase zu starten.
Verbindung zur Linux-Instanz herstellen
- Klicken Sie im Navigationsmenü auf Compute Engine > VM-Instanzen. Sie sehen eine Instanz, die bereits für Sie erstellt wurde.
- Am Ende der Zeile sollten Ihnen eine externe IP-Adresse und eine SSH-Schaltfläche angezeigt werden (siehe Abbildung). Falls diese beiden Elemente von einem Informationsbereich verdeckt sind, schließen Sie ihn, um die gesamte Zeile sehen zu können.
- Notieren Sie sich die externe IP-Adresse. Sie wird später noch benötigt.
- Klicken Sie auf SSH. Ein Fenster mit einer Shell-Eingabeaufforderung wird angezeigt.
Hugo lokal installieren
Installieren Sie Hugo lokal in der Linux-Instanz, damit Sie die Website lokal testen können, bevor Sie sie mit Firebase bereitstellen. Das vorhandene Shell-Script macht diesen Schritt einfacher.
- Sehen Sie sich in der Linux-Instanz-Shell die Datei installhugo.sh an.
Unten sehen Sie den Inhalt ebenfalls:
Ausgabe:
-
Achten Sie auf den Befehl
wget
zum Herunterladen von Hugo und den Befehltar
zum Entpacken des Hugo-Archivs. Im Verlauf des Labs werden Sie ähnliche Befehle sehen, wenn Sie die Pipeline erstellen. -
Führen Sie die folgenden Befehle aus, um das Script auszuführen und Hugo zu installieren:
Ihnen wird eine Meldung mit der Information angezeigt, dass Hugo im Verzeichnis /tmp
installiert wurde (siehe unten). Jetzt können Sie die Infrastruktur für die Website aufbauen.
Repository und grundlegende Website erstellen
Jetzt erstellen Sie ein Cloud Source Repository für die Website und klonen dieses dann auf der Linux-Instanz. Beim Klonen eines Repositorys wird eine Spiegelung davon in der Shell erstellt. So können Sie die Website in der Shell implementieren und Änderungen später mit einem Commit an das Dateisystem übergeben. Im Verlauf des Labs richten Sie eine Pipeline ein, die auf diese Commits an das Repository reagiert.
- Installieren Sie Git auf der Linux-VM.
Geben Sie die folgenden Befehle in die Linux-Instanz-Shell ein:
Beantworten Sie alle Prompts mit yes
.
- Erstellen Sie ein Code-Repository und klonen Sie es. Geben Sie die folgenden Befehle in die Linux-Instanz-Shell ein:
Das Erstellen und Klonen des Repositorys wird Ihnen bestätigt (siehe Abbildung unten). Die zwei Warnmeldungen zu den Kosten für das Repository und der Tatsache, dass dieses leer ist, können Sie ignorieren.
Klicken Sie auf Fortschritt prüfen.
- Jetzt können Sie die Struktur der Website erstellen. Geben Sie die folgenden Befehle in die Linux-Shell ein.
Normalerweise wird durch den Befehl hugo
das Verzeichnis erstellt. Durch die Option --force
wird die Website im Repository-Verzeichnis erstellt, das bereits existiert. So können Sie die Git-bezogenen Informationen in dem Verzeichnis lassen, das Sie gerade geklont haben. Ihnen werden Meldungen angezeigt, dass die Website erstellt wurde (siehe Abbildung unten).
- Installieren Sie jetzt das Design Ananke als Layout für die Website. Geben Sie die folgenden Befehle in die Linux-Instanz-Shell ein:
Ihnen werden Meldungen angezeigt, dass das Design geklont wurde (siehe Abbildung unten).
- Entfernen Sie die Git-Dateien aus dem Designverzeichnis:
- Nachdem die Struktur der Website festgelegt ist, können Sie sich nun eine Vorschau ansehen. Führen Sie den folgenden Befehl aus, um die Website über TCP-Port 8080 zu starten:
Hugo erstellt die Website und stellt sie über TCP-Port 8080 bereit (siehe Abbildung unten). Der Server wird ausgeführt, bis Sie ihn durch Drücken von Strg + C beenden.
- Öffnen Sie einen Browsertab und rufen Sie die externe IP-Adresse über Port 8080 auf. Verwenden Sie die folgende URL und ersetzen Sie dabei
[EXTERNAL IP]
durch die externe IP-Adresse der Instanz:
Die Website sollte so aussehen.
Klicken Sie auf Fortschritt prüfen.
- Kehren Sie zur Linux-Shell zurück und drücken Sie Strg + C, um den Hugo-Server zu beenden.
Firebase zum Projekt hinzufügen
Nachdem Sie nun wissen, wie die Website aussieht, können Sie sie in Firebase bereitstellen. Aktivieren Sie dazu Firebase in Ihrem vorhandenen Projekt.
-
Öffnen Sie einen neuen Tab in dem Browser, in dem Sie auf die Google Cloud Console zugreifen, und öffnen Sie darin dann Firebase, um zur Firebase Console zu gelangen.
-
Klicken Sie auf Projekt hinzufügen.
Sie werden aufgefordert, einen Namen für das Projekt auszuwählen.
- Klicken Sie in das Namensfeld und wählen Sie Ihr bestehendes Google Cloud-Projekt aus, das mit „qwiklabs-gcp-…“ beginnt (siehe Abbildung unten):
- Setzen Sie ein Häkchen bei Ich akzeptiere die Nutzungsbedingungen von Firebase und Ich bestätige, dass ich Firebase ausschließlich für Zwecke im Zusammenhang mit meinem Unternehmen, Beruf, Handwerk oder für Handel nutzen werde. Klicken Sie auf Weiter.
- Sie werden möglicherweise aufgefordert, das Firebase-Preismodell zu bestätigen. Die Kosten für Firebase sind im Lab enthalten. Wenn Sie dazu aufgefordert werden, klicken Sie auf Tarif bestätigen.
- Sie werden aufgefordert, einige Kriterien für das Hinzufügen von Firebase zu einem Projekt zu bestätigen. Klicken Sie auf Weiter.
- Sie werden aufgefordert, die Verwendung von Google Analytics für dieses Firebase-Projekt zu bestätigen. Da es sich um eine Lab-Umgebung handelt, deaktivieren Sie Google Analytics und klicken Sie auf Firebase hinzufügen. Das Hinzufügen von Firebase zum Projekt dauert etwa eine Minute.
- Wenn Sie nach dem Hinzufügen von Firebase dazu aufgefordert werden, klicken Sie auf Weiter.
Website in Firebase bereitstellen
- Installieren Sie die Firebase CLI in der Linux-Instanz-Shell:
- Jetzt müssen Sie Firebase initialisieren. Geben Sie den folgenden Befehl in die Shell ein:
- Wählen Sie mithilfe der Pfeiltasten und der Leertaste Hosting: Dateien für Firebase Hosting konfigurieren und (optional) GitHub Actions für Bereitstellungen einrichten aus und drücken Sie die Eingabetaste. Wählen Sie Vorhandenes Projekt verwenden aus, wenn Sie nach einer Projektoption gefragt werden. Wählen Sie dann mithilfe der Pfeiltasten, der Leertaste und der Eingabetaste die Projekt-ID aus, die auf der Seite mit der Anleitung zum Lab angegeben ist. Wählen Sie für das öffentliche Verzeichnis den Standardwert öffentlich aus. Wählen Sie für das Konfigurieren als Single-Page-Anwendung den Standardwert N aus. Wählen Sie für das Einrichten automatischer Erstellungen und Bereitstellungen mit GitHub N aus.
Wenn Sie gefragt werden, ob vorhandene Dateien überschrieben werden sollen, wählen Sie „J“ aus.
- Jetzt können Sie die Anwendung bereitstellen. Geben Sie die folgenden Befehle in die Linux-Instanz-Shell ein, um die Website mit Hugo neu zu erstellen und mit Firebase bereitzustellen:
- Nachdem die Anwendung bereitgestellt wurde, erhalten Sie eine Hosting-URL. Klicken Sie darauf. Sie sehen, dass dieselbe Website über das Firebase-CDN (Content Delivery Network) bereitgestellt wird. Falls Ihnen eine allgemeine Begrüßung angezeigt wird, warten Sie ein paar Minuten, bis das CDN initialisiert wurde, und aktualisieren Sie dann das Browserfenster. Speichern Sie die Hosting-URL für die spätere Verwendung.
Jetzt haben Sie alles lokal bereitgestellt. Als Nächstes automatisieren Sie den gesamten Prozess mit Cloud Build.
Aufgabe 2: Bereitstellung automatisieren
Ersten Commit ausführen
Ziel der Pipeline ist es, damit Builds auslösen zu können, wenn Änderungen am Repository vorgenommen werden. Sie beginnen mit einem ersten Commit an das Repository, um zu prüfen, ob Sie in Zukunft Änderungen ausführen können.
- Konfigurieren Sie die globalen Parameter der Git-Befehle, indem Sie die folgenden Befehle in die Linux-Shell eingeben. Achten Sie auf die Anführungszeichen:
- Geben Sie die folgenden Befehle in die Linux-Shell ein, um eine
.gitignore
-Datei zu erstellen und bestimmte Verzeichnisse aus dem Repository auszuschließen:
- Geben Sie die folgenden Befehle ein, um den ersten Commit an das Repository auszuführen:
Sie haben jetzt die grundlegende Version der Website mit einem Commit an Google Cloud übergeben (hochgeladen).
Build konfigurieren
Cloud Build verwendet eine Datei namens cloudbuild.yaml im Stammverzeichnis des Repositorys, um den Build auszuführen. Die Datei hat das YAML-Format. Da die Abstände und Einzüge hier sehr wichtig sind, wurden sie Ihnen bereits in der Linux-Instanz zur Verfügung gestellt.
- Geben Sie den folgenden Befehl in die Linux-Shell ein. Achten Sie auf den Punkt (".") am Ende des
cp
-Befehls:
- Führen Sie den folgenden Befehl aus, um zu sehen, wie die Datei
cloudbuild.yaml
aussieht. Einige Zeilen wurden aufgrund der Länge umgebrochen.
Ausgabe:
- Hier noch einige Informationen zur Datei
cloudbuild.yaml
:
- Die Datei enthält drei benannte Schritte, die jeweils von einem Container-Image ausgeführt werden. In den ersten beiden Schritten kommt ein von Google unterstützter Builder zum Einsatz, um mit
wget
die Hugo‑ und Firebase-Tools herunterzuladen. Diese Schritte werden parallel ausgeführt. Der wget-Builder ist schneller als die manuelle Installation vonwget
. - Im dritten Schritt wird ein Ubuntu-Standardcontainer verwendet, um Hugo und Firebase zu installieren. Anschließend wird die Website erstellt und bereitgestellt. Da Hugo und Firebase für jede Bereitstellung neu installiert werden, können Sie die Hugo-Version nach Wunsch ändern und gleichzeitig die aktuelle Version von Firebase verwenden.
- Die Befehle
tar
undwget
sind praktisch identisch mit denen, die im Scriptinstallhugo.sh
zum Einsatz kamen. - Die Datei enthält außerdem eine benutzerdefinierte Ersatzvariable (_HUGO_VERSION) und eine von Google bereitgestellte Ersatzvariable (PROJECT_ID), damit die Vorlage in verschiedenen Umgebungen verwendet werden kann.
- Die Hugo‑ und Firebase-Binärprogramme werden in einem temporären Verzeichnis erstellt und installiert, damit sie nicht aus Versehen auf der Website selbst bereitgestellt werden.
Cloud Build-Trigger erstellen
Erstellen Sie nun einen Trigger, der auf Commits an den Master-Zweig des Repositorys reagiert.
- Geben Sie den folgenden Befehl in die Befehlszeile ein:
- Die Konfiguration des Triggers beinhaltet diese Details:
Feld | Wert |
---|---|
Name | commit-to-master-branch |
Beschreibung | Push to master |
Ereignis | Push zu Zweig |
Repository | my_hugo_site |
Zweig (Regex) | ^master$ (achten Sie darauf, dass bei „Regex invertieren“ kein Häkchen gesetzt ist) |
Build-Konfiguration | Cloud Build-Konfigurationsdatei (YAML oder JSON) |
Speicherort der Cloud Build-Konfigurationsdatei | /cloudbuild.yaml |
Cloud Build-Dienstkonto
Das Cloud Build-Dienstkonto muss berechtigt sein, Firebase zum Bereitstellen der Website zu verwenden.
Cloud Build | Rolle | Beschreibung |
---|---|---|
[PROJECT_NUMBER@cloudbuild.gserviceaccount.com | roles/firebasehosting.admin | Vollständiger Lese‑/Schreibzugriff auf Hosting-Ressourcen |
Pipeline testen
Nachdem Sie die Pipeline erstellt haben, können Sie nun eine Änderung vornehmen und sie mit einem Commit an die Website übergeben, um zu sehen, ob sie weitergegeben wird.
- Geben Sie den folgenden Befehl in die Linux-Shell ein, um zum Repository-Verzeichnis zu wechseln:
- Bearbeiten Sie die Datei config.toml und ändern Sie den Titel:
- Geben Sie die folgenden Befehle in die Linux-Shell ein, um die Änderungen mit einem Commit an das Repository zu übergeben und die Cloud Build-Pipeline auszulösen:
- Prüfen Sie im Build-Verlauf den Status des Builds:
- Prüfen Sie die Build-Logs für den aktuellen Build:
- Rufen Sie die URL aus dem Build ab:
- Rufen Sie die Hosting-URL auf, um sich das Ergebnis anzusehen. Sie finden den Domainnamen auch in der Firebase Console im entsprechenden Projekt.
Klicken Sie auf Fortschritt prüfen.
Das wars! Sie haben das Lab erfolgreich abgeschlossen.
Sie haben gelernt, wie Cloud Build eine Pipeline orchestrieren kann, um Hugo-Websites schnell in Firebase bereitzustellen, das ein CDN und SSL-Zertifikat bietet. Mit Cloud Build können Sie diesen Vorgang an Ihre Anforderungen anpassen. Dank der raschen Bereitstellung können Sie Neuerungen schnell einführen und Websiteversionen einfach testen. Weitere Informationen finden Sie in der Cloud Build‑ und Firebase-Dokumentation.
Google Cloud-Schulungen und -Zertifizierungen
In unseren Schulungen erfahren Sie alles zum optimalen Einsatz unserer Google Cloud-Technologien und können sich entsprechend zertifizieren lassen. Unsere Kurse vermitteln technische Fähigkeiten und Best Practices, damit Sie möglichst schnell mit Google Cloud loslegen und Ihr Wissen fortlaufend erweitern können. Wir bieten On-Demand-, Präsenz- und virtuelle Schulungen für Anfänger wie Fortgeschrittene an, die Sie individuell in Ihrem eigenen Zeitplan absolvieren können. Mit unseren Zertifizierungen weisen Sie nach, dass Sie Experte im Bereich Google Cloud-Technologien sind.
Anleitung zuletzt am 30. Januar 2024 aktualisiert
Lab zuletzt am 11. Dezember 2023 getestet
© 2024 Google LLC. Alle Rechte vorbehalten. Google und das Google-Logo sind Marken von Google LLC. Alle anderen Unternehmens- und Produktnamen können Marken der jeweils mit ihnen verbundenen Unternehmen sein.