Änderungen von GitHub mit Cloud Build automatisch in Cloud Run bereitstellen

1. Einführung

Übersicht

In diesem Codelab konfigurieren Sie Cloud Run so, dass neue Versionen Ihrer Anwendung jedes Mal automatisch erstellt und bereitgestellt werden, wenn Sie Änderungen am Quellcode per Push in ein GitHub-Repository übertragen.

Diese Demoanwendung speichert Nutzerdaten im Firestore, allerdings wird nur ein Teil der Daten ordnungsgemäß gespeichert. Sie konfigurieren kontinuierliche Bereitstellungen so, dass eine Fehlerkorrektur automatisch in einer neuen Version zur Verfügung gestellt wird, wenn Sie eine Fehlerkorrektur per Push in Ihr GitHub-Repository übertragen.

Aufgaben in diesem Lab

  • Express-Webanwendung mit dem Cloud Shell-Editor schreiben
  • GitHub-Konto für kontinuierliche Bereitstellungen mit Google Cloud verbinden
  • Anwendung automatisch in Cloud Run bereitstellen
  • Informationen zur Verwendung von HTMX und Tailwind CSS

2. Einrichtung und Anforderungen

Voraussetzungen

  • Sie haben ein GitHub-Konto und sind mit dem Erstellen und Übertragen von Code an Repositories vertraut.
  • Sie sind in der Cloud Console angemeldet.
  • Sie haben zuvor einen Cloud Run-Dienst bereitgestellt. Weitere Informationen finden Sie beispielsweise in der Kurzanleitung: Webdienst aus dem Quellcode bereitstellen.

Cloud Shell aktivieren

  1. Klicken Sie in der Cloud Console auf Cloud Shell aktivieren d1264ca30785e435.png.

cb81e7c8e34bc8d.png

Wenn Sie Cloud Shell zum ersten Mal starten, wird ein Zwischenbildschirm mit einer Beschreibung der Funktion angezeigt. Wenn ein Zwischenbildschirm angezeigt wird, klicken Sie auf Weiter.

d95252b003979716.png

Die Bereitstellung und Verbindung mit Cloud Shell dauert nur einen Moment.

7833d5e1c5d18f54.png

Diese virtuelle Maschine verfügt über alle erforderlichen Entwicklertools. Es bietet ein Basisverzeichnis mit 5 GB nichtflüchtigem Speicher und wird in Google Cloud ausgeführt. Dadurch werden die Netzwerkleistung und die Authentifizierung erheblich verbessert. Viele, wenn nicht sogar alle Arbeiten in diesem Codelab können mit einem Browser erledigt werden.

Sobald Sie mit Cloud Shell verbunden sind, sollten Sie sehen, dass Sie authentifiziert sind und das Projekt auf Ihre Projekt-ID eingestellt ist.

  1. Führen Sie in Cloud Shell den folgenden Befehl aus, um zu prüfen, ob Sie authentifiziert sind:
gcloud auth list

Befehlsausgabe

 Credentialed Accounts
ACTIVE  ACCOUNT
*       <my_account>@<my_domain.com>

To set the active account, run:
    $ gcloud config set account `ACCOUNT`
  1. Führen Sie in Cloud Shell den folgenden Befehl aus, um zu prüfen, ob der gcloud-Befehl Ihr Projekt kennt:
gcloud config list project

Befehlsausgabe

[core]
project = <PROJECT_ID>

Ist dies nicht der Fall, können Sie die Einstellung mit diesem Befehl vornehmen:

gcloud config set project <PROJECT_ID>

Befehlsausgabe

Updated property [core/project].

3. APIs aktivieren und Umgebungsvariablen festlegen

APIs aktivieren

Für dieses Codelab müssen die folgenden APIs verwendet werden. Sie können diese APIs aktivieren, indem Sie den folgenden Befehl ausführen:

gcloud services enable run.googleapis.com \
    cloudbuild.googleapis.com \
    firestore.googleapis.com \
    iamcredentials.googleapis.com

Umgebungsvariablen einrichten

Sie können Umgebungsvariablen festlegen, die in diesem Codelab verwendet werden.

