Быстро развертывайте приложения с помощью Центра проектирования приложений.

1. Введение

В этом практическом занятии вы научитесь развертывать полнофункциональное приложение с помощью Google Cloud Application Design Center (ADC) . Вы развернете приложение "The Cymbal London Concierge", которое включает в себя фронтенд на Vue 3, бэкенд на FastAPI и сервер MCP, хранящий данные для приложения.

ADC позволяет визуально определять архитектуру приложения и развертывать его как единое целое, автоматически управляя зависимостями и соединениями.

Что вы будете делать

• Настройте Центр проектирования приложений.
• Визуально соберите компоненты приложения.
• Разверните архитектуру приложения.
• Проверьте работу запущенного приложения.
• Убедитесь, что приложение зарегистрировано в App Hub.
• Проверьте метрики, трассировки и журналы приложения в разделе «Мониторинг приложений».

Что вам понадобится

• Веб-браузер, например Chrome .
• Проект Google Cloud с включенной функцией выставления счетов.

Этот практический семинар предназначен для разработчиков всех уровней, включая начинающих.

Примерное время: 45 минут. Примерное время: менее 2 долларов США.

2. Настройка

Настройка проекта

Создайте проект в Google Cloud.

1. В консоли Google Cloud на странице выбора проекта выберите или создайте проект Google Cloud .
2. Убедитесь, что для вашего облачного проекта включена функция выставления счетов. Узнайте, как проверить, включена ли функция выставления счетов для проекта .

Запустить Cloud Shell

Cloud Shell — это среда командной строки, работающая в Google Cloud и поставляемая с предустановленными необходимыми инструментами.

1. В верхней части консоли Google Cloud нажмите кнопку «Активировать Cloud Shell» .
2. После подключения к Cloud Shell подтвердите свою аутентификацию:

   gcloud auth list
   

3. Убедитесь, что ваш проект настроен:

   gcloud config get project
   

4. Если параметры вашего проекта заданы не так, как ожидалось, настройте их следующим образом:

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

3. Настройте Центр проектирования приложений.

Прежде чем приступить к сборке приложения, необходимо настроить рабочее пространство в ADC.

1. В консоли Google Cloud найдите «Центр проектирования приложений» и перейдите в него.
2. Если вы впервые используете АЦП в этом проекте, вы увидите экран настройки.
3. Нажмите «Перейти к настройкам» .

4. Вам будет предложено включить необходимые API, если они еще не включены. Нажмите «Включить» , чтобы продолжить.

4. Изучение особенностей АЦП

В этом задании вы изучите основные компоненты ADC: пространства, каталоги и шаблоны.

Пространства ADC

Пространство — это место для создания шаблонов и развертывания приложений. Каждое пространство принадлежит проекту Google Cloud. ADC создает пространство по умолчанию во время первоначальной настройки, но позже вы можете свободно создавать другие пространства в разных регионах.

Для просмотра содержимого ваших помещений через терминал выполните следующие действия:

1. Нажмите кнопку «Открыть редактор» на панели инструментов Cloud Shell или воспользуйтесь терминалом.
2. Выполните следующую команду:

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

Вы должны увидеть вывод, похожий на этот, который указывает на то, что пространство по умолчанию для данного региона присутствует.

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

5. Соберите шаблон

На этом этапе вы возьмете на себя роль инженера команды платформы . Ваша задача — создать многоразовый, безопасный и соответствующий требованиям шаблон для агентских приложений в вашей организации. Вы будете добавлять компоненты и настраивать ограничения, чтобы гарантировать, что любое приложение, развернутое на основе этого шаблона, соответствует облачным политикам вашей компании.

1. Создайте новый дизайн.

1. В консоли АЦП нажмите «Шаблоны» > «Создать шаблон» .
2. Назовите свой шаблон simple-3-tier-agentic-app , поскольку он будет использоваться для развертывания приложения Cymbal London Concierge и других подобных приложений.

2. Добавьте сервер Data MCP.

Этот компонент обрабатывает взаимодействие с базой данных и векторный поиск.

