Men-deploy Aplikasi dengan cepat menggunakan Application Design Center

1. Pengantar

Dalam codelab ini, Anda akan mempelajari cara men-deploy aplikasi full-stack menggunakan Pusat Desain Aplikasi (ADC) Google Cloud. Anda akan men-deploy aplikasi "The Cymbal London Concierge", yang mencakup frontend Vue 3, backend FastAPI, dan server MCP yang menyimpan data untuk aplikasi.

ADC memungkinkan Anda menentukan arsitektur aplikasi secara visual dan men-deploy-nya sebagai satu unit, dengan mengelola dependensi dan koneksi secara otomatis.

Yang akan Anda lakukan

  • Siapkan Application Design Center.
  • Merakit komponen aplikasi secara visual.
  • Deploy arsitektur aplikasi.
  • Verifikasi aplikasi yang sedang berjalan.
  • Pastikan aplikasi terdaftar di Pusat Aplikasi.
  • Verifikasi metrik, rekaman aktivitas, dan log aplikasi di Pemantauan Aplikasi.

Yang Anda butuhkan

  • Browser web seperti Chrome.
  • Project Google Cloud yang mengaktifkan penagihan.

Codelab ini ditujukan bagi developer dari semua level, termasuk para pemula.

Perkiraan Durasi: 45 menit Perkiraan Biaya: Kurang dari $2,00 USD

2. Penyiapan

Penyiapan project

Buat Project Google Cloud

  1. Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
  2. Pastikan penagihan diaktifkan untuk project Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project.

Mulai Cloud Shell

Cloud Shell adalah lingkungan command line yang berjalan di Google Cloud yang telah dilengkapi dengan alat yang diperlukan.

  1. Klik Activate Cloud Shell di bagian atas konsol Google Cloud.
  2. Setelah terhubung ke Cloud Shell, verifikasi autentikasi Anda:
    gcloud auth list
  3. Pastikan project Anda dikonfigurasi:
    gcloud config get project
  4. Jika project Anda tidak ditetapkan seperti yang diharapkan, tetapkan project:
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

3. Menyiapkan Application Design Center

Sebelum dapat merakit aplikasi, Anda harus menyiapkan ruang kerja di ADC.

  1. Di Konsol Google Cloud, telusuri Application Design Center, lalu buka.
  2. Jika ini pertama kalinya Anda menggunakan ADC dalam project ini, Anda akan melihat layar penyiapan.
  3. Klik Buka Penyiapan.

Menyiapkan Application Design Center

  1. Anda akan diminta untuk mengaktifkan API yang diperlukan jika belum diaktifkan. Klik Aktifkan untuk melanjutkan.

Mengaktifkan API

4. Mempelajari Fitur ADC

Dalam tugas ini, Anda akan mempelajari komponen inti ADC: Ruang, Katalog, dan Template.

Ruang ADC

Ruang adalah lokasi untuk membuat template dan men-deploy aplikasi. Setiap ruang termasuk dalam project Google Cloud. ADC membuat ruang default selama penyiapan awal, tetapi Anda dapat membuat ruang lain di region yang berbeda nanti.

Untuk melihat ruang Anda melalui terminal, lakukan langkah-langkah berikut:

  1. Klik Open Editor di toolbar Cloud Shell atau gunakan terminal.
  2. Jalankan perintah berikut:
gcloud alpha design-center spaces list \
--project="your PROJECT ID" \
--location=us-central1

Anda akan melihat output yang terlihat seperti ini yang menunjukkan bahwa default-space ada untuk region tersebut.

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

5. Menyusun Template

Pada langkah ini, Anda akan berperan sebagai engineer Tim Platform. Tujuan Anda adalah membuat template yang dapat digunakan kembali, aman, dan sesuai untuk aplikasi agentik di organisasi Anda. Anda akan menambahkan komponen dan mengonfigurasi batasan untuk memastikan bahwa aplikasi apa pun yang di-deploy dari template ini mematuhi kebijakan cloud perusahaan Anda.

1. Membuat Desain Baru

  1. Di konsol ADC, klik Templates > Create Template.
  2. Beri nama template Anda simple-3-tier-agentic-app karena template ini akan digunakan untuk men-deploy aplikasi Cymbal London Concierge, dan aplikasi serupa lainnya.Buat Template

2. Menambahkan Server MCP Data

