Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

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łanie aplikacji.
Sprawdź, czy aplikacja została zarejestrowana w App Hub.
Sprawdź wskaźniki, ślady i logi aplikacji w monitorowaniu 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 wyboru projektu wybierz lub utwórz projekt w chmurze Google Cloud.
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.

U góry konsoli Google Cloud kliknij Aktywuj Cloud Shell.
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.

ADC Spaces

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, wykonaj te czynności:

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 bezpiecznego szablonu aplikacji opartych na agentach, który będzie można wielokrotnie wykorzystywać i który będzie zgodny z przepisami. Dodasz komponenty i skonfigurujesz ograniczenia, aby mieć pewność, że każda aplikacja wdrożona na podstawie tego szablonu będzie zgodna z zasadami chmury obowiązującymi w Twojej firmie.

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. Dodawanie serwera 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 takiej postaci.
Wpisz nazwę usługi: data-mcp-server.
W sekcji Pokaż ustawienia zaawansowane ustaw 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 i Ruch wychodzący na: PRIVATE_RANGES_ONLY.
Opcjonalnie w sekcji Pokaż ustawienia zaawansowane odznacz Włącz komponent dodatkowy Prometheus.
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 dodaj kolejno te role w sekcji Role projektu konta usługi:
- 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 Członkowie na: allUsers.
W sekcji Pokaż ustawienia zaawansowane ustaw DOSTĘP DO VPC i Ruch wychodzący na: PRIVATE_RANGES_ONLY.
Opcjonalnie w sekcji Pokaż ustawienia zaawansowane odznacz Włącz Prometheus Sidecar.
Połącz element agent-backend z elementem data-mcp-server, przeciągając połączenie z elementu agent-backend do elementu 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 pole 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 element frontend z elementem agent-backend, przeciągając połączenie z elementu frontend do elementu agent-backend.

5. Dodawanie komponentu Vertex AI

Kliknij Dodaj komponent > Vertex AI.
Nazwij go vertex-ai.
Połącz go z elementami agent-backend i data-mcp-server, przeciągając 2 połączenia z elementu vertex-ai do elementów 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 ADC jest on podzielony na komponenty backendu i frontendu.

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

Kliknij **Dodaj komponent > 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 element galb-frontend z elementem galb-backend, przeciągając połączenie z elementu galb-frontend do elementu 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 wysiłków 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), Szablony udostępnione (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 jeszcze 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 danych MCP. 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 potem 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 obok opcji Wybierz konto usługi pojawi się znacznik wyboru.

Konto usługi zostało utworzone

Następnie u dołu strony kliknij Wdróż.
Może to potrwać kilka minut. Po zakończeniu wdrażania 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 wdrożenia 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 wdrożenia 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.

Porozmawiaj 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 automatycznie powoduje 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 nadzór.