1. Нажмите «Добавить компонент» > «Запуск облака (сервис)» . Если вы щелкнете по этому компоненту, в правом верхнем углу вы увидите идентификатор компонента . Он будет иметь вид cloud-run-1 . Мы можем изменить его на data-mcp-server , отредактировав его в режиме просмотра кода (об этом будет рассказано позже), но давайте оставим его как есть.
2. Введите имя службы : data-mcp-server .
3. В разделе «Показать расширенные настройки» установите для параметра «Участники » значение allUsers ». (Примечание: в рабочей среде вы, вероятно, ограничите это значение, но мы используем его здесь для простоты кода.)
4. В разделе «Показать расширенные настройки» в поле «Доступ к VPC» установите для параметра « Исходящий трафик» значение: PRIVATE_RANGES_ONLY .
5. При желании в разделе «Показать дополнительные настройки» снимите флажок «Включить Prometheus Sidecar» .
6. Нажмите « Сохранить ».

3. Добавьте бэкэнд агента.

Это приложение FastAPI, которое управляет поведением агентов.

1. Нажмите «Добавить компонент» > «Запуск в облаке (служба)» .
2. Назовите его agent-backend .
3. В разделе «Показать расширенные поля» установите флажок « Создать учетную запись службы» и добавьте следующие роли в раздел «Роли проекта учетной записи службы» по одной:
   • roles/monitoring.metricWriter
   • roles/logging.logWriter
   • roles/cloudtrace.agent
   • roles/telemetry.writer
   • roles/serviceusage.serviceUsageConsumer . Эти роли позволят агенту использовать Cloud Monitoring, Cloud Logging и Cloud Trace. Конфигурация соответствия: команда платформы обеспечивает соблюдение принципа минимальных привилегий, явно перечисляя необходимые роли.
   
4. В разделе «Показать расширенные настройки» установите для параметра «Участники» значение: allUsers .
5. В разделе «Показать расширенные настройки» в поле «Доступ к VPC» установите для параметра « Исходящий трафик» значение: PRIVATE_RANGES_ONLY .
6. При желании в разделе «Показать дополнительные настройки» снимите флажок «Включить Prometheus Sidecar» .
7. Подключите agent-backend к data-mcp-server , перетащив соединение от agent-backend к data-mcp-server .
8. Нажмите « Сохранить ».

4. Добавьте фронтенд.

Пользовательский интерфейс фронтенда.

1. Нажмите «Добавить компонент» > «Запуск в облаке (служба)» .
2. Введите название сервиса : frontend .
3. В разделе «Показать дополнительные параметры» снимите флажок «Создать учетную запись службы» .
4. В разделе «Показать расширенные настройки» установите для параметра Ingress значение: INGRESS_TRAFFIC_INTERNAL_LOADBALANCER . Конфигурация соответствия: прямой публичный доступ к контейнеру внешнего интерфейса заблокирован, трафик будет направляться через балансировщик нагрузки.
5. В разделе «Показать расширенные настройки» установите для параметра «Участники» значение: allUsers .
6. При желании в разделе «Показать дополнительные настройки» снимите флажок «Включить Prometheus Sidecar» .
7. Нажмите « Сохранить ».
8. Подключите frontend к agent-backend , перетащив соединение с frontend на agent-backend .

5. Добавьте компонент AI для вершин.

1. Нажмите «Добавить компонент» > «Vertex AI» .
2. Назовите его vertex-ai .
3. Подключите его к agent-backend и data-mcp-server , перетащив два соединения из vertex-ai к agent-backend и data-mcp-server соответственно. Роли aiplatform.user уже будут назначены сервисным учетным записям agent-backend и data-mcp-server поскольку они подключены к компоненту vertex AI.

6. Добавьте глобальный балансировщик нагрузки.

Балансировщик нагрузки предоставляет доступ к вашему интерфейсу из общедоступного интернета. В ADC это разделено на компоненты бэкэнда и фронтенда.

А. Добавьте бэкэнд балансировщика нагрузки.

1. Нажмите **Добавить компонент > Глобальная балансировка нагрузки в облаке (бэкэнд) .
2. Назовите его galb-backend .
3. Нажмите «Добавить соединение» и подключите его к frontend .

B. Добавьте интерфейс балансировщика нагрузки.

1. Нажмите **Добавить компонент > Глобальная балансировка нагрузки в облаке (интерфейс пользователя) .
2. Назовите его galb-frontend .
3. Нажмите «Добавить соединение» и подключите его к galb-backend .
4. Соедините galb-frontend с galb-backend , перетащив соединение от galb-frontend к galb-backend .

Поделитесь шаблоном в каталоге

