Szybkie wdrażanie aplikacji za pomocą App Design Center

1. Wprowadzenie

Z tego ćwiczenia dowiesz się, jak wdrożyć aplikację pełnostosową za pomocą App Design Center (ADC) Google Cloud. Wdrożysz aplikację „The Cymbal London Concierge”, która zawiera frontend Vue 3, backend FastAPI i serwer MCP przechowujący dane aplikacji.

ADC umożliwia wizualne zdefiniowanie architektury aplikacji i wdrożenie jej jako pojedynczej jednostki, automatycznie zarządzając zależnościami i połączeniami.

Jakie zadania wykonasz

Skonfiguruj App Design Center.
Wizualnie zmontuj komponenty aplikacji.
wdrożyć architekturę aplikacji;
Sprawdź działającą aplikację.
Sprawdź, czy aplikacja została zarejestrowana w App Hub.
Sprawdź wskaźniki, logi czasu i logi aplikacji w usłudze monitorowania aplikacji.

Czego potrzebujesz

przeglądarka, np. Chrome;
Projekt Google Cloud z włączonymi płatnościami.

To ćwiczenie jest przeznaczone dla deweloperów na wszystkich poziomach zaawansowania, w tym dla początkujących.

Szacowany czas trwania: 45 minut Szacowany koszt: poniżej 2 USD

2. Konfiguracja

Konfigurowanie projektu

Tworzenie projektu Google Cloud

W konsoli Google Cloud na stronie selektora projektu wybierz lub utwórz projekt w chmurze Google.
Sprawdź, czy w projekcie Cloud włączone są płatności. Dowiedz się, jak sprawdzić, czy w projekcie są włączone płatności.

Uruchamianie Cloud Shell

Cloud Shell to środowisko wiersza poleceń działające w Google Cloud, które zawiera niezbędne narzędzia.

Kliknij Aktywuj Cloud Shell u góry konsoli Google Cloud.
Po połączeniu z Cloud Shell sprawdź uwierzytelnianie:
```
gcloud auth list
```
Sprawdź, czy projekt jest skonfigurowany:
```
gcloud config get project
```

Jeśli projekt nie jest ustawiony zgodnie z oczekiwaniami, ustaw go:

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

3. Skonfiguruj App Design Center

Zanim złożysz aplikację, musisz skonfigurować obszar roboczy w ADC.

W konsoli Google Cloud wyszukaj App Design Center i otwórz je.
Jeśli korzystasz z ADC w tym projekcie po raz pierwszy, zobaczysz ekran konfiguracji.
Kliknij Otwórz konfigurację.

Konfigurowanie App Design Center

Jeśli wymagane interfejsy API nie są jeszcze włączone, pojawi się prośba o ich włączenie. Aby kontynuować, kliknij Włącz.

Włącz interfejsy API

4. Poznaj funkcje ADC

W tym zadaniu poznasz podstawowe komponenty ADC: przestrzenie, katalogi i szablony.

Pokoje ADC

Pokój to miejsce, w którym możesz tworzyć szablony i wdrażać aplikacje. Każda przestrzeń należy do projektu Google Cloud. Podczas wstępnej konfiguracji ADC tworzy domyślną przestrzeń, ale później możesz utworzyć inne przestrzenie w różnych regionach.

Aby wyświetlić przestrzenie w terminalu:

Na pasku narzędzi Cloud Shell kliknij Otwórz edytor lub użyj terminala.
Uruchom to polecenie:

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

Powinny pojawić się dane wyjściowe podobne do tych, które wskazują, że w regionie jest dostępna domyślna przestrzeń.

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

5. Tworzenie szablonu

W tym kroku wcielisz się w rolę inżyniera zespołu platformy. Twoim celem jest utworzenie w organizacji szablonu aplikacji z agentami, który będzie bezpieczny, zgodny z przepisami i możliwy do ponownego wykorzystania. Dodasz komponenty i skonfigurujesz ograniczenia, aby mieć pewność, że każda aplikacja wdrożona na podstawie tego szablonu będzie zgodna z zasadami Twojej firmy dotyczącymi chmury.

1. Tworzenie nowego projektu

W konsoli ADC kliknij Templates > Create Template (Szablony > Utwórz szablon).
Nazwij szablon simple-3-tier-agentic-app, ponieważ będzie on używany do wdrażania aplikacji Cymbal London Concierge i innych podobnych aplikacji.

