Apps schnell mit App Design Center bereitstellen

1. Einführung

In diesem Codelab erfahren Sie, wie Sie eine Full-Stack-Anwendung mit dem App Design Center (ADC) von Google Cloud bereitstellen. Sie stellen die Anwendung „The Cymbal London Concierge“ bereit, die ein Vue 3-Frontend, ein FastAPI-Backend und einen MCP-Server mit den Daten für die Anwendung umfasst.

Mit ADC können Sie Ihre Anwendungsarchitektur visuell definieren und als einzelne Einheit bereitstellen. Abhängigkeiten und Verbindungen werden automatisch verwaltet.

Aufgaben

Richten Sie App Design Center ein.
Anwendungskomponenten visuell zusammenstellen
Stellen Sie die Anwendungsarchitektur bereit.
Prüfen Sie, ob die Anwendung ausgeführt wird.
Prüfen Sie, ob die Anwendung in App Hub registriert wurde.
Prüfen Sie die Anwendungsmesswerte, ‑traces und ‑logs in Application Monitoring.

Voraussetzungen

Ein Webbrowser wie Chrome.
Google Cloud-Projekt mit aktivierter Abrechnungsfunktion.

Dieses Codelab richtet sich an Entwickler aller Erfahrungsstufen, auch an Anfänger.

Geschätzte Dauer:45 Minuten Geschätzte Kosten:unter 2,00 $

2. Einrichtung

Projekt einrichten

Google Cloud-Projekt erstellen

Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
Die Abrechnung für das Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist.

Cloud Shell starten

Cloud Shell ist eine Befehlszeilenumgebung, die in Google Cloud ausgeführt wird und mit den erforderlichen Tools vorinstalliert ist.

Klicken Sie oben in der Google Cloud Console auf Cloud Shell aktivieren.
Prüfen Sie nach der Verbindung mit Cloud Shell Ihre Authentifizierung:
```
gcloud auth list
```
Prüfen Sie, ob Ihr Projekt konfiguriert ist:
```
gcloud config get project
```

Wenn Ihr Projekt nicht wie erwartet festgelegt ist, legen Sie es fest:

export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

3. Application Design Center einrichten

Bevor Sie Ihre Anwendung zusammenstellen können, müssen Sie Ihren Arbeitsbereich in ADC einrichten.

Suchen Sie in der Google Cloud Console nach App Design Center und rufen Sie die Seite auf.
Wenn Sie ADC zum ersten Mal in diesem Projekt verwenden, wird ein Einrichtungsbildschirm angezeigt.
Klicken Sie auf Zur Einrichtung.

App Design Center einrichten

Sie werden aufgefordert, die erforderlichen APIs zu aktivieren, falls noch nicht geschehen. Klicken Sie auf Aktivieren, um fortzufahren.

APIs aktivieren

4. ADC-Funktionen kennenlernen

In dieser Aufgabe lernen Sie die Kernkomponenten von ADC kennen: Arbeitsbereiche, Kataloge und Vorlagen.

ADC Spaces

Ein Gruppenbereich ist ein Ort, an dem Sie Vorlagen erstellen und Anwendungen bereitstellen können. Jeder Gruppenbereich gehört zu einem Google Cloud-Projekt. Bei der Ersteinrichtung wird von ADC ein Standardbereich erstellt. Sie können später jedoch weitere Bereiche in anderen Regionen erstellen.

So rufen Sie Ihre Arbeitsbereiche über das Terminal auf:

Klicken Sie in der Cloud Shell-Symbolleiste auf Editor öffnen oder verwenden Sie das Terminal.
Führen Sie dazu diesen Befehl aus:

gcloud alpha design-center spaces list \
--project="your PROJECT ID" \
--location=us-central1

Die Ausgabe sollte in etwa so aussehen. Sie zeigt an, dass der Standardbereich für die Region vorhanden ist.

createTime: '20XXXX-XX-XXT09:19:29.456016967Z'
displayName: default-space
enableGcpSharedTemplates: true
name: projects/your-project-id/locations/us-central1/spaces/default-space

5. Vorlage zusammenstellen

In diesem Schritt schlüpfen Sie in die Rolle eines Platform Team-Engineers. Ihr Ziel ist es, eine wiederverwendbare, sichere und konforme Vorlage für agentenbasierte Anwendungen in Ihrer Organisation zu erstellen. Sie fügen Komponenten hinzu und konfigurieren Einschränkungen, damit alle Anwendungen, die über diese Vorlage bereitgestellt werden, den Cloud-Richtlinien Ihres Unternehmens entsprechen.

1. Neues Design erstellen

Klicken Sie in der ADC-Konsole auf Vorlagen > Vorlage erstellen.
Geben Sie Ihrer Vorlage den Namen simple-3-tier-agentic-app, da diese Vorlage zum Bereitstellen der Anwendung Cymbal London Concierge und anderer ähnlicher Anwendungen verwendet wird.