REGION=<YOUR-REGION>
PROJECT_ID=<YOUR-PROJECT-ID>
PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')
SERVICE_ACCOUNT="firestore-accessor"
SERVICE_ACCOUNT_ADDRESS=$SERVICE_ACCOUNT@$PROJECT_ID.iam.gserviceaccount.com

4. Dienstkonto erstellen

Dieses Dienstkonto wird von Cloud Run zum Aufrufen der Vertex AI Gemini API verwendet. Dieses Dienstkonto hat außerdem Berechtigungen zum Lesen und Schreiben in Firestore sowie zum Lesen von Secrets aus Secret Manager.

Erstellen Sie zuerst das Dienstkonto, indem Sie den folgenden Befehl ausführen:

gcloud iam service-accounts create $SERVICE_ACCOUNT \
  --display-name="Cloud Run access to Firestore"

Gewähren Sie dem Dienstkonto jetzt Lese- und Schreibzugriff auf Firestore.

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member serviceAccount:$SERVICE_ACCOUNT_ADDRESS \
  --role=roles/datastore.user

5. Firebase-Projekt erstellen und konfigurieren

  1. Klicken Sie in der Firebase Console auf Projekt hinzufügen.
  2. <YOUR_PROJECT_ID> eingeben um Firebase einem vorhandenen Google Cloud-Projekt hinzuzufügen
  3. Lesen und akzeptieren Sie die Nutzungsbedingungen von Firebase, wenn Sie dazu aufgefordert werden.
  4. Klicken Sie auf Weiter.
  5. Klicken Sie auf Tarif bestätigen, um den Firebase-Tarif zu bestätigen.
  6. Die Aktivierung von Google Analytics für dieses Codelab ist optional.
  7. Klicken Sie auf Firebase hinzufügen.
  8. Wenn das Projekt erstellt wurde, klicken Sie auf Weiter.
  9. Klicken Sie im Menü Build auf Firestore-Datenbank.
  10. Klicken Sie auf Datenbank erstellen.
  11. Wählen Sie Ihre Region aus dem Drop-down-Menü Standort aus und klicken Sie auf Weiter.
  12. Verwenden Sie die Standardeinstellung Im Produktionsmodus starten und klicken Sie dann auf Erstellen.

6. Anwendung schreiben

Erstellen Sie zunächst ein Verzeichnis für den Quellcode und speichern Sie das Verzeichnis mit cd.

mkdir cloud-run-github-cd-demo && cd $_

Erstellen Sie dann eine package.json-Datei mit folgendem Inhalt:

{
  "name": "cloud-run-github-cd-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node app.js",
    "nodemon": "nodemon app.js",
    "tailwind-dev": "npx tailwindcss -i ./input.css -o ./public/output.css --watch",
    "tailwind": "npx tailwindcss -i ./input.css -o ./public/output.css",
    "dev": "npm run tailwind && npm run nodemon"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@google-cloud/firestore": "^7.3.1",
    "axios": "^1.6.7",
    "express": "^4.18.2",
    "htmx.org": "^1.9.10"
  },
  "devDependencies": {
    "nodemon": "^3.1.0",
    "tailwindcss": "^3.4.1"
  }
}

Erstellen Sie zuerst eine app.js-Quelldatei mit folgendem Inhalt. Diese Datei enthält den Einstiegspunkt für den Dienst und die Hauptlogik für die Anwendung.

const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
const path = require("path");
const { get } = require("axios");

const { Firestore } = require("@google-cloud/firestore");
const firestoreDb = new Firestore();

const fs = require("fs");
const util = require("util");
const { spinnerSvg } = require("./spinnerSvg.js");

const service = process.env.K_SERVICE;
const revision = process.env.K_REVISION;

app.use(express.static("public"));

app.get("/edit", async (req, res) => {
    res.send(`<form hx-post="/update" hx-target="this" hx-swap="outerHTML">
                <div>
  <p>
    <label>Name</label>    
    <input class="border-2" type="text" name="name" value="Cloud">
    </p><p>
    <label>Town</label>    
    <input class="border-2" type="text" name="town" value="Nibelheim">
    </p>
  </div>
  <div class="flex items-center mr-[10px] mt-[10px]">
  <button class="btn bg-blue-500 text-white px-4 py-2 rounded-lg text-center text-sm font-medium mr-[10px]">Submit</button>
  <button class="btn bg-gray-200 text-gray-800 px-4 py-2 rounded-lg text-center text-sm font-medium mr-[10px]" hx-get="cancel">Cancel</button>  
                ${spinnerSvg} 
                </div>
  </form>`);
});

