Triển khai ứng dụng nhanh chóng bằng Application Design Center

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ tìm hiểu cách triển khai một ứng dụng full-stack bằng Application Design Center (ADC) của Google Cloud. Bạn sẽ triển khai ứng dụng "The Cymbal London Concierge", bao gồm một giao diện người dùng Vue 3, một phần phụ trợ FastAPI và một máy chủ MCP lưu giữ dữ liệu cho ứng dụng.

ADC cho phép bạn xác định trực quan cấu trúc ứng dụng và triển khai cấu trúc đó dưới dạng một đơn vị duy nhất, tự động quản lý các phần phụ thuộc và kết nối.

Bạn sẽ thực hiện

• Thiết lập Trung tâm thiết kế ứng dụng.
• Tập hợp các thành phần ứng dụng một cách trực quan.
• Triển khai cấu trúc ứng dụng.
• Xác minh ứng dụng đang chạy.
• Xác minh rằng ứng dụng đã được đăng ký với App Hub.
• Xác minh các chỉ số, dấu vết và nhật ký của ứng dụng trong tính năng Giám sát ứng dụng.

Bạn cần có

• Một trình duyệt web như Chrome.
• Một dự án trên Google Cloud đã bật tính năng thanh toán.

Lớp học lập trình này dành cho nhà phát triển ở mọi cấp độ, kể cả người mới bắt đầu.

Thời lượng ước tính: 45 phút Chi phí ước tính: Dưới 2 USD

2. Thiết lập

Thiết lập dự án

Tạo một dự án trên Google Cloud

1. Trong Google Cloud Console, trên trang chọn dự án, hãy chọn hoặc tạo một dự án trên Google Cloud.
2. Đảm bảo rằng bạn đã bật tính năng thanh toán cho dự án trên Cloud. Tìm hiểu cách kiểm tra xem tính năng thanh toán có được bật trên một dự án hay không.

Khởi động Cloud Shell

Cloud Shell là một môi trường dòng lệnh chạy trong Google Cloud và được tải sẵn các công cụ cần thiết.

1. Nhấp vào Kích hoạt Cloud Shell ở đầu bảng điều khiển Cloud.
2. Sau khi kết nối với Cloud Shell, hãy xác minh thông tin xác thực của bạn:

   gcloud auth list
   

3. Xác nhận rằng dự án của bạn đã được định cấu hình:

   gcloud config get project
   

4. Nếu dự án của bạn không được thiết lập như mong đợi, hãy thiết lập dự án:

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

3. Thiết lập Trung tâm thiết kế ứng dụng

Trước khi có thể lắp ráp ứng dụng, bạn cần thiết lập không gian làm việc trong ADC.

1. Trong Google Cloud Console, hãy tìm kiếm Application Design Center (Trung tâm thiết kế ứng dụng) rồi chuyển đến đó.
2. Nếu đây là lần đầu tiên sử dụng ADC trong dự án này, bạn sẽ thấy một màn hình thiết lập.
3. Nhấp vào Chuyển đến phần Thiết lập.

4. Bạn sẽ được nhắc bật các API bắt buộc nếu chưa bật. Nhấp vào Bật để tiếp tục.

4. Khám phá các tính năng của ADC

Trong nhiệm vụ này, bạn sẽ tìm hiểu các thành phần cốt lõi của ADC: Không gian, Danh mục và Mẫu.

ADC Spaces

Không gian là nơi tạo mẫu và triển khai ứng dụng. Mỗi không gian thuộc về một dự án trên Google Cloud. ADC tạo một không gian mặc định trong quá trình thiết lập ban đầu, nhưng sau đó bạn có thể tự do tạo các không gian khác ở nhiều khu vực.

Để xem các không gian của bạn thông qua thiết bị đầu cuối, hãy thực hiện các bước sau:

1. Nhấp vào Open Editor (Mở trình chỉnh sửa) trên thanh công cụ Cloud Shell hoặc sử dụng thiết bị đầu cuối.
2. Chạy lệnh sau:

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

Bạn sẽ thấy một kết quả đầu ra có dạng như sau, cho biết rằng default-space có sẵn cho khu vực này.

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

5. Tạo mẫu

Trong bước này, bạn sẽ đảm nhận vai trò của một kỹ sư Nhóm nền tảng. Mục tiêu của bạn là tạo một mẫu có thể tái sử dụng, an toàn và tuân thủ cho các ứng dụng dựa trên tác nhân trong tổ chức của bạn. Bạn sẽ thêm các thành phần và định cấu hình các hạn chế để đảm bảo rằng mọi ứng dụng được triển khai từ mẫu này đều tuân thủ các chính sách về đám mây của công ty.