2. Dodaj serwer MCP danych

Ten komponent obsługuje interakcje z bazą danych i wyszukiwanie wektorowe.

Kliknij Add Component (Dodaj komponent) > Cloud Run (Service) (Cloud Run (usługa)). Jeśli klikniesz ten komponent, w prawym górnym rogu zobaczysz identyfikator komponentu. Będzie on miał format cloud-run-1. Możemy zmienić go na data-mcp-server, edytując go w widoku kodu (o czym będzie mowa później), ale na razie zostawmy go w tej postaci.
Wpisz nazwę usługi: data-mcp-server.
W sekcji Pokaż ustawienia zaawansowane ustaw opcję Członkowie na: allUsers. (Uwaga: w środowisku produkcyjnym prawdopodobnie ograniczysz tę opcję, ale w tym ćwiczeniu używamy jej dla uproszczenia).
W sekcji Pokaż ustawienia zaawansowane ustaw DOSTĘP DO VPC, a następnie ustaw Ruch wychodzący na: PRIVATE_RANGES_ONLY.
Opcjonalnie w sekcji Pokaż ustawienia zaawansowane odznacz Włącz Prometheus Sidecar.
Kliknij Zapisz.

3. Dodawanie backendu agenta

Jest to aplikacja FastAPI, która koordynuje działanie agenta.

Kliknij Add Component (Dodaj komponent) > Cloud Run (Service) (Cloud Run (usługa)).
Nazwij go agent-backend.
W sekcji Pokaż pola zaawansowane zaznacz Utwórz konto usługi i w sekcji Role projektu konta usługi dodaj kolejno te role:
- roles/monitoring.metricWriter
- roles/logging.logWriter
- roles/cloudtrace.agent
- roles/telemetry.writer
- roles/serviceusage.serviceUsageConsumer. Te role umożliwiają agentowi korzystanie z usług Cloud Monitoring, Cloud Logging i Cloud Trace. Konfiguracja zgodności: zespół platformy egzekwuje zasadę jak najmniejszych uprawnień, wyraźnie wymieniając wymagane role.
W sekcji Pokaż ustawienia zaawansowane ustaw opcję Członkowie na: allUsers.
W sekcji Pokaż ustawienia zaawansowane ustaw DOSTĘP DO VPC, a następnie ustaw Ruch wychodzący na: PRIVATE_RANGES_ONLY.
Opcjonalnie w sekcji Pokaż ustawienia zaawansowane odznacz Włącz Prometheus Sidecar.
Połącz agent-backend z data-mcp-server, przeciągając połączenie z agent-backend do data-mcp-server.
Kliknij Zapisz.

4. Dodawanie frontendu

Interfejs użytkownika.

Kliknij Add Component (Dodaj komponent) > Cloud Run (Service) (Cloud Run (usługa)).
Wpisz nazwę usługi: frontend.
W sekcji Pokaż ustawienia zaawansowane odznacz opcję Utwórz konto usługi.
W sekcji Pokaż ustawienia zaawansowane ustaw Wejście na: INGRESS_TRAFFIC_INTERNAL_LOADBALANCER. Konfiguracja zgodności: bezpośredni dostęp publiczny do kontenera frontendu jest zablokowany, co wymusza przekierowywanie ruchu przez system równoważenia obciążenia.
W sekcji Pokaż ustawienia zaawansowane ustaw Członkowie na: allUsers.
Opcjonalnie w sekcji Pokaż ustawienia zaawansowane odznacz Włącz Prometheus Sidecar.
Kliknij Zapisz.
Połącz frontend z agent-backend, przeciągając połączenie z frontend do agent-backend.

5. Dodawanie komponentu Vertex AI

Kliknij Dodaj komponent > Vertex AI.
Nazwij go vertex-ai.
Połącz go z urządzeniami agent-backend i data-mcp-server, przeciągając 2 połączenia z vertex-ai do agent-backend i data-mcp-server. Role aiplatform.user zostaną już przypisane do kont usługi agent-backend i data-mcp-server, ponieważ są one połączone z komponentem Vertex AI.

6. Dodawanie globalnego systemu równoważenia obciążenia

System równoważenia obciążenia udostępnia frontend w publicznym internecie. W przypadku ADC jest on podzielony na komponenty Backend i Frontend.

