Ä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 automatisch erstellt und bereitgestellt werden, wenn Sie Änderungen an Ihrem Quellcode in ein GitHub-Repository übertragen.

In dieser Demoanwendung werden Nutzerdaten in Firestore gespeichert. Allerdings wird nur ein Teil der Daten richtig gespeichert. Sie konfigurieren Continuous Deployments so, dass eine Fehlerkorrektur, die Sie in Ihr GitHub-Repository übertragen, automatisch in einer neuen Revision verfügbar ist.

Lerninhalte

  • 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

2. Einrichtung und Anforderungen

Voraussetzungen

Cloud Shell aktivieren

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

cb81e7c8e34bc8d.png

Wenn Sie die Cloud Shell zum ersten Mal starten, wird ein Fenster mit einer Beschreibung eingeblendet. Klicken Sie in diesem Fall auf Weiter.

d95252b003979716.png

Das Herstellen der Verbindung mit der Cloud Shell sollte nur wenige Augenblicke dauern.

7833d5e1c5d18f54.png

Auf dieser virtuellen Maschine sind alle erforderlichen Entwicklungstools installiert. Sie bietet ein Basisverzeichnis mit 5 GB nichtflüchtigem Speicher und wird in Google Cloud ausgeführt, was die Netzwerkleistung und Authentifizierung erheblich verbessert. Die meisten, wenn nicht sogar alle Aufgaben in diesem Codelab können mit einem Browser erledigt werden.

Sobald die Verbindung mit der Cloud Shell hergestellt ist, sehen Sie, dass Sie authentifiziert sind und für das Projekt Ihre Projekt-ID eingestellt ist.

  1. Führen Sie in der 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 den folgenden Befehl in Cloud Shell aus, um zu bestätigen, dass 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 Sie die folgenden APIs verwenden. Sie können diese APIs mit dem folgenden Befehl aktivieren:

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 auch die Berechtigung, in Firestore zu lesen und zu schreiben und Secrets aus Secret Manager zu lesen.

Erstellen Sie zuerst das Dienstkonto mit diesem Befehl:

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

Gewähren Sie dem Dienstkonto nun 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. Geben Sie <YOUR_PROJECT_ID> ein, um Firebase zu einem Ihrer vorhandenen Google Cloud-Projekte hinzuzufügen.
  3. Lesen und akzeptieren Sie die Nutzungsbedingungen von Firebase, falls Sie dazu aufgefordert werden.
  4. Klicken Sie auf Weiter.
  5. Klicken Sie auf Tarif bestätigen, um den Firebase-Abrechnungstarif zu bestätigen.
  6. Es ist optional, Google Analytics für dieses Codelab zu aktivieren.
  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 im Drop-down-Menü Standort Ihre Region 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 zuerst ein Verzeichnis für den Quellcode und wechseln Sie in dieses Verzeichnis.

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 dem folgenden Inhalt. Diese Datei enthält den Einstiegspunkt für den Dienst und die Hauptlogik für die App.

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);
});

Erstellen Sie eine Datei mit dem Namen spinnerSvg.js.

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 Tailwind CSS erstellen

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

Erstellen Sie die Datei tailwind.config.js für Tailwind CSS.