2. Data MCP-Server hinzufügen

Diese Komponente verarbeitet die Datenbankinteraktionen und die Vektorsuche.

Klicken Sie auf Komponente hinzufügen > Cloud Run (Service). Wenn Sie auf diese Komponente klicken, sehen Sie rechts oben eine Komponenten-ID. Sie hat das Format cloud-run-1. Wir können es in data-mcp-server ändern, indem wir es in der Codeansicht bearbeiten (siehe unten). Wir lassen es aber erst einmal so.
Geben Sie den Servicenamen ein: data-mcp-server.
Legen Sie unter Erweiterte Einstellungen anzeigen die Option Mitglieder auf allUsers fest. Hinweis: In einer Produktionsumgebung würden Sie dies wahrscheinlich einschränken, aber hier verwenden wir es der Einfachheit halber.
Legen Sie unter Erweiterte Einstellungen anzeigen die VPC-ZUGRIFF und den Ausgang auf PRIVATE_RANGES_ONLY fest.
Optional können Sie unter Erweiterte Einstellungen anzeigen das Häkchen bei Prometheus-Sidecar aktivieren entfernen.
Klicken Sie auf Speichern.

3. Agent-Backend hinzufügen

Dies ist die FastAPI-Anwendung, die das agentische Verhalten orchestriert.

Klicken Sie auf Komponente hinzufügen > Cloud Run (Service).
Geben Sie den Namen agent-backend ein.
Klicken Sie unter Erweiterte Felder einblenden das Kästchen Dienstkonto erstellen an und fügen Sie unter Dienstkonto-Projektrollen die folgenden Rollen einzeln hinzu:
- roles/monitoring.metricWriter
- roles/logging.logWriter
- roles/cloudtrace.agent
- roles/telemetry.writer
- roles/serviceusage.serviceUsageConsumer. Mit diesen Rollen kann der Agent Cloud Monitoring, Cloud Logging und Cloud Trace verwenden. Compliance Config:Das Plattformteam erzwingt das Prinzip der geringsten Berechtigung, indem es die erforderlichen Rollen explizit auflistet.
Legen Sie unter Erweiterte Einstellungen anzeigen die Option Mitglieder auf allUsers fest.
Legen Sie unter Erweiterte Einstellungen anzeigen die VPC-ZUGRIFF und den Ausgang auf PRIVATE_RANGES_ONLY fest.
Optional können Sie unter Erweiterte Einstellungen anzeigen das Häkchen bei Prometheus-Sidecar aktivieren entfernen.
Verbinden Sie agent-backend mit data-mcp-server, indem Sie eine Verbindung von agent-backend zu data-mcp-server ziehen.
Klicken Sie auf Speichern.

4. Front-End hinzufügen

Die Frontend-Benutzeroberfläche.

Klicken Sie auf Komponente hinzufügen > Cloud Run (Service).
Geben Sie den Servicenamen ein: frontend.
Deaktivieren Sie unter Erweiterte Einstellungen anzeigen die Option Dienstkonto erstellen.
Legen Sie unter Erweiterte Einstellungen anzeigen die Eingangs-IP-Adresse auf INGRESS_TRAFFIC_INTERNAL_LOADBALANCER fest. Compliance-Konfiguration:Der direkte öffentliche Zugriff auf den Frontend-Container ist blockiert. Der Traffic wird über den Load-Balancer geleitet.
Lege unter Erweiterte Einstellungen anzeigen die Option Mitglieder auf allUsers fest.
Optional können Sie unter Erweiterte Einstellungen anzeigen das Häkchen bei Prometheus-Sidecar aktivieren entfernen.
Klicken Sie auf Speichern.
Verbinden Sie frontend mit agent-backend, indem Sie eine Verbindung von frontend zu agent-backend ziehen.

5. Vertex AI-Komponente hinzufügen

Klicken Sie auf Komponente hinzufügen > Vertex AI.
Geben Sie den Namen vertex-ai ein.
Verbinden Sie sie mit agent-backend und data-mcp-server, indem Sie zwei Verbindungen von vertex-ai zu agent-backend bzw. data-mcp-server ziehen. Die Rollen aiplatform.user sind den Dienstkonten von agent-backend und data-mcp-server bereits zugewiesen, da sie mit der Vertex AI-Komponente verbunden sind.

6. Globalen Load Balancer hinzufügen

Der Load-Balancer macht Ihr Frontend im öffentlichen Internet verfügbar. In ADC wird dies in eine Backend- und eine Frontend-Komponente unterteilt.

A. Load-Balancer-Backend hinzufügen

Klicken Sie auf **Komponente hinzufügen** > Global Cloud Load Balancing (Backend).
Geben Sie den Namen galb-backend ein.
Klicken Sie auf Verbindung hinzufügen und verbinden Sie sie mit frontend.