1. Tạo một thiết kế mới

1. Trong bảng điều khiển ADC, hãy nhấp vào Templates > Create Template (Mẫu > Tạo mẫu).
2. Đặt tên cho mẫu simple-3-tier-agentic-app vì mẫu này sẽ được dùng để triển khai ứng dụng Cymbal London Concierge và các ứng dụng tương tự khác.

2. Thêm Máy chủ MCP dữ liệu

Thành phần này xử lý các hoạt động tương tác với cơ sở dữ liệu và tìm kiếm vectơ.

1. Nhấp vào Add Component (Thêm thành phần) > Cloud Run (Service) (Cloud Run (Dịch vụ)). Nếu nhấp vào thành phần đó, bạn sẽ thấy mã thành phần ở góc trên cùng bên phải. Giá trị này sẽ có dạng cloud-run-1. Chúng ta có thể thay đổi thành data-mcp-server bằng cách chỉnh sửa trong chế độ xem mã (sẽ thảo luận sau), nhưng hãy cứ để nguyên như vậy.
2. Nhập Tên dịch vụ: data-mcp-server.
3. Trong phần Hiển thị các chế độ cài đặt nâng cao, hãy đặt Thành viên thành: allUsers. (Lưu ý: Trong môi trường phát hành công khai, bạn có thể sẽ hạn chế điều này, nhưng chúng tôi sử dụng nó ở đây để đơn giản hoá lớp học lập trình.)
4. Trong phần Hiển thị chế độ cài đặt nâng cao, hãy đặt VPC ACCESS, đặt Egress thành: PRIVATE_RANGES_ONLY.
5. Bạn có thể bỏ chọn Bật Prometheus Sidecar trong mục Hiện các chế độ cài đặt nâng cao.
6. Nhấp vào Lưu.

3. Thêm phần phụ trợ của tác nhân

Đây là ứng dụng FastAPI điều phối hành vi của tác nhân.

1. Nhấp vào Add Component (Thêm thành phần) > Cloud Run (Service) (Cloud Run (Dịch vụ)).
2. Đặt tên tệp này là agent-backend.
3. Trong mục Hiện các trường nâng cao, hãy đánh dấu vào Tạo tài khoản dịch vụ rồi thêm từng vai trò sau đây trong mục Vai trò dự án của tài khoản dịch vụ:
   • roles/monitoring.metricWriter
   • roles/logging.logWriter
   • roles/cloudtrace.agent
   • roles/telemetry.writer
   • roles/serviceusage.serviceUsageConsumer. Các vai trò này sẽ cho phép tác nhân sử dụng Cloud Monitoring, Cloud Logging và Cloud Trace. Cấu hình tuân thủ: Nhóm nền tảng thực thi nguyên tắc về đặc quyền tối thiểu bằng cách liệt kê rõ ràng các vai trò bắt buộc.
   
4. Trong phần Hiển thị các chế độ cài đặt nâng cao, hãy đặt Thành viên thành: allUsers.
5. Trong phần Hiển thị chế độ cài đặt nâng cao, hãy đặt VPC ACCESS, đặt Egress thành: PRIVATE_RANGES_ONLY.
6. Bạn có thể bỏ chọn Bật Prometheus Sidecar trong mục Hiện các chế độ cài đặt nâng cao.
7. Kết nối agent-backend với data-mcp-server bằng cách kéo một đường kết nối từ agent-backend đến data-mcp-server.
8. Nhấp vào Lưu.

4. Thêm giao diện người dùng

Giao diện người dùng.

1. Nhấp vào Add Component (Thêm thành phần) > Cloud Run (Service) (Cloud Run (Dịch vụ)).
2. Nhập Tên dịch vụ: frontend.
3. Trong mục Hiện các chế độ cài đặt nâng cao, hãy bỏ đánh dấu Tạo tài khoản dịch vụ
4. Trong phần Hiển thị chế độ cài đặt nâng cao, hãy đặt Ingress thành: INGRESS_TRAFFIC_INTERNAL_LOADBALANCER. Cấu hình tuân thủ: Quyền truy cập trực tiếp của người dùng vào vùng chứa giao diện người dùng bị chặn, buộc lưu lượng truy cập phải đi qua bộ cân bằng tải.
5. Trong phần Hiển thị chế độ cài đặt nâng cao, hãy đặt Thành viên thành: allUsers.
6. Bạn có thể bỏ chọn Bật Prometheus Sidecar trong mục Hiện các chế độ cài đặt nâng cao.
7. Nhấp vào Lưu.
8. Kết nối frontend với agent-backend bằng cách kéo một đường kết nối từ frontend đến agent-backend.