A. Dodawanie backendu systemu równoważenia obciążenia

Kliknij **Add Component (Dodaj komponent) > Global Cloud Load Balancing (Backend) (Globalne równoważenie obciążenia w Cloud (backend)).
Nazwij go galb-backend.
Kliknij Dodaj połączenie i połącz je z frontend.

B. Dodawanie frontendu systemu równoważenia obciążenia

Kliknij **Dodaj komponent > Global Cloud Load Balancing (Frontend).
Nazwij go galb-frontend.
Kliknij Dodaj połączenie i połącz je z galb-backend.
Połącz galb-frontend z galb-backend, przeciągając połączenie z galb-frontend do galb-backend.

Szablon aplikacji

Katalog umożliwia udostępnianie szablonów aplikacji w różnych przestrzeniach, co pozwala zarządzać architekturą. Katalog pełni funkcję centralnego repozytorium szablonów, które zostały utworzone i zatwierdzone do udostępniania przez zespół platformy. Udostępnianie katalogów między przestrzeniami zapobiega powielaniu pracy w przypadku wspólnych projektów i skraca czas uruchamiania.

Teraz dodaj szablon do katalogu:

Kliknij kartę Katalogi.
Kliknij Dodaj szablony i wybierz szablon simple-3-tier-agentic-app.
Kliknij Dodaj do katalogu.

Szablony znajdziesz w 3 miejscach: Szablony Google (gotowe wzorce), Udostępnione szablony (udostępnione w całej organizacji) i Szablony (niestandardowe projekty w Twoim obszarze).

6. Wdrażanie aplikacji

Teraz wciel się w rolę dewelopera aplikacji, który chce użyć tego szablonu do wdrożenia aplikacji cymbal-london-concierge.

W konsoli ADC ponownie otwórz szablon na karcie Szablony i kliknij przycisk Skonfiguruj aplikację.
Kliknij Utwórz nową aplikację.
Skonfiguruj aplikację:
- Nazwa aplikacji: cymbal-london-concierge
- Projekt wdrożenia: identyfikator projektu
- Region: us-central1
- Atrybuty wejściowe> Środowisko: Development
- Atrybuty wejściowe>Krytyczność: Low
Kliknij Create Application (Utwórz aplikację). W przypadku wdrożenia produkcyjnego wybierz „Production” (Produkcyjne) w sekcji Environment (Środowisko) i „High” (Wysoka) w sekcji Criticality (Krytyczność). Są to tagi, które pomogą zespołowi SRE i zespołowi operacyjnemu sortować i określać priorytety pracy nad wszelkimi problemami.
Powinna otworzyć się strona z informacjami o wdrożeniu z szablonem aplikacji. Jest to tylko szablon, więc musimy dodać konfigurację specyficzną dla naszej aplikacji.
Skonfigurujmy frontend. Kliknij komponent frontend.
1. Kliknij Kontenery > Edytuj kontener.
2. Musimy zastąpić ogólny obraz kontenera obrazem, którego chcemy użyć w naszej aplikacji.
3. Ustaw Obraz kontenera na: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/frontend:codelab-c2c6-v1
4. Ustaw port http1 na 80.
5. Ustaw następujące zmienne środowiskowe:
  - API_BASE_URL: module.cloud-run-2.service_uri (upewnij się, że cloud-run-2 to nazwa komponentu backendu agenta. Jeśli nie, zastąp ją rzeczywistą nazwą komponentu).