Komponen ini menangani interaksi database dan penelusuran vektor.

  1. Klik Tambahkan Komponen > Cloud Run (Layanan). Jika Anda mengklik komponen tersebut, Anda akan melihat component id di pojok kanan atas. URL tersebut akan memiliki format cloud-run-1. Kita dapat mengubahnya menjadi data-mcp-server, dengan mengeditnya di tampilan kode (dibahas nanti), tetapi biarkan saja seperti itu.Tambahkan Komponen
  2. Masukkan Nama Layanan: data-mcp-server.
  3. Di bagian Tampilkan setelan lanjutan, Setel Anggota ke: allUsers. (Catatan: Di lingkungan produksi, Anda mungkin akan membatasi hal ini, tetapi kami menggunakannya di sini agar codelab lebih sederhana.)
  4. Di bagian Tampilkan setelan lanjutan, Tetapkan VPC ACCESS, tetapkan Egress ke: PRIVATE_RANGES_ONLY.
  5. Atau, di bagian Tampilkan setelan lanjutan, hapus centang Aktifkan Sidecar Prometheus.Akses VPC
  6. Klik Simpan.

3. Tambahkan Backend Agen

Ini adalah aplikasi FastAPI yang mengorkestrasi perilaku agentic.

  1. Klik Tambahkan Komponen > Cloud Run (Layanan).
  2. Beri nama agent-backend.
  3. Di bagian Tampilkan kolom lanjutan, centang Buat Akun Layanan dan tambahkan peran berikut di bagian Peran Project Akun Layanan satu per satu:
    • roles/monitoring.metricWriter
    • roles/logging.logWriter
    • roles/cloudtrace.agent
    • roles/telemetry.writer
    • roles/serviceusage.serviceUsageConsumer. Peran ini akan memungkinkan agen menggunakan Cloud Monitoring, Cloud Logging, dan Cloud Trace. Konfigurasi Kepatuhan: Tim platform menerapkan prinsip hak istimewa terendah dengan mencantumkan peran yang diperlukan secara eksplisit.
    Peran
  4. Di bagian Tampilkan setelan lanjutan, Setel Anggota ke: allUsers.
  5. Di bagian Tampilkan setelan lanjutan, Tetapkan VPC ACCESS, tetapkan Egress ke: PRIVATE_RANGES_ONLY.
  6. Atau, di bagian Tampilkan setelan lanjutan, hapus centang Aktifkan Prometheus Sidecar.
  7. Hubungkan agent-backend ke data-mcp-server, dengan menarik koneksi dari agent-backend ke data-mcp-server.
  8. Klik Simpan.

4. Tambahkan Frontend

UI frontend.

  1. Klik Tambahkan Komponen > Cloud Run (Layanan).
  2. Masukkan Nama Layanan: frontend.
  3. Di bagian Tampilkan setelan lanjutan, hapus centang pada Buat Akun Layanan.
  4. Di bagian Tampilkan setelan lanjutan, Setel Ingress ke: INGRESS_TRAFFIC_INTERNAL_LOADBALANCER. Konfigurasi Kepatuhan: Akses publik langsung ke container frontend diblokir, sehingga traffic harus melalui load balancer.
  5. Di bagian Tampilkan setelan lanjutan, Setel Anggota ke: allUsers.Frontend
  6. Atau, di bagian Tampilkan setelan lanjutan, hapus centang Aktifkan Prometheus Sidecar.
  7. Klik Simpan.
  8. Hubungkan frontend ke agent-backend, dengan menarik koneksi dari frontend ke agent-backend.

5. Menambahkan komponen Vertex AI

  1. Klik Tambahkan Komponen > Vertex AI.
  2. Beri nama vertex-ai.
  3. Hubungkan ke agent-backend dan data-mcp-server dengan menarik dua koneksi dari vertex-ai ke agent-backend dan data-mcp-server. Peran aiplatform.user akan ditetapkan ke akun layanan agent-backend dan data-mcp-server karena akun layanan tersebut terhubung ke komponen Vertex AI.

6. Tambahkan Load Balancer Global

Load Balancer mengekspos frontend Anda ke internet publik. Di ADC, hal ini dibagi menjadi komponen Backend dan Frontend.

A. Tambahkan Backend Load Balancer

  1. Klik **Tambahkan Komponen > Global Cloud Load Balancing (Backend).
  2. Beri nama galb-backend.
  3. Klik Add Connection dan hubungkan ke frontend.

B. Menambahkan Frontend Load Balancer

  1. Klik **Add Component > Global Cloud Load Balancing (Frontend).
  2. Beri nama galb-frontend.
  3. Klik Add Connection dan hubungkan ke galb-backend.
  4. Hubungkan galb-frontend ke galb-backend, dengan menarik koneksi dari galb-frontend ke galb-backend.

Template Aplikasi

Membagikan Template di Katalog

Katalog memungkinkan Anda membagikan template aplikasi di berbagai Ruang, sehingga memungkinkan tata kelola arsitektur. Katalog berfungsi sebagai repositori pusat untuk template yang dibuat dan disetujui untuk dibagikan oleh tim platform. Berbagi katalog antar-ruang menghindari upaya duplikat untuk project umum, dan mempercepat waktu mulai.