5. Thêm một thành phần Vertex AI

1. Nhấp vào Thêm thành phần > Vertex AI.
2. Đặt tên tệp này là vertex-ai.
3. Kết nối vertex-ai với agent-backend và data-mcp-server bằng cách kéo 2 kết nối từ vertex-ai đến agent-backend và data-mcp-server tương ứng. Các vai trò aiplatform.user sẽ được chỉ định cho tài khoản dịch vụ của agent-backend và data-mcp-server do chúng được kết nối với thành phần Vertex AI.

6. Thêm Trình cân bằng tải toàn cầu

Bộ cân bằng tải sẽ hiển thị giao diện người dùng cho mạng Internet công cộng. Trong ADC, thành phần này được chia thành một thành phần Phụ trợ và một thành phần Giao diện người dùng.

A. Thêm phần phụ trợ của Trình cân bằng tải

1. Nhấp vào **Add Component (Thêm thành phần) > Global Cloud Load Balancing (Backend) (Cân bằng tải trên đám mây toàn cầu (Phụ trợ)).
2. Đặt tên tệp này là galb-backend.
3. Nhấp vào Add Connection (Thêm đường kết nối) rồi kết nối với frontend.

B. Thêm giao diện người dùng của Trình cân bằng tải

1. Nhấp vào **Thêm thành phần > Cloud Load Balancing toàn cầu (Giao diện người dùng).
2. Đặt tên tệp này là galb-frontend.
3. Nhấp vào Add Connection (Thêm đường kết nối) rồi kết nối với galb-backend.
4. Kết nối galb-frontend với galb-backend bằng cách kéo một đường kết nối từ galb-frontend đến galb-backend.

Chia sẻ mẫu trong danh mục

Danh mục cho phép bạn chia sẻ các mẫu ứng dụng trên nhiều Không gian, giúp bạn quản lý kiến trúc. Danh mục đóng vai trò là kho lưu trữ trung tâm cho các mẫu do nhóm nền tảng tạo và phê duyệt để chia sẻ. Việc chia sẻ danh mục giữa các không gian giúp bạn không phải tốn công cho các dự án chung và rút ngắn thời gian khởi động.

Bây giờ, hãy thêm mẫu vào danh mục:

1. Nhấp vào thẻ Danh mục.
2. Nhấp vào Thêm mẫu rồi chọn mẫu simple-3-tier-agentic-app.
3. Nhấp vào Thêm vào danh mục.

Bạn có thể tìm thấy mẫu ở 3 vị trí: Mẫu của Google (các mẫu được xác định trước), Mẫu được chia sẻ (được chia sẻ trong tổ chức của bạn) và Mẫu (các bản thiết kế tuỳ chỉnh trong không gian của bạn).

6. Triển khai ứng dụng

Giờ là lúc bạn đóng vai trò một nhà phát triển ứng dụng muốn sử dụng mẫu này để triển khai ứng dụng cymbal-london-concierge.

1. Trong bảng điều khiển ADC, hãy mở lại mẫu trong thẻ Mẫu rồi nhấp vào nút Định cấu hình ứng dụng.
2. Nhấp vào Tạo ứng dụng mới.
3. Định cấu hình Ứng dụng:
   • Tên ứng dụng: cymbal-london-concierge
   • Dự án triển khai: Mã dự án của bạn
   • Khu vực: us-central1
   • Thuộc tính đầu vào>Môi trường: Development
   • Thuộc tính đầu vào>Mức độ quan trọng: Low
4. Nhấp vào Tạo ứng dụng.Đối với việc triển khai phát hành công khai, bạn sẽ chọn "Phát hành công khai" cho Môi trường và "Cao" cho Mức độ nghiêm trọng. Đây là những thẻ sẽ giúp nhóm SRE và nhóm vận hành của bạn sắp xếp và ưu tiên công việc đối với mọi vấn đề xảy ra.
5. Thao tác này sẽ mở trang thông tin chi tiết về việc triển khai bằng mẫu ứng dụng. Vì đây chỉ là một mẫu, nên chúng ta vẫn cần thêm cấu hình dành riêng cho ứng dụng của mình.
6. Hãy định cấu hình giao diện người dùng. Nhấp vào thành phần frontend.
   1. Nhấp vào Vùng chứa > Chỉnh sửa vùng chứa.
   2. Chúng ta cần thay thế hình ảnh vùng chứa chung bằng hình ảnh mà chúng ta muốn dùng cho ứng dụng của mình.
   3. Đặt Hình ảnh vùng chứa thành: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/frontend:codelab-c2c6-v1
   4. Đặt cổng http1 thành 80.
   5. Đặt các Biến môi trường sau:
      • API_BASE_URL: module.cloud-run-2.service_uri (đảm bảo rằng cloud-run-2 là tên của thành phần phụ trợ tác nhân, nếu không, hãy thay thế bằng tên thực tế của thành phần)
   6. Nhấp vào Lưu.