app.post("/update", async function (req, res) {
    let name = req.body.name;
    let town = req.body.town;
    const doc = firestoreDb.doc(`demo/${name}`);

    //TODO: fix this bug
    await doc.set({
        name: name
        /* town: town */
    });

    res.send(`<div hx-target="this" hx-swap="outerHTML" hx-indicator="spinner">
                <p>
                <div><label>Name</label>: ${name}</div>
                </p><p>
                <div><label>Town</label>: ${town}</div>
                </p>
                <button
                    hx-get="/edit"
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium mt-[10px]"
                >
                    Click to update
                </button>               
            </div>`);
});

app.get("/cancel", (req, res) => {
    res.send(`<div hx-target="this" hx-swap="outerHTML">
                <p>
                <div><label>Name</label>: Cloud</div>
                </p><p>
                <div><label>Town</label>: Nibelheim</div>
                </p>
                <div>
                <button
                    hx-get="/edit"
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium mt-[10px]"
                >
                    Click to update
                </button>                
                </div>
            </div>`);
});

const port = parseInt(process.env.PORT) || 8080;
app.listen(port, async () => {
    console.log(`booth demo: listening on port ${port}`);

    //serviceMetadata = helper();
});

app.get("/helper", async (req, res) => {
    let region = "";
    let projectId = "";
    let div = "";

    try {
        // Fetch the token to make a GCF to GCF call
        const response1 = await get(
            "http://metadata.google.internal/computeMetadata/v1/project/project-id",
            {
                headers: {
                    "Metadata-Flavor": "Google"
                }
            }
        );

        // Fetch the token to make a GCF to GCF call
        const response2 = await get(
            "http://metadata.google.internal/computeMetadata/v1/instance/region",
            {
                headers: {
                    "Metadata-Flavor": "Google"
                }
            }
        );

        projectId = response1.data;
        let regionFull = response2.data;
        const index = regionFull.lastIndexOf("/");
        region = regionFull.substring(index + 1);

        div = `
        <div>
        This created the revision <code>${revision}</code> of the 
        Cloud Run service <code>${service}</code> in <code>${region}</code>
        for project <code>${projectId}</code>.
        </div>`;
    } catch (ex) {
        // running locally
        div = `<div> This is running locally.</div>`;
    }

    res.send(div);
});

Datei mit dem Namen „spinnerSvg.js“ erstellen

module.exports.spinnerSvg = `<svg id="spinner" alt="Loading..."
                    class="htmx-indicator animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                >
                    <circle
                        class="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        stroke-width="4"
                    ></circle>
                    <path
                        class="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                    ></path>
                </svg>`;

input.css-Datei für tailwindCSS erstellen

@tailwind base;
@tailwind components;
@tailwind utilities;

Und erstellen Sie die Datei tailwind.config.js für tailwindCSS.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./**/*.{html,js}"],
    theme: {
        extend: {}
    },
    plugins: []
};

Erstellen Sie eine .gitignore-Datei.

node_modules/

npm-debug.log
coverage/

package-lock.json

.DS_Store

Erstellen Sie jetzt ein neues public-Verzeichnis.

mkdir public
cd public