B. Load-Balancer-Frontend hinzufügen

Klicken Sie auf **Komponente hinzufügen** > Global Cloud Load Balancing (Frontend).
Geben Sie den Namen galb-frontend ein.
Klicken Sie auf Verbindung hinzufügen und verbinden Sie sie mit galb-backend.
Verbinden Sie galb-frontend mit galb-backend, indem Sie eine Verbindung von galb-frontend zu galb-backend ziehen.

App-Vorlage

Mit einem Katalog können Sie Anwendungsvorlagen in verschiedenen Gruppenbereichen freigeben und so die Architektur steuern. Ein Katalog dient als zentrales Repository für Vorlagen, die vom Plattformteam erstellt und für die Freigabe genehmigt wurden. Wenn Sie Kataloge zwischen Arbeitsbereichen freigeben, vermeiden Sie doppelten Aufwand bei gemeinsamen Projekten und verkürzen die Startzeiten.

Fügen Sie nun Ihre Vorlage dem Katalog hinzu:

Klicken Sie auf den Tab Kataloge.
Klicken Sie auf Vorlagen hinzufügen und wählen Sie die Vorlage simple-3-tier-agentic-app aus.
Klicken Sie auf Zum Katalog hinzufügen.

Vorlagen finden Sie an drei Stellen: Google-Vorlagen (vordefinierte Muster), Freigegebene Vorlagen (für Ihre Organisation freigegeben) und Vorlagen (benutzerdefinierte Blaupausen in Ihrem Bereich).

6. Anwendung bereitstellen

Jetzt schlüpfen Sie in die Rolle eines App-Entwicklers, der diese Vorlage zum Bereitstellen der Anwendung cymbal-london-concierge verwenden möchte.

Öffnen Sie die Vorlage in der ADC-Konsole noch einmal auf dem Tab Vorlagen und klicken Sie auf die Schaltfläche App konfigurieren.
Klicken Sie auf Neue Anwendung erstellen.
Anwendung konfigurieren:
- Name der Anwendung: cymbal-london-concierge
- Bereitstellungsprojekt: Ihre Projekt-ID
- Region: us-central1
- Eingabeattribute> Umgebung: Development
- Eingabeattribute>Wichtigkeit: Low
Klicken Sie auf Anwendung erstellen.Für eine Produktionsbereitstellung würden Sie „Produktion“ für „Umgebung“ und „Hoch“ für „Kritikalität“ auswählen. Diese Tags helfen Ihren SREs und Ihrem Betriebsteam, die Arbeit an auftretenden Problemen zu sortieren und zu priorisieren.
Dadurch sollte die Detailseite der Bereitstellung mit der Anwendungsvorlage geöffnet werden. Da es sich nur um eine Vorlage handelt, müssen wir noch eine Konfiguration hinzufügen, die für unsere Anwendung spezifisch ist.
Konfigurieren wir das Frontend. Klicken Sie auf die Frontend-Komponente.
1. Klicken Sie auf Container > Container bearbeiten.
2. Wir müssen das generische Container-Image durch das ersetzen, das wir für unsere Anwendung verwenden möchten.
3. Legen Sie das Container-Image auf Folgendes fest: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/frontend:codelab-c2c6-v1
4. Legen Sie den Port http1 auf 80 fest.
5. Legen Sie die folgenden Umgebungsvariablen fest:
  - API_BASE_URL: module.cloud-run-2.service_uri (achten Sie darauf, dass cloud-run-2 der Name der Agent-Backend-Komponente ist. Falls nicht, ersetzen Sie ihn durch den tatsächlichen Namen der Komponente.)