7. Hãy định cấu hình phần phụ trợ của tác nhân. Nhấp vào thành phần agent-backend.
   1. Nhấp vào Vùng chứa > Chỉnh sửa vùng chứa.
   2. Chúng ta cần thay thế hình ảnh vùng chứa chung bằng hình ảnh mà chúng ta muốn dùng cho ứng dụng của mình.
   3. Đặt Hình ảnh vùng chứa thành: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/agent:codelab-c2c6-v1
   4. Đặt các Biến môi trường sau:
   5. GOOGLE_CLOUD_PROJECT:
   6. GOOGLE_CLOUD_LOCATION: us-central1
   7. DATA_BACKEND_URL: module.cloud-run-1.service_uri (đảm bảo rằng cloud-run-1 là tên của thành phần máy chủ mcp dữ liệu, nếu không, hãy thay thế bằng tên thực tế của thành phần)
   8. Đặt cổng http1 thành 8000.
   9. Nhấp vào Lưu.
8. Hãy định cấu hình máy chủ MCP dữ liệu. Nhấp vào thành phần data-mcp-server.
   1. Nhấp vào Vùng chứa > Chỉnh sửa vùng chứa.
   2. Chúng ta cần thay thế hình ảnh vùng chứa chung bằng hình ảnh mà chúng ta muốn dùng cho ứng dụng của mình.
   3. Đặt Hình ảnh vùng chứa thành: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/data_mcp:codelab-c2c6-v1
   4. Đặt các Biến môi trường sau:
   5. GOOGLE_CLOUD_PROJECT:
   6. GOOGLE_CLOUD_LOCATION: us-central1
   7. DB_TYPE: sqlite
   8. EMBEDDING_MODEL: text-embedding-005
   9. Đặt cổng http1 thành 8002.
   10. Nhấp vào Lưu.
   Trong trường hợp sản xuất thực tế, bạn cũng sẽ định cấu hình một cơ sở dữ liệu như CloudSQL hoặc AlloyDB và cung cấp chuỗi kết nối cơ sở dữ liệu cho máy chủ mcp dữ liệu. Nhưng đối với lớp học lập trình này, chúng ta sẽ sử dụng cơ sở dữ liệu trong bộ nhớ. Bạn cũng sẽ đặt máy chủ mcp và cơ sở dữ liệu ở chế độ riêng tư và chỉ có thể truy cập từ phần phụ trợ của tác nhân hoặc từ bên trong mạng.
9. Nhấp vào nút Code (Mã) ở đầu trang để xem mã terraform cho ứng dụng. Bạn cũng có thể tải mã terraform cho ứng dụng xuống bằng cách nhấp vào nút Lấy mã để lưu trữ mã đó trong cơ sở mã của bạn.
10. Nhấp vào nút Triển khai ở góc trên cùng bên phải của trang để triển khai ứng dụng.
11. Trang triển khai sẽ yêu cầu bạn tạo một tài khoản dịch vụ cho quy trình triển khai hoặc chọn một tài khoản hiện có. Nhấp vào Tạo tài khoản dịch vụ (hệ thống sẽ tự động điền tên) rồi nhấp vào Tiếp tục. Quá trình này sẽ mất vài giây để tạo một tài khoản dịch vụ mới.

12. Sau khi bạn tạo tài khoản dịch vụ, trang sẽ làm mới và bạn sẽ thấy tài khoản dịch vụ được chọn có dấu đánh dấu bên cạnh.

13. Sau đó, nhấp vào Triển khai ở cuối trang.
14. Quá trình này sẽ mất vài phút để hoàn tất. Sau khi quá trình triển khai hoàn tất, bạn sẽ thấy dấu kiểm màu xanh lục bên cạnh từng thành phần. Bạn cũng có thể kiểm tra trạng thái triển khai bằng cách nhấp vào nút Link to logs (Đường liên kết đến nhật ký). Nút này sẽ mở nhật ký bản dựng trên đám mây. Có thể mất vài phút thì nút này mới xuất hiện.

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