Sekarang, tambahkan template Anda ke katalog:

  1. Klik tab Katalog.
  2. Klik Add Templates, lalu pilih template simple-3-tier-agentic-app.
  3. Klik Tambahkan ke Katalog.Tambahkan ke Katalog

Anda dapat menemukan template di tiga lokasi: Template Google (pola standar), Template Bersama (dibagikan di seluruh organisasi Anda), dan Template (cetak biru kustom di ruang Anda).

6. Men-deploy Aplikasi

Sekarang saatnya berperan sebagai developer aplikasi yang ingin menggunakan template ini untuk men-deploy aplikasi cymbal-london-concierge.

  1. Di konsol ADC, buka kembali template di tab Templates, lalu klik tombol Configure app.Mengonfigurasi aplikasi
  2. Klik Create new application.
  3. Konfigurasi Aplikasi:
    • Nama Aplikasi: cymbal-london-concierge
    • Deployment project: Project ID Anda
    • Region: us-central1
    • Atribut Input>Lingkungan: Development
    • Atribut Input>Kekritisan: Low
  4. Klik Create Application.Untuk deployment produksi, Anda akan memilih 'Production' untuk Environment dan 'High' untuk Criticality. Tag ini akan membantu tim SRE dan operasi Anda mengurutkan dan memprioritaskan pekerjaan terkait masalah yang terjadi.
  5. Tindakan ini akan membuka halaman detail deployment dengan template aplikasi. Mengingat ini hanyalah template, kita masih perlu menambahkan konfigurasi yang khusus untuk aplikasi kita.
  6. Mari kita konfigurasi frontend. Klik komponen frontend.
    1. Klik Containers > Edit Container.
    2. Kita perlu mengganti image container umum dengan image yang ingin kita gunakan untuk aplikasi.
    3. Tetapkan Container Image ke: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/frontend:codelab-c2c6-v1Mengubah Image Container
    4. Tetapkan port http1 ke 80.
    5. Tetapkan Variabel Lingkungan berikut:
      • API_BASE_URL: module.cloud-run-2.service_uri (pastikan cloud-run-2 adalah nama komponen backend agen, jika tidak, ganti dengan nama komponen yang sebenarnya)
    6. Klik Simpan.
  7. Mari kita konfigurasi backend agen. Klik komponen agent-backend.
    1. Klik Containers > Edit Container.
    2. Kita perlu mengganti image container umum dengan image yang ingin kita gunakan untuk aplikasi.
    3. Tetapkan Image Container ke: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/agent:codelab-c2c6-v1
    4. Tetapkan Variabel Lingkungan berikut:
    5. GOOGLE_CLOUD_PROJECT:
    6. GOOGLE_CLOUD_LOCATION: us-central1
    7. DATA_BACKEND_URL: module.cloud-run-1.service_uri (pastikan cloud-run-1 adalah nama komponen server mcp data, jika tidak, ganti dengan nama komponen yang sebenarnya)
    8. Tetapkan port http1 ke 8000.
    9. Klik Simpan.
  8. Mari kita konfigurasi server mcp data. Klik komponen data-mcp-server.
    1. Klik Containers > Edit Container.
    2. Kita perlu mengganti image container umum dengan image yang ingin kita gunakan untuk aplikasi.
    3. Tetapkan Image Container ke: us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/data_mcp:codelab-c2c6-v1
    4. Tetapkan Variabel Lingkungan berikut:
    5. GOOGLE_CLOUD_PROJECT:
    6. GOOGLE_CLOUD_LOCATION: us-central1
    7. DB_TYPE: sqlite
    8. EMBEDDING_MODEL: text-embedding-005
    9. Tetapkan port http1 ke 8002.
    10. Klik Simpan.
    Dalam skenario produksi yang sebenarnya, Anda juga akan mengonfigurasi database seperti CloudSQL atau AlloyDB dan memberikan string koneksi database untuk server MCP data. Namun, untuk lab ini, kita akan menggunakan database dalam memori. Anda juga akan membuat server mcp dan database bersifat pribadi dan hanya dapat diakses dari backend agen, atau dari dalam jaringan.
  9. Klik tombol Code di bagian atas halaman untuk melihat kode terraform aplikasi. Anda juga dapat mendownload kode terraform untuk aplikasi dengan mengklik tombol Get Code untuk menyimpannya di basis kode Anda.Template Aplikasi
  10. Klik tombol Deploy di sudut kanan atas halaman untuk men-deploy aplikasi.
  11. Halaman deployment akan meminta Anda membuat akun layanan untuk pipeline deployment atau memilih akun yang sudah ada. Klik Create Service Account (nama akan diisi otomatis), lalu klik Proceed. Pembuatan akun layanan baru ini akan memakan waktu beberapa detik.