Каталог позволяет обмениваться шаблонами приложений между различными пространствами, обеспечивая управление архитектурой. Каталог выступает в качестве центрального хранилища шаблонов, созданных и утвержденных для совместного использования командой платформы. Совместное использование каталогов между пространствами позволяет избежать дублирования усилий в общих проектах и ​​​​ускоряет время запуска.

Теперь добавьте свой шаблон в каталог:

1. Перейдите во вкладку «Каталоги» .
2. Нажмите «Добавить шаблоны» и выберите шаблон simple-3-tier-agentic-app .
3. Нажмите «Добавить в каталог» .

Шаблоны можно найти в трех местах: шаблоны Google (предопределенные шаблоны), общие шаблоны (используемые во всей организации) и шаблоны (пользовательские схемы для вашего рабочего пространства).

6. Разверните приложение

Теперь настало время сыграть роль разработчика приложений, который хочет использовать этот шаблон для развертывания приложения cymbal-london-concierge .

1. В консоли ADC снова откройте шаблон на вкладке «Шаблоны» и нажмите кнопку «Настроить приложение» .
2. Нажмите «Создать новое приложение» .
3. Настройте приложение:
   • Название приложения : cymbal-london-concierge
   • Проект развертывания : Идентификатор вашего проекта
   • Регион : us-central1
   • Входные атрибуты > Среда : Development
   • Входные атрибуты > Критичность : Low
4. Нажмите «Создать приложение» . Для развертывания в производственной среде выберите «Производство» в качестве среды и «Высокая» в качестве критичности. Эти теги помогут вашим SRE-специалистам и команде эксплуатации сортировать и расставлять приоритеты в работе над любыми возникающими проблемами.
5. Это должно открыть страницу с подробными сведениями о развертывании и шаблоном приложения. Поскольку это всего лишь шаблон, нам все равно необходимо добавить конфигурацию, специфичную для нашего приложения.
6. Давайте настроим интерфейс. Нажмите на компонент интерфейса .
   1. Нажмите «Контейнеры» > «Редактировать контейнер» .
   2. Нам необходимо заменить стандартный образ контейнера на тот, который мы хотим использовать для нашего приложения.
   3. Установите образ контейнера на: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/frontend:codelab-c2c6-v1
   4. Установите порт http1 на 80 .
   5. Установите следующие переменные среды :
      • API_BASE_URL : module.cloud-run-2.service_uri (убедитесь, что cloud-run-2 — это имя компонента бэкэнда агента; если нет, замените его фактическим именем компонента)
   6. Нажмите « Сохранить ».
7. Давайте настроим бэкэнд агента. Щёлкните по компоненту agent-backend .
   1. Нажмите «Контейнеры» > «Редактировать контейнер» .
   2. Нам необходимо заменить стандартный образ контейнера на тот, который мы хотим использовать для нашего приложения.
   3. Установите образ контейнера на: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/agent:codelab-c2c6-v1
   4. Установите следующие переменные среды :
   5. GOOGLE_CLOUD_PROJECT :
   6. GOOGLE_CLOUD_LOCATION : us-central1
   7. DATA_BACKEND_URL : module.cloud-run-1.service_uri (убедитесь, что cloud-run-1 — это имя компонента сервера Data MCP; если нет, замените его фактическим именем компонента)
   8. Установите порт http1 на 8000 .
   9. Нажмите « Сохранить ».
8. Давайте настроим сервер DataMCP. Щёлкните по компоненту data-mcp-server .
   1. Нажмите «Контейнеры» > «Редактировать контейнер» .
   2. Нам необходимо заменить стандартный образ контейнера на тот, который мы хотим использовать для нашего приложения.
   3. Установите образ контейнера следующим образом: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/data_mcp:codelab-c2c6-v1
   4. Установите следующие переменные среды :
   5. GOOGLE_CLOUD_PROJECT :
   6. GOOGLE_CLOUD_LOCATION : us-central1
   7. DB_TYPE : sqlite
   8. EMBEDDING_MODEL : text-embedding-005
   9. Установите порт http1 на 8002 .
   10. Нажмите « Сохранить ».
   В реальных производственных условиях вам также потребуется настроить базу данных, например CloudSQL или AlloyDB , и указать строку подключения к серверу MCP. Но для этой лабораторной работы мы будем использовать базу данных в оперативной памяти. Кроме того, вам нужно будет сделать сервер MCP и базу данных приватными и доступными только из бэкэнда агента или из сети.