15. Bạn có thể xem nhật ký bản dựng trên đám mây để biết trạng thái triển khai hoặc nếu có lỗi nào có thể xảy ra trong khi triển khai ứng dụng. Bạn cũng có thể chuyển trực tiếp đến nhật ký bản dựng trên đám mây bằng cách tìm kiếm Cloud Build trong bảng điều khiển Google Cloud rồi nhấp vào Nhật ký. Quá trình triển khai ứng dụng sẽ mất khoảng 5 đến 8 phút.

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

16. Sau khi quá trình triển khai hoàn tất, bạn sẽ thấy dấu kiểm màu xanh lục bên cạnh trường Trạng thái triển khai.

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

7. Xác minh ứng dụng

Hãy kiểm tra xem tác nhân có đang hoạt động hay không. Trong phần outputs (đầu ra) của trang thông tin chi tiết triển khai, bạn sẽ thấy URL của thành phần giao diện người dùng. Sao chép URL đó rồi dán vào trình duyệt. Đảm bảo bạn sử dụng http chứ không phải https. Ngoài ra, hãy chấp nhận mọi cảnh báo mà bạn có thể nhận được trong trình duyệt vì giao diện người dùng đang sử dụng http.

Trò chuyện với ứng dụng và yêu cầu ứng dụng tạo hành trình cho chuyến đi đến London.

8. App Hub và tính năng Giám sát ứng dụng

1. Trong bảng điều khiển ADC, hãy nhấp vào nút Xem ứng dụng trong App Hub ở góc trên cùng bên phải của trang.

2. Thao tác này sẽ mở ứng dụng trong App Hub. App Hub là một nơi tập trung để xem và quản lý tất cả các ứng dụng của bạn, giúp bạn chuyển từ chế độ xem tập trung vào tài nguyên sang chế độ xem tập trung vào ứng dụng. Việc tạo một ứng dụng bằng ADC sẽ tự động tạo một ứng dụng trong App Hub. Bạn sẽ thấy tất cả các khối lượng công việc và dịch vụ tạo nên ứng dụng được liệt kê tại đây. Thay vì xem các tài nguyên trên đám mây dưới dạng tài nguyên riêng lẻ, bạn có thể xem chúng như một phần của một ứng dụng duy nhất, giúp đơn giản hoá việc quản lý và quản trị.

3. Nhấp vào nút Xem trong phần Khả năng quan sát. Thao tác này sẽ mở ứng dụng trong bảng điều khiển Khả năng quan sát.
4. Mở chế độ xem Trang tổng quan. Trang tổng quan cung cấp cho bạn thông tin tổng quan về hiệu suất và tình trạng của ứng dụng bằng cách cung cấp các chỉ số như 4 tín hiệu vàng: tỷ lệ yêu cầu, tỷ lệ lỗi, độ trễ và mức sử dụng. Hoạt động giám sát tập trung vào ứng dụng này là yếu tố quan trọng để duy trì độ tin cậy. Bạn cũng có thể xem Nhật ký và Dấu vết cho ứng dụng, cho phép bạn tương quan các tín hiệu và xác định chính xác các điểm tắc nghẽn. Điều này đặc biệt quan trọng trong một ứng dụng phức tạp như thế này, nơi các phản hồi chậm từ Vertex AI hoặc máy chủ Data MCP có thể làm giảm trải nghiệm người dùng.

5. Khám phá có hướng dẫn: Đặt cho trợ lý một câu hỏi cụ thể trong ứng dụng (ví dụ: "Những địa điểm nên tham quan ở Luân Đôn là gì?"). Sau đó, quay lại bảng điều khiển Khả năng ghi nhận và xem danh sách Dấu vết. Tìm dấu vết tương ứng với yêu cầu của bạn. Nhấp vào đó để xem chế độ xem thác nước chi tiết. Lưu ý cách bạn có thể xem thời gian đã sử dụng ở giao diện người dùng, phần phụ trợ của tác nhân và các lệnh gọi đến Vertex AI. Điều này giúp bạn xác định chính xác vị trí xảy ra độ trễ.

9. Xin chúc mừng

Xin chúc mừng! Bạn đã triển khai cấu trúc ứng dụng 3 tầng bằng cách sử dụng ADC.

Kiến thức bạn học được

• Cách lắp ráp trực quan một kiến trúc đám mây bằng ADC.
• Cách thiết lập ADC và bật API thông qua giao diện người dùng.
• Cách triển khai ứng dụng bằng ADC.
• Cách sử dụng App Hub để xem tài nguyên theo hướng tập trung vào ứng dụng.
• Cách theo dõi tình trạng ứng dụng bằng Trang tổng quan về khả năng ghi nhận.

Tài liệu tham khảo

• Tài liệu về ADC
• Tài liệu về App Hub
• Giám sát ứng dụng