/** @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 nun ein neues public-Verzeichnis.

mkdir public
cd public

Erstellen Sie in diesem öffentlichen Verzeichnis die Datei index.html für das Frontend, in der htmx verwendet wird.

<!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 bestätigen, dass ein Fehler in der Anwendung auftritt, wenn der Nutzer versucht, Daten zu speichern.

Zuerst benötigen Sie entweder die Rolle „Datastore-Nutzer“, um auf Firestore zuzugreifen (wenn Sie Ihre Identität für die Authentifizierung verwenden, z.B. wenn Sie Cloud Shell verwenden), oder Sie können das zuvor erstellte Nutzerkonto annehmen.

Standardanmeldedaten für Anwendungen bei der lokalen Ausführung verwenden

Wenn Sie Cloud Shell verwenden, wird Ihr Code bereits auf einer virtuellen Maschine von Google Compute Engine ausgeführt. Ihre Anmeldedaten, die dieser virtuellen Maschine zugeordnet sind (wie beim Ausführen von gcloud auth list angezeigt), werden automatisch von Standardanmeldedaten für Anwendungen (ADC) verwendet. Daher ist es nicht erforderlich, den Befehl gcloud auth application-default login zu verwenden. Ihre Identität benötigt jedoch weiterhin die Rolle „Datastore-Nutzer“. Sie können direkt zum Abschnitt Anwendung lokal ausführen springen.

Wenn Sie jedoch Ihr lokales Terminal verwenden (d.h. nicht Cloud Shell), müssen Sie sich mit Standardanmeldedaten für Anwendungen bei Google-APIs authentifizieren. Sie haben zwei Möglichkeiten: 1) Sie melden sich mit Ihren Anmeldedaten an (vorausgesetzt, Sie haben die Rolle „Datastore-Nutzer“) oder 2) Sie melden sich an, indem Sie die Identität des in diesem Codelab verwendeten Dienstkontos übernehmen.

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 werden. Als Nächstes müssen Sie Ihrer Identität möglicherweise die Rolle „Vertex AI User“ zuweisen. Wenn Ihre Identität die Rolle „Eigentümer“ hat, haben Sie bereits die Nutzerrolle „Datastore-Nutzer“. Falls nicht, können Sie diesen Befehl ausführen, um Ihrer Identität die Rolle „Vertex AI User“ und die Rolle „Datastore User“ zuzuweisen.

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ätswechsel für ein Dienstkonto für ADC

Wenn Sie das in diesem Codelab erstellte Dienstkonto verwenden möchten, muss Ihrem Nutzerkonto die Rolle Ersteller von Dienstkonto-Token zugewiesen sein. Sie können diese Rolle mit dem folgenden Befehl abrufen:

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

Als Nächstes führen Sie 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

Achten Sie als Nächstes darauf, dass Sie sich im Stammverzeichnis cloud-run-github-cd-demo für Ihr Codelab befinden.

cd .. && pwd

Als Nächstes installieren Sie die Abhängigkeiten.

npm install

Schließlich können Sie die App mit dem folgenden Skript starten. Mit diesem Skript wird auch die Datei „output.css“ aus Tailwind CSS generiert.

npm run dev

Öffnen Sie jetzt Ihren Webbrowser und rufen Sie http://localhost:8080 auf. Wenn Sie Cloud Shell verwenden, können Sie die Website öffnen, indem Sie auf die Schaltfläche „Webvorschau“ klicken und „Vorschau auf Port 8080“ auswählen.

Webvorschau – Schaltfläche „Vorschau auf Port 8080“

Geben Sie Text in die Eingabefelder „Name“ und „Ort“ ein und klicken Sie auf „Speichern“. Aktualisieren Sie dann die Seite. Sie werden feststellen, dass das Feld „Ort“ nicht beibehalten wurde. Sie beheben diesen Fehler im nächsten Abschnitt.

Beenden Sie die lokale Ausführung der Express-App (z.B. mit 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

Übertragen Sie die aktuelle Codebasis, 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, das Repository cloud-run-auto-deploy-codelab zu nennen. Wenn Sie ein leeres Repository erstellen möchten, lassen Sie alle Standardeinstellungen deaktiviert oder auf „Keine“ gesetzt, damit das Repository nach der Erstellung standardmäßig keine Inhalte enthält, z. B.

GitHub-Standardeinstellungen

Wenn Sie diesen Schritt korrekt ausgeführt haben, wird auf der Seite des leeren Repositorys die folgende Anleitung angezeigt:

Anleitung für leeres GitHub-Repository

Sie folgen der Anleitung unter Vorhandenes Repository über die Befehlszeile übertragen, indem Sie die folgenden Befehle ausführen:

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

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

Übertragen Sie dann den Hauptzweig per Push an das Upstream-Repository.

git push -u origin main

9. Kontinuierliche Bereitstellung einrichten

Nachdem Sie 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 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“ 
    • Lassen Sie den Zweig als ^main$
    • Wählen Sie unter „Build-Typ“ die Option Go, Node.js, Python, Java, .NET Core, Ruby oder PHP über Buildpacks von Google Cloud aus.
  • Lassen Sie das Build-Kontextverzeichnis als /.
  • 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 früheren 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

Öffnen Sie im Cloud Shell-Editor die Datei app.js und suchen Sie nach dem Kommentar //TODO: fix this bug.

Ändern Sie 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 Befehl

npm run start

und öffnen Sie Ihren Webbrowser. Speichern Sie die Daten noch einmal für die Stadt und aktualisieren Sie die Seite. Die neu eingegebenen Ortsdaten werden nach der Aktualisierung korrekt beibehalten.

Nachdem Sie die Korrektur überprüft haben, können Sie sie bereitstellen. Committen Sie zuerst die Korrektur.

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

und übertragen Sie sie dann per Push an 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 im Blick behalten.

Korrektur in der Produktion überprüfen

Wenn in der Cloud Console für Ihren Cloud Run-Dienst angezeigt wird, dass die zweite Überarbeitung jetzt 100% des Traffics verarbeitet, z.B. unter https://console.cloud.google.com/run/detail/<YOUR_REGION>/<YOUR_SERVICE_NAME>/revisions, können Sie die Cloud Run-Dienst-URL in Ihrem Browser öffnen und prüfen, ob die neu eingegebenen Ortsdaten nach dem Aktualisieren der Seite beibehalten werden.

11. Glückwunsch!

Herzlichen Glückwunsch zum Abschluss des Codelabs!

Wir empfehlen, die Dokumentation zu Cloud Run und zur kontinuierlichen Bereitstellung aus Git zu lesen.

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

Damit Ihnen keine unbeabsichtigten Gebühren in Rechnung gestellt werden (z. B. wenn die Cloud Run-Dienste unbeabsichtigt häufiger aufgerufen werden als Ihre monatliche Cloud Run-Aufrufkontingent im kostenlosen Kontingent), können Sie entweder den Cloud Run-Dienst 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. den cloud-run-auto-deploy-codelab-Dienst.

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