Erstellen Sie in diesem öffentlichen Verzeichnis die Datei index.html für das Front-End, die htmx verwendet.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <script
            src="https://unpkg.com/htmx.org@1.9.10"
            integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
            crossorigin="anonymous"
        ></script>

        <link href="./output.css" rel="stylesheet" />
        <title>Demo 1</title>
    </head>
    <body
        class="font-sans bg-body-image bg-cover bg-center leading-relaxed"
    >
        <div class="container max-w-[700px] mt-[50px] ml-auto mr-auto">
            <div class="hero flex items-center">                    
                <div class="message text-base text-center mb-[24px]">
                    <h1 class="text-2xl font-bold mb-[10px]">
                        It's running!
                    </h1>
                    <div class="congrats text-base font-normal">
                        Congratulations, you successfully deployed your
                        service to Cloud Run. 
                    </div>
                </div>
            </div>

            <div class="details mb-[20px]">
                <p>
                    <div hx-trigger="load" hx-get="/helper" hx-swap="innerHTML" hx-target="this">Hello</div>                   
                </p>
            </div>

            <p
                class="callout text-sm text-blue-700 font-bold pt-4 pr-6 pb-4 pl-10 leading-tight"
            >
                You can deploy any container to Cloud Run that listens for
                HTTP requests on the port defined by the
                <code>PORT</code> environment variable. Cloud Run will
                scale automatically based on requests and you never have to
                worry about infrastructure.
            </p>

            <h1 class="text-2xl font-bold mt-[40px] mb-[20px]">
                Persistent Storage Example using Firestore
            </h1>
            <div hx-target="this" hx-swap="outerHTML">
                <p>
                <div><label>Name</label>: Cloud</div>
                </p><p>
                <div><label>Town</label>: Nibelheim</div>
                </p>
                <div>
                <button
                    hx-get="/edit"
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-sm font-medium mt-[10px]"
                >
                    Click to update
                </button>                
                </div>
            </div>

            <h1 class="text-2xl font-bold mt-[40px] mb-[20px]">
                What's next
            </h1>
            <p class="next text-base mt-4 mb-[20px]">
                You can build this demo yourself!
            </p>
            <p class="cta">
                <button
                    class="bg-blue-500 text-white px-4 py-2 rounded-lg text-center text-sm font-medium"
                >
                    VIEW CODELAB
                </button>
            </p> 
        </div>
   </body>
</html>

7. Anwendung lokal ausführen

In diesem Abschnitt führen Sie die Anwendung lokal aus, um zu prüfen, ob ein Fehler vorliegt, wenn der Nutzer versucht, Daten zu speichern.

Zuerst müssen Sie die Rolle „Datenspeichernutzer“ für den Zugriff auf Firestore haben (wenn Sie Ihre Identität zur Authentifizierung verwenden, z.B. wenn Sie in Cloud Shell ausführen) oder Sie können die Identität des zuvor erstellten Nutzerkontos übernehmen.

ADC bei lokaler Ausführung verwenden

Wenn die Ausführung in Cloud Shell erfolgt, ist bereits eine virtuelle Maschine der Google Compute Engine vorhanden. Ihre Anmeldedaten, die dieser virtuellen Maschine zugeordnet sind (wie beim Ausführen von gcloud auth list gezeigt), werden automatisch von Standardanmeldedaten für Anwendungen (Application Default Credentials, ADC) verwendet, sodass Sie den Befehl gcloud auth application-default login nicht verwenden müssen. Für Ihre Identität ist jedoch weiterhin die Rolle „Datenspeichernutzer“ erforderlich. Sie können direkt zum Abschnitt Anwendung lokal ausführen springen.

Wenn Sie die Anwendung jedoch auf Ihrem lokalen Terminal ausführen (d.h. nicht in Cloud Shell), müssen Sie die Standardanmeldedaten für Anwendungen zur Authentifizierung bei Google APIs verwenden. Sie können sich entweder 1) mit Ihren Anmeldedaten anmelden (sofern Sie die Rolle „Datenspeichernutzer“ haben) oder 2) sich als das Dienstkonto anmelden, das in diesem Codelab verwendet wird.

Option 1) Anmeldedaten für ADC verwenden

Wenn Sie Ihre Anmeldedaten verwenden möchten, können Sie zuerst gcloud auth list ausführen, um zu prüfen, wie Sie in gcloud authentifiziert sind. Als Nächstes müssen Sie Ihrer Identität möglicherweise die Rolle „Vertex AI User“ gewähren. Wenn Ihre Identität die Rolle „Inhaber“ hat, haben Sie diese Nutzerrolle bereits. Falls nicht, können Sie diesen Befehl ausführen, um die Vertex AI-Nutzerrolle und die Datastore-Nutzerrolle zu gewähren.

USER=<YOUR_PRINCIPAL_EMAIL>

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member user:$USER \
  --role=roles/datastore.user

Führen Sie dann den folgenden Befehl aus:

gcloud auth application-default login

Option 2) Identität eines Dienstkontos für ADC übernehmen