9. Нажмите на кнопку «Код» в верхней части страницы, чтобы просмотреть код Terraform для приложения. Вы также можете загрузить код Terraform для приложения, нажав на кнопку «Получить код» , чтобы сохранить его в своей кодовой базе.
10. Для развертывания приложения нажмите кнопку « Развернуть» в правом верхнем углу страницы.
11. На странице развертывания вам будет предложено создать учетную запись службы для конвейера развертывания или выбрать существующую. Нажмите «Создать учетную запись службы» (имя будет заполнено автоматически), а затем «Продолжить» . Создание новой учетной записи службы займет несколько секунд.

12. После создания учетной записи службы страница обновится, и вы увидите кнопку «Выберите учетную запись службы» с галочкой рядом с ней.

13. Затем нажмите кнопку «Развернуть» внизу страницы.
14. Процесс займет несколько минут. После завершения развертывания рядом с каждым компонентом появится зеленая галочка. Вы также можете проверить статус развертывания, нажав кнопку «Ссылка на журналы» , которая откроет журналы Cloud Build. Для появления кнопки может потребоваться несколько минут.

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

15. Вы можете просмотреть журналы Cloud Build, чтобы узнать статус развертывания или наличие ошибок, которые могут возникнуть во время развертывания приложения. Вы также можете перейти непосредственно к журналам Cloud Build, выполнив поиск Cloud Build в консоли Google Cloud и нажав на «История» . Развертывание приложения займет около 5-8 минут.

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

16. После завершения развертывания рядом с полем «Статус развертывания» появится зеленая галочка.

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

7. Проверьте заявку.

Давайте проверим, работает ли агент. В разделе «Выходные данные» на странице сведений о развертывании вы увидите URL-адрес компонента внешнего интерфейса. Скопируйте этот URL-адрес и вставьте его в браузер. Убедитесь, что вы используете HTTP , а не HTTPS . Также примите во внимание любые предупреждения, которые могут появиться в браузере, поскольку внешний интерфейс использует HTTP.

Пообщайтесь с приложением и попросите его составить маршрут поездки в Лондон.

8. Центр приложений и мониторинг приложений

1. В консоли ADC нажмите кнопку « Просмотреть приложение в App Hub» в правом верхнем углу страницы.

2. Это откроет приложение в App Hub. App Hub — это централизованное место для просмотра и управления всеми вашими приложениями, позволяющее перейти от ресурсоориентированного подхода к подходу, ориентированному на приложения . Создание приложения с помощью ADC автоматически создает приложение в App Hub. Здесь вы должны увидеть все рабочие нагрузки и сервисы, составляющие приложение. Вместо того чтобы рассматривать ресурсы в облаке как отдельные ресурсы, вы можете рассматривать их как часть единого приложения, что упрощает управление и контроль.

3. Нажмите кнопку « Просмотреть в Observability» . Это откроет приложение в консоли Observability.
4. Откройте панель мониторинга . Панель мониторинга предоставляет обзор производительности и состояния приложения, отображая такие метрики, как 4 основных показателя: частота запросов, частота ошибок, задержка и насыщение. Этот мониторинг, ориентированный на приложение, имеет решающее значение для поддержания надежности. Вы также можете просматривать журналы и трассировки приложения, что позволяет сопоставлять сигналы и выявлять узкие места. Это особенно важно в сложных агентных приложениях, подобных этому, где медленные ответы от Vertex AI или сервера Data MCP могут ухудшить пользовательский опыт.

5. Управляемое исследование : Задайте агенту конкретный вопрос в приложении (например, «Какие лучшие места для посещения в Лондоне?»). Затем вернитесь в консоль Observability и просмотрите список трассировок . Найдите трассировку, соответствующую вашему запросу. Щелкните по ней, чтобы увидеть подробное представление в виде водопада. Обратите внимание, как вы можете увидеть время, затраченное на работу на стороне фронтенда, на стороне бэкенда агента и на вызовы к Vertex AI. Это позволяет точно определить, где возникает задержка.

9. Поздравляем!

Поздравляем! Вы развернули трехзвенную архитектуру приложения с использованием ADC.

Что вы узнали

• Как визуально собрать облачную архитектуру с помощью АЦП.
• Как настроить АЦП и включить API через пользовательский интерфейс.
• Как развернуть приложения с помощью ADC.
• Как использовать App Hub для ориентированного на приложение представления ваших ресурсов.
• Как отслеживать состояние приложений с помощью панели мониторинга.

Справочная документация

• Документация по АЦП
• Документация App Hub
• Мониторинг приложений