6. Klicken Sie auf Speichern.
Konfigurieren wir das Agent-Backend. Klicken Sie auf die Komponente agent-backend.
1. Klicken Sie auf Container > Container bearbeiten.
2. Wir müssen das generische Container-Image durch das ersetzen, das wir für unsere Anwendung verwenden möchten.
3. Legen Sie das Container-Image auf us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/agent:codelab-c2c6-v1 fest.
4. Legen Sie die folgenden Umgebungsvariablen fest:
5. GOOGLE_CLOUD_PROJECT:
6. GOOGLE_CLOUD_LOCATION: us-central1
7. DATA_BACKEND_URL: module.cloud-run-1.service_uri (achten Sie darauf, dass cloud-run-1 der Name der Daten-MCP-Serverkomponente ist. Falls nicht, ersetzen Sie ihn durch den tatsächlichen Namen der Komponente.)
8. Legen Sie den Port http1 auf 8000 fest.
9. Klicken Sie auf Speichern.
Konfigurieren wir den Data-MCP-Server. Klicken Sie auf die Komponente data-mcp-server.
1. Klicken Sie auf Container > Container bearbeiten.
2. Wir müssen das generische Container-Image durch das ersetzen, das wir für unsere Anwendung verwenden möchten.
3. Legen Sie das Container-Image auf us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/data_mcp:codelab-c2c6-v1 fest.
4. Legen Sie die folgenden Umgebungsvariablen fest:
5. GOOGLE_CLOUD_PROJECT:
6. GOOGLE_CLOUD_LOCATION: us-central1
7. DB_TYPE: sqlite
8. EMBEDDING_MODEL: text-embedding-005
9. Legen Sie den Port http1 auf 8002 fest.
10. Klicken Sie auf Speichern.
In einem echten Produktionsszenario würden Sie auch eine Datenbank wie Cloud SQL oder AlloyDB konfigurieren und den Datenbankverbindungsstring für den Data-MCP-Server angeben. In diesem Lab verwenden wir jedoch eine In-Memory-Datenbank. Außerdem sollten Sie den MCP-Server und die Datenbank privat machen und nur über das Agent-Backend oder innerhalb des Netzwerks zugänglich machen.
Klicken Sie oben auf der Seite auf die Schaltfläche Code, um den Terraform-Code für die Anwendung aufzurufen. Sie können den Terraform-Code für die Anwendung auch herunterladen, indem Sie auf die Schaltfläche Code abrufen klicken, um ihn in Ihrer Codebasis zu speichern.
Klicken Sie rechts oben auf der Seite auf die Schaltfläche Bereitstellen, um die Anwendung bereitzustellen.
Auf der Bereitstellungsseite werden Sie aufgefordert, ein Dienstkonto für die Bereitstellungspipeline zu erstellen oder ein vorhandenes auszuwählen. Klicken Sie auf Dienstkonto erstellen (ein Name wird automatisch eingefügt) und dann auf Fortfahren. Das Erstellen eines neuen Dienstkontos dauert einige Sekunden.

Dienstkonto erstellen

Nachdem das Dienstkonto erstellt wurde, wird die Seite aktualisiert und neben „Dienstkonto auswählen“ wird ein Häkchen angezeigt.

Dienstkonto erstellt

Klicken Sie dann unten auf der Seite auf Bereitstellen.
Das kann einige Minuten dauern. Wenn die Bereitstellung abgeschlossen ist, wird neben jeder Komponente ein grünes Häkchen angezeigt. Sie können den Status der Bereitstellung auch prüfen, indem Sie auf die Schaltfläche Link zu Logs klicken. Dadurch werden die Cloud Build-Logs geöffnet. Es kann einige Minuten dauern, bis die Schaltfläche angezeigt wird.

![Deployment Logs](./img/10b_logs.png)

Sie können die Cloud Build-Logs aufrufen, um den Status der Bereitstellung zu sehen oder um festzustellen, ob bei der Bereitstellung der Anwendung Fehler aufgetreten sind. Sie können auch direkt zu den Cloud Build-Logs wechseln, indem Sie in der Google Cloud Console nach Cloud Build suchen und auf Verlauf klicken. Die Bereitstellung der Anwendung dauert etwa 5–8 Minuten.

![Cloud Build](./img/10c_cloudbuild.png)

Wenn die Bereitstellung abgeschlossen ist, wird neben dem Feld Bereitstellungsstatus ein grünes Häkchen angezeigt.

![Deployment Complete](./img/11_deployed.png)

7. Anwendung überprüfen

Wir testen, ob der Agent aktiv ist. Im Abschnitt outputs der Detailseite des Deployments wird die URL der Frontend-Komponente angezeigt. Kopieren Sie die URL und fügen Sie sie in Ihren Browser ein. Verwenden Sie http und nicht https. Akzeptieren Sie auch alle Warnungen, die Sie im Browser erhalten, da das Frontend HTTP verwendet.

Chatten Sie mit der App und bitten Sie sie, einen Reiseplan für eine Reise nach London zu erstellen.

Frontend

8. App Hub und Anwendungsmonitoring

Klicken Sie in der ADC Console rechts oben auf der Seite auf die Schaltfläche View app in App Hub (App im App Hub ansehen).

App Hub

Dadurch wird die App im App Hub geöffnet. App Hub ist ein zentraler Ort, an dem Sie alle Ihre Anwendungen ansehen und verwalten können. Sie wechseln von einer ressourcenorientierten zu einer anwendungsorientierten Ansicht. Wenn Sie eine App mit ADC erstellen, wird automatisch eine App in App Hub erstellt. Hier sollten alle Arbeitslasten und Dienste aufgeführt sein, aus denen die Anwendung besteht. Anstatt die Ressourcen in der Cloud als einzelne Ressourcen zu betrachten, können Sie sie als Teil einer einzelnen Anwendung ansehen, was die Verwaltung und Governance vereinfacht.