Buat Akun Layanan

  1. Setelah akun layanan dibuat, halaman akan dimuat ulang dan Anda akan melihat Pilih Akun Layanan dengan tanda centang di sebelahnya.

Akun Layanan Dibuat

  1. Kemudian, klik Deploy di bagian bawah halaman.
  2. Proses ini akan memerlukan waktu beberapa menit. Setelah deployment selesai, Anda akan melihat tanda centang hijau di samping setiap komponen. Anda juga dapat memeriksa status deployment dengan mengklik tombol Link ke log yang akan membuka log build cloud. Mungkin perlu waktu beberapa menit agar tombol muncul.
![Deployment Logs](./img/10b_logs.png)
  1. Anda dapat melihat log build cloud untuk melihat status deployment atau jika ada error yang mungkin terjadi saat men-deploy aplikasi. Anda juga dapat langsung membuka log Cloud Build dengan menelusuri Cloud Build di Konsol Google Cloud, lalu mengklik History. Aplikasi akan memerlukan waktu sekitar 5-8 menit untuk di-deploy.
![Cloud Build](./img/10c_cloudbuild.png)
  1. Setelah deployment selesai, Anda akan melihat tanda centang hijau di samping kolom Status deployment.
![Deployment Complete](./img/11_deployed.png)

7. Verifikasi Aplikasi

Mari kita uji apakah agen aktif. Di bagian outputs pada halaman detail deployment, Anda akan melihat URL komponen frontend. Salin URL tersebut dan tempelkan di browser Anda. Pastikan Anda menggunakan http, bukan https. Terima juga peringatan apa pun yang mungkin Anda dapatkan di browser karena frontend menggunakan http.

Mulai percakapan dengan aplikasi dan minta aplikasi tersebut membuat itinerari untuk perjalanan ke London.

Frontend

8. App Hub dan Pemantauan Aplikasi

  1. Di konsol ADC, klik tombol Lihat aplikasi di App Hub di sudut kanan atas halaman.

Hub Aplikasi

  1. Tindakan ini akan membuka aplikasi di Hub Aplikasi. App Hub adalah tempat terpusat untuk melihat dan mengelola semua aplikasi Anda, sehingga Anda dapat beralih dari tampilan yang berfokus pada resource ke tampilan yang berfokus pada aplikasi. Membuat aplikasi menggunakan ADC akan otomatis membuat aplikasi di App Hub. Anda akan melihat semua beban kerja dan layanan yang membentuk aplikasi tercantum di sini. Daripada melihat resource di cloud sebagai resource individual, Anda dapat melihatnya sebagai bagian dari satu aplikasi, sehingga menyederhanakan pengelolaan dan tata kelola.

Hub Aplikasi

  1. Klik tombol Lihat di Observability. Tindakan ini akan membuka aplikasi di konsol Observability.
  2. Buka tampilan Dasbor. Dasbor ini memberikan ringkasan tentang performa dan kondisi aplikasi dengan menyediakan metrik seperti 4 sinyal emas: rasio permintaan, rasio error, latensi, dan saturasi. Pemantauan yang berfokus pada aplikasi ini sangat penting untuk menjaga keandalan. Anda juga dapat melihat Log dan Trace untuk aplikasi, sehingga Anda dapat mengorelasikan sinyal dan menunjukkan lokasi hambatan. Hal ini sangat penting dalam aplikasi berbasis agen yang kompleks seperti ini, di mana respons lambat dari Vertex AI atau server MCP Data dapat menurunkan kualitas pengalaman pengguna.

Dasbor

  1. Eksplorasi Terpandu: Ajukan pertanyaan spesifik kepada agen di aplikasi (misalnya, "Apa saja tempat terbaik untuk dikunjungi di London?"). Kemudian, kembali ke konsol Observability dan lihat daftar Traces. Temukan rekaman aktivitas yang sesuai dengan permintaan Anda. Klik untuk melihat tampilan waterfall yang mendetail. Perhatikan bagaimana Anda dapat melihat waktu yang dihabiskan di frontend, backend agen, dan panggilan ke Vertex AI. Dengan begitu, Anda dapat mengidentifikasi dengan tepat di mana latensi terjadi.

9. Selamat

Selamat! Anda telah men-deploy arsitektur aplikasi 3 tingkat menggunakan ADC.

Yang telah Anda pelajari

  • Cara menyusun arsitektur cloud secara visual menggunakan ADC.
  • Cara menyiapkan ADC dan mengaktifkan API melalui UI.
  • Cara men-deploy aplikasi menggunakan ADC.
  • Cara menggunakan App Hub untuk melihat resource Anda dari perspektif aplikasi.
  • Cara memantau kondisi aplikasi menggunakan Dasbor Observabilitas.

Dokumen referensi