Wenn Sie das in diesem Codelab erstellte Dienstkonto verwenden möchten, muss Ihr Nutzerkonto die Rolle Ersteller von Dienstkonto-Tokens haben. Um diese Rolle zu erhalten, führen Sie den folgenden Befehl aus:

gcloud projects add-iam-policy-binding $PROJECT_ID \
  --member user:$USER \
  --role=roles/iam.serviceAccountTokenCreator

Führen Sie als Nächstes den folgenden Befehl aus, um ADC mit dem Dienstkonto zu verwenden.

gcloud auth application-default login --impersonate-service-account=$SERVICE_ACCOUNT_ADDRESS

Anwendung lokal ausführen

Prüfen Sie als Nächstes, ob Sie sich im Stammverzeichnis cloud-run-github-cd-demo für Ihr Codelab befinden.

cd .. && pwd

Jetzt installieren Sie Abhängigkeiten.

npm install

Schließlich können Sie die Anwendung starten, indem Sie das folgende Skript ausführen. Das Skript generiert außerdem die Datei „output.css“ aus tailwindCSS.

npm run dev

Öffnen Sie nun in Ihrem Webbrowser http://localhost:8080. In Cloud Shell können Sie die Website öffnen, indem Sie auf die Schaltfläche „Webvorschau“ klicken und „Vorschauport 8080“ auswählen.

Webvorschau – Vorschau auf Port 8080

Geben Sie Text in die Eingabefelder für Name und Ort ein und klicken Sie auf „Speichern“. Aktualisieren Sie dann die Seite. Wie Sie sehen, ist das Feld für den Ort nicht erhalten geblieben. Diesen Fehler beheben Sie im nachfolgenden Abschnitt.

Lokale Ausführung der Express-App beenden (z. B. Strg^c unter MacOS)

8. GitHub-Repository erstellen

Erstellen Sie in Ihrem lokalen Verzeichnis ein neues Repository mit „main“ als Standardzweignamen.

git init
git branch -M main

Führen Sie ein Commit der aktuellen Codebasis durch, die den Fehler enthält. Sie beheben den Fehler, nachdem die kontinuierliche Bereitstellung konfiguriert wurde.

git add .
git commit -m "first commit for express application"

Rufen Sie GitHub auf und erstellen Sie ein leeres Repository, das entweder privat oder öffentlich ist. In diesem Codelab wird empfohlen, dem Repository den Namen cloud-run-auto-deploy-codelab zu geben. Um ein leeres Repository zu erstellen, lassen Sie alle Standardeinstellungen deaktiviert oder auf „Keine“ setzen, damit bei der Erstellung standardmäßig keine Inhalte im Repository enthalten sind, z. B.

GitHub-Standardeinstellungen

Wenn Sie diesen Schritt richtig ausgeführt haben, sehen Sie die folgende Anleitung auf der leeren Repository-Seite:

Anleitung zum leeren GitHub-Repository

Folgen Sie der Anleitung unter Vorhandenes Repository von der Befehlszeile per Push übertragen, indem Sie die folgenden Befehle ausführen:

Fügen Sie zuerst das Remote-Repository hinzu, indem Sie den Befehl

git remote add origin <YOUR-REPO-URL-PER-GITHUB-INSTRUCTIONS>

und den Hauptzweig in das Upstream-Repository übertragen.

git push -u origin main

9. Kontinuierliche Bereitstellung einrichten

Da Sie nun Code in GitHub haben, können Sie die kontinuierliche Bereitstellung einrichten. Rufen Sie die Cloud Console für Cloud Run auf.

  • Klicken Sie auf „Dienst erstellen“.
  • Klicken Sie auf Continuously deploy from a Repository (Kontinuierlich aus einem Repository bereitstellen).
  • Klicken Sie auf CLOUD Build einrichten.
  • Unter Quell-Repository
    • GitHub als Repository-Anbieter auswählen
    • Klicken Sie auf Verbundene Repositories verwalten, um den Cloud Build-Zugriff auf das Repository zu konfigurieren
    • Wählen Sie Ihr Repository aus und klicken Sie auf Weiter.
  • Unter Build-Konfiguration
    • Zweig beibehalten: ^main$
    • Wählen Sie als Build-Typ Go, Node.js, Python, Java, .NET Core, Ruby oder PHP über die Buildpacks von Google Cloud aus.
  • Belassen Sie das Build-Kontextverzeichnis auf /.
  • Klicken Sie auf Speichern.
  • Unter Authentifizierung
    • Klicken Sie auf Nicht authentifizierte Aufrufe zulassen.
  • Unter „Container“, „Volumes“, „Netzwerk“, „Sicherheit“
    • Wählen Sie auf dem Tab „Sicherheit“ das Dienstkonto aus, das Sie in einem vorherigen Schritt erstellt haben, z.B. Cloud Run access to Firestore
  • Klicke auf ERSTELLEN.