6. Kliknij Zapisz.
Skonfigurujmy backend agenta. Kliknij komponent agent-backend.
1. Kliknij Kontenery > Edytuj kontener.
2. Musimy zastąpić ogólny obraz kontenera obrazem, którego chcemy użyć w naszej aplikacji.
3. Ustaw Obraz kontenera na: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/agent:codelab-c2c6-v1
4. Ustaw następujące zmienne środowiskowe:
5. GOOGLE_CLOUD_PROJECT:
6. GOOGLE_CLOUD_LOCATION: us-central1
7. DATA_BACKEND_URL: module.cloud-run-1.service_uri (upewnij się, że cloud-run-1 to nazwa komponentu serwera danych mcp. Jeśli nie, zastąp ją rzeczywistą nazwą komponentu)
8. Ustaw port http1 na 8000.
9. Kliknij Zapisz.
Skonfigurujmy serwer MCP danych. Kliknij komponent data-mcp-server.
1. Kliknij Kontenery > Edytuj kontener.
2. Musimy zastąpić ogólny obraz kontenera obrazem, którego chcemy użyć w naszej aplikacji.
3. Ustaw Obraz kontenera na: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/data_mcp:codelab-c2c6-v1
4. Ustaw następujące zmienne środowiskowe:
5. GOOGLE_CLOUD_PROJECT:
6. GOOGLE_CLOUD_LOCATION: us-central1
7. DB_TYPE: sqlite
8. EMBEDDING_MODEL: text-embedding-005
9. Ustaw port http1 na 8002.
10. Kliknij Zapisz.
W rzeczywistym scenariuszu produkcyjnym skonfigurujesz też bazę danych, np. CloudSQL lub AlloyDB, i podasz ciąg połączenia z bazą danych dla serwera mcp danych. W tym module użyjemy jednak bazy danych w pamięci. Serwer mcp i baza danych powinny być prywatne i dostępne tylko z backendu agenta lub z sieci.
Aby wyświetlić kod Terraform aplikacji, kliknij przycisk Kod u góry strony. Możesz też pobrać kod Terraform dla aplikacji, klikając przycisk Pobierz kod, aby zapisać go w bazie kodu.
Aby wdrożyć aplikację, w prawym górnym rogu strony kliknij przycisk Deploy (Wdróż).
Na stronie wdrożenia pojawi się prośba o utworzenie konta usługi na potrzeby potoku wdrażania lub wybranie istniejącego konta. Kliknij Utwórz konto usługi (nazwa zostanie wypełniona automatycznie), a następnie Dalej. Utworzenie nowego konta usługi zajmie kilka sekund.

Utwórz konto usługi

Po utworzeniu konta usługi strona odświeży się i zobaczysz opcję Wybierz konto usługi ze znacznikiem wyboru obok niej.

Konto usługi zostało utworzone

Następnie u dołu strony kliknij Wdróż.
Może to potrwać kilka minut. Gdy wdrażanie się zakończy, obok każdego komponentu pojawi się zielony znacznik wyboru. Stan wdrożenia możesz też sprawdzić, klikając przycisk Link do logów, który otworzy logi kompilacji w chmurze. Przycisk może pojawić się po kilku minutach.

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

Możesz wyświetlić dzienniki kompilacji w chmurze, aby sprawdzić stan wdrażania lub czy podczas wdrażania aplikacji wystąpiły jakieś błędy. Możesz też przejść bezpośrednio do logów Cloud Build, wyszukując Cloud Build w konsoli Google Cloud i klikając Historia. Wdrożenie aplikacji zajmie około 5–8 minut.

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

Gdy wdrażanie się zakończy, obok pola Stan wdrażania pojawi się zielony znacznik wyboru.

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

7. Weryfikacja aplikacji

Sprawdźmy, czy agent jest aktywny. W sekcji outputs (dane wyjściowe) na stronie z informacjami o wdrożeniu zobaczysz adres URL komponentu interfejsu. Skopiuj ten adres URL i wklej go w przeglądarce. Użyj http, a nie https. Zaakceptuj też wszystkie ostrzeżenia, które mogą pojawić się w przeglądarce, ponieważ interfejs korzysta z protokołu HTTP.

Czatuj z aplikacją i poproś ją o utworzenie planu podróży do Londynu.

Frontend

8. App Hub i monitorowanie aplikacji

W konsoli ADC kliknij przycisk Wyświetl aplikację w App Hub w prawym górnym rogu strony.

App Hub

Spowoduje to otwarcie aplikacji w App Hub. App Hub to centralne miejsce, w którym możesz wyświetlać wszystkie aplikacje i nimi zarządzać. Umożliwia przejście z widoku skoncentrowanego na zasobach na widok skoncentrowany na aplikacjach. Utworzenie aplikacji za pomocą ADC powoduje automatyczne utworzenie aplikacji w App Hub. Powinny się tu wyświetlać wszystkie zbiory zadań i usługi, które składają się na aplikację. Zamiast wyświetlać zasoby w chmurze jako poszczególne zasoby, możesz wyświetlać je jako część jednej aplikacji, co upraszcza zarządzanie i administrację.