Dadurch wird der Cloud Run-Dienst mit dem Fehler bereitgestellt, den Sie im nächsten Abschnitt beheben.

10. Fehler beheben

Fehler im Code beheben

Klicken Sie im Cloud Shell-Editor auf die Datei app.js und dann zum Kommentar //TODO: fix this bug.

ändere die folgende Zeile von

 //TODO: fix this bug
    await doc.set({
        name: name
    });

zu

//fixed town bug
    await doc.set({
        name: name,
        town: town
    });

Prüfen Sie die Fehlerbehebung mit dem folgenden Befehl:

npm run start

und öffne deinen Webbrowser. Speichern Sie die Daten erneut für die Stadt und aktualisieren Sie die Seite. Sie werden feststellen, dass die neu eingegebenen Ortsdaten bei der Aktualisierung korrekt gespeichert wurden.

Nachdem Sie die Korrektur überprüft haben, können Sie sie bereitstellen. Führen Sie zuerst einen Commit der Korrektur durch.

git add .
git commit -m "fixed town bug"

und in das Upstream-Repository auf GitHub.

git push origin main

Cloud Build stellt Ihre Änderungen automatisch bereit. In der Cloud Console für Ihren Cloud Run-Dienst können Sie Bereitstellungsänderungen überwachen.

Fehlerbehebung in der Produktionsumgebung prüfen

Sobald die Cloud Console für Ihren Cloud Run-Dienst anzeigt, dass eine zweite Version jetzt 100% des Traffics verarbeitet, z.B. https://console.cloud.google.com/run/detail/<IHRE_REGION>/<IHRE_DIENSTNAME>/revisions können Sie die URL des Cloud Run-Dienstes in Ihrem Browser öffnen und prüfen, ob die neu eingegebenen Stadtdaten nach dem Aktualisieren der Seite vorhanden sind.

11. Glückwunsch!

Herzlichen Glückwunsch zum Abschluss des Codelabs!

Weitere Informationen finden Sie in der Dokumentation zu Cloud Run und zur kontinuierlichen Bereitstellung aus Git.

Behandelte Themen

  • Express-Webanwendung mit dem Cloud Shell-Editor schreiben
  • GitHub-Konto für kontinuierliche Bereitstellungen mit Google Cloud verbinden
  • Anwendung automatisch in Cloud Run bereitstellen
  • Informationen zur Verwendung von HTMX und TailwindCSS

12. Bereinigen

Um versehentliche Gebühren zu vermeiden, z. B. wenn die Cloud Run-Dienste versehentlich häufiger aufgerufen werden als Ihre monatliche Zuweisung von Cloud Run-Aufrufen in der kostenlosen Stufe, können Sie entweder Cloud Run oder das in Schritt 2 erstellte Projekt löschen.

Wenn Sie den Cloud Run-Dienst löschen möchten, rufen Sie die Cloud Run-Cloud Console unter https://console.cloud.google.com/run auf und löschen Sie den Cloud Run-Dienst, den Sie in diesem Codelab erstellt haben, z.B. Löschen Sie den Dienst cloud-run-auto-deploy-codelab.

Wenn Sie das gesamte Projekt löschen möchten, rufen Sie https://console.cloud.google.com/cloud-resource-manager auf, wählen Sie das in Schritt 2 erstellte Projekt aus und klicken Sie auf „Löschen“. Wenn Sie das Projekt löschen, müssen Sie die Projekte in Ihrem Cloud SDK ändern. Sie können die Liste aller verfügbaren Projekte mit dem Befehl gcloud projects list aufrufen.