Halaman ini diterjemahkan oleh Cloud Translation API.

Membuat dan memverifikasi template

Panduan memulai ini membantu Anda membuat dan men-deploy template aplikasi web tiga tingkat yang mencakup komponen frontend, backend, dan database. Gambar berikut menunjukkan kanvas desain, yang mencakup komponen dan koneksi aplikasi.

Aplikasi web tiga tingkat di kanvas desain. Aplikasi ini mencakup komponen frontend, backend, dan database.

Anda mendesain template menggunakan salah satu hal berikut:

Kanvas desain di Application Design Center.
Perintah natural language di Gemini Cloud Assist.
Pusat Desain Aplikasi Google Cloud CLI.

Setelah menyelesaikan desain, verifikasi template dengan men-deploy aplikasi pengujian di Pusat Desain Aplikasi.

Untuk mengikuti panduan langkah demi langkah untuk tugas ini langsung di Google Cloud konsol, klik Pandu saya:

Pandu saya

Sebelum memulai

Siapkan App Design Center.
Buat project turunan di folder yang mendukung aplikasi.

Anda akan men-deploy Google Cloud resource ke project ini saat men-deploy aplikasi.
Pastikan penagihan diaktifkan untuk project turunan Anda.

Menyiapkan alat

Anda dapat menggunakan salah satu opsi berikut untuk menyelesaikan panduan memulai ini.

Gunakan kanvas desain di konsol Google Cloud .
Untuk menggunakan Gemini Cloud Assist dalam membuat desain Anda, lihat Menyiapkan Gemini Cloud Assist.

Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

Install the Google Cloud CLI.

Catatan: Jika Anda menginstal gcloud CLI sebelumnya, pastikan Anda memiliki versi terbaru dengan menjalankan gcloud components update.

Jika Anda menggunakan penyedia identitas (IdP) eksternal, Anda harus login ke gcloud CLI dengan identitas gabungan Anda terlebih dahulu.

Untuk melakukan inisialisasi gcloud CLI, jalankan perintah berikut:

gcloud init

Install the Google Cloud CLI.

Catatan: Jika Anda menginstal gcloud CLI sebelumnya, pastikan Anda memiliki versi terbaru dengan menjalankan gcloud components update.

Jika Anda menggunakan penyedia identitas (IdP) eksternal, Anda harus login ke gcloud CLI dengan identitas gabungan Anda terlebih dahulu.

Untuk melakukan inisialisasi gcloud CLI, jalankan perintah berikut:

gcloud init

Pastikan Anda memiliki peran yang diperlukan

Untuk membuat template, pastikan Anda memiliki salah satu peran berikut di project pengelolaan:
- Admin Pusat Desain Aplikasi (roles/designcenter.admin).
- Pengguna Pusat Desain Aplikasi (roles/designcenter.user).
Untuk men-deploy aplikasi, pastikan Anda memiliki salah satu peran berikut di project pengelolaan:
- Application Admin (roles/designcenter.applicationAdmin).
- Editor Aplikasi (roles/designcenter.applicationEditor).
Untuk membuat akun layanan selama deployment, pastikan Anda memiliki peran berikut:
- Untuk membuat akun layanan, Anda harus memiliki peran Membuat akun layanan(roles/iam.serviceAccountCreator) di project pengelolaan.
- Untuk memberikan akses akun layanan ke project turunan, Anda harus memiliki peran Project IAM Admin (roles/resourcemanager.projectIamAdmin) di project turunan.

Membuat template baru dan menambahkan detail

Kanvas desain

Di konsol Google Cloud , buka halaman Templates.

Buka Template
Klik Buat Template, lalu masukkan detail berikut:
1. Di kolom Template ID, masukkan quickstart-three-tier-web-app.
2. Di kolom Template Name, masukkan Quickstart three-tier web app .
3. Di kolom Description, masukkan A template to generate a three-tier web application.
4. Klik Buat template.
Template dibuat dan kanvas desain ditampilkan.
Di area Components, klik komponen berikut untuk menambahkannya ke kanvas desain:
- Cloud Run (tambahkan dua komponen)
- Cloud SQL (PostgreSQL)
Untuk membuat koneksi antar-komponen, lakukan hal berikut:
1. Dari titik biru di bagian bawah cloud-run-1, tarik ke titik biru di bagian atas cloud-run-2.
2. Dari titik biru di bagian bawah cloud-run-2, tarik ke titik biru di bagian atas sql-postgresql-1.
Template Anda berisi tiga komponen. Kanvas menampilkan komponen untuk merepresentasikan koneksi.

Gemini Cloud Assist

Di toolbar konsol Google Cloud , klik spark Open or close Gemini Cloud Assist chat.

Panel Cloud Assist akan terbuka.
Di chat Gemini Cloud Assist, masukkan perintah berikut:
```
I want to create a three-tier web application.
```
Gemini Cloud Assist membuat desain dasar untuk aplikasi web tiga tingkat.
Untuk menghapus load balancer dan komponen Secret Manager, masukkan perintah berikut:
```
I don't need load balancers or Secret Manager.
```
Gemini Cloud Assist memperbarui desain untuk menghapus komponen.
Tinjau desain yang diperbarui yang mencakup komponen berikut:
- Cloud Run (dua komponen)
- Cloud SQL untuk PostgreSQL
Klik Edit desain aplikasi.

Halaman Create a new template akan ditampilkan.
Masukkan detail template berikut:
1. Di kolom Template ID, masukkan quickstart-three-tier-web-app.
2. Di kolom Template Name, masukkan Quickstart three-tier web app .
3. Di kolom Description, masukkan A template to generate a three-tier web application.
Klik Buat template.

Sistem akan membuat template baru dan menampilkan kanvas desain.

gcloud CLI

Buat template aplikasi.

gcloud design-center spaces application-templates create quickstart-three-tier-web-app \
--display-name="Quickstart three-tier web app" \
--description="A template to generate a three-tier web application" \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Mencantumkan template bersama di katalog Google.
```
gcloud design-center spaces shared-templates list \
--google-catalog \
--location=us-central1
```
1. Identifikasi ID template bersama untuk Cloud Run dan Cloud SQL.

Tambahkan komponen Cloud Run untuk digunakan sebagai frontend.

gcloud design-center spaces application-templates components create cloud-run-1 \
--application-template=quickstart-three-tier-web-app \
--shared-template-revision-uri=google/1b5e09c8-780f-484e-b8ed-c7178f4e4342 \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Tambahkan komponen Cloud Run kedua untuk digunakan sebagai backend.

gcloud design-center spaces application-templates components create cloud-run-2 \
--application-template=quickstart-three-tier-web-app \
--shared-template-revision-uri=google/1b5e09c8-780f-484e-b8ed-c7178f4e4342 \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Tambahkan komponen Cloud SQL.

gcloud design-center spaces application-templates components create sql-postgresql-1 \
--application-template=quickstart-three-tier-web-app \
--shared-template-revision-uri=google/45be1bc2-89bc-477b-9b5d-64c41ff3b146 \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Hubungkan cloud-run-1 ke cloud-run-2.

 gcloud design-center spaces application-templates components connections create frontend-to-backend \
 --application-template=quickstart-three-tier-web-app \
 --component=cloud-run-1 \
 --destination-component-uri=cloud-run-2 \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID

Hubungkan cloud-run-2 ke sql-postgresql-1.

 gcloud design-center spaces application-templates components connections create backend-to-database \
 --application-template=quickstart-three-tier-web-app \
 --component=cloud-run-2 \
 --destination-component-uri=sql-postgresql-1 \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID

Lakukan perubahan untuk membuat revisi template aplikasi.

 gcloud design-center spaces application-templates commit quickstart-three-tier-web-app \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID

Membuat draf aplikasi

Kanvas desain

Dari kanvas desain, klik Konfigurasi aplikasi.
Klik Create new application dan lakukan tindakan berikut:
1. Di kolom Name, masukkan quickstart-three-tier-test.
2. Di kolom Nama Tampilan, masukkan Quickstart three-tier test.
3. Dari daftar Region, pilih us-central1 (Iowa).
4. Dari daftar Environment, pilih Test.
5. Dari daftar Kekritisan, pilih Low.
6. Di area Cakupan, dari daftar Cakupan aplikasi, pilih Regional.
Klik Create Application.

Sistem akan membuat draf aplikasi.

gcloud CLI

Identifikasi URI revisi terbaru template aplikasi Anda.

 gcloud design-center spaces application-templates describe quickstart-three-tier-web-app \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --format='yaml(name,latestRevision)'

Buat draf aplikasi berdasarkan template Anda.

   gcloud design-center spaces applications create quickstart-three-tier-test \
   --space=SPACE \
   --location=us-central1 \
   --project=MANAGEMENT_PROJECT_ID \
   --source-application-template-revision=projects/MANAGEMENT_PROJECT_ID/locations/us-central1/spaces/SPACE/applicationTemplates/quickstart-three-tier-web-app/revisions/TEMPLATE_REVISION \
   --display-name="Quickstart three-tier test" \
   --environment-type=test \
   --criticality-type=low \
   --scope-type=regional \
   --deployment-region=us-central1

Mengonfigurasi komponen

Kanvas desain

Di kanvas desain, klik cloud-run-1 dan lakukan hal berikut di area Configuration:
1. Dari daftar Project ID, pilih project turunan yang Anda buat di Sebelum memulai. Resource akan di-deploy ke project ini.
2. Di kolom Nama Layanan, masukkan frontend-service.
3. Klik Simpan.
Di kanvas desain, klik cloud-run-2 dan lakukan hal berikut di area Configuration:
1. Dari daftar Project ID, pilih project turunan yang Anda buat di Sebelum memulai. Resource akan di-deploy ke project ini.
2. Di kolom Nama Layanan, masukkan backend-service.
3. Klik Simpan.
Di kanvas desain, klik sql-postgresql-1 dan lakukan hal berikut di area Configuration:
1. Dari daftar Project ID, pilih project turunan yang Anda buat di Sebelum memulai. Resource akan di-deploy ke project ini.
2. Di kolom Name, masukkan database-postgresql.
3. Dari daftar Database Version, pilih POSTGRES_15.
4. Dari daftar drop-down Zone, pilih us-central1-a.
5. Klik Simpan.
Kanvas menampilkan tanda centang hijau di setiap komponen untuk menunjukkan bahwa Anda telah menentukan parameter yang diperlukan. Sekarang Anda dapat men-deploy draf aplikasi ke lingkungan Test untuk verifikasi.

gcloud CLI

Jelaskan aplikasi untuk mengidentifikasi parameter konfigurasi yang diperlukan.

 gcloud design-center spaces applications describe quickstart-three-tier-test \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --format='yaml(name,componentParameters)'

Untuk setiap komponen, di direktori beranda, buat file JSON yang berisi nilai parameter yang diperlukan.

Buat frontend-service.json.

 {
   "component": "projects/MANAGEMENT_PROJECT_ID/locations/us-central1/spaces/SPACE/applicationTemplates/quickstart-three-tier-web-app/components/cloud-run-1",
   "parameters": [
      {
         "key": "service_name",
         "value": "frontend-service"
      },
      {
         "key": "project_id",
         "value": "DEPLOYMENT_PROJECT_ID"
      }
   ]
 }

Buat backend-service.json.

 {
   "component": "projects/MANAGEMENT_PROJECT_ID/locations/us-central1/spaces/SPACE/applicationTemplates/quickstart-three-tier-web-app/components/cloud-run-2",
   "parameters": [
      {
         "key": "service_name",
         "value": "backend-service"
      },
      {
         "key": "project_id",
         "value": "DEPLOYMENT_PROJECT_ID"
      }
   ]
 }

Buat database-postgresql.json.

 {
   "component": "projects/MANAGEMENT_PROJECT_ID/locations/us-central1/spaces/SPACE/applicationTemplates/quickstart-three-tier-web-app/components/sql-postgresql-1",
   "parameters": [
      {
         "key": "name",
         "value": "database-postgresql"
      },
      {
         "key": "project_id",
         "value": "DEPLOYMENT_PROJECT_ID"
      },
      {
         "key": "database_version",
         "value": "POSTGRES_15"
      },
      {
         "key": "region",
         "value": "us-central1"
      },
      {
         "key": "zone",
         "value": "us-central1-a"
      }
   ]
 }

Perbarui aplikasi untuk mengonfigurasi parameter yang diperlukan.

 gcloud design-center spaces applications update quickstart-three-tier-test \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --component-parameters=./frontend-service.json \
 --component-parameters=./backend-service.json \
 --component-parameters=./database-postgresql.json

Men-deploy aplikasi

Kanvas desain

Klik Deploy.
Di area Select a service account, lakukan hal berikut:
1. Klik Buat akun layanan baru.
2. Klik Lanjutkan.
Klik Deploy.

Setelah beberapa menit, sistem akan men-deploy aplikasi dan membuat resource di project Anda. Sistem akan menampilkan detail berikut:
- Link ke App Hub, tempat Anda dapat melihat detail resource yang di-deploy, termasuk link ke dasbor pemantauan.
- Link ke log Cloud Build, yang dapat Anda gunakan untuk memecahkan masalah error deployment.
- Output seperti URI layanan ditampilkan, yang dapat Anda gunakan untuk berinteraksi dengan resource yang di-deploy.
Untuk melanjutkan panduan memulai ini, lihat Memperbarui template aplikasi dan men-deploy ulang.

gcloud CLI

Jelaskan aplikasi untuk mengidentifikasi peran IAM yang diperlukan untuk akun layanan deployment Anda.

 gcloud design-center spaces applications describe quickstart-three-tier-test \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --format='yaml(name,projectParameters)'

Buat akun layanan baru untuk men-deploy aplikasi.

 gcloud iam service-accounts create quickstart-service-account \
 --project=MANAGEMENT_PROJECT_ID \
 --display-name="Quickstart service account" \
 --description="A service account to deploy the ADC quickstart"

Tambahkan peran project deployment yang diperlukan ke akun layanan.

#!/bin/bash

PROJECT_ID="DEPLOYMENT_PROJECT_ID"
SERVICE_ACCOUNT="quickstart-service-account@MANAGEMENT_PROJECT_ID.iam.gserviceaccount.com"

ROLES=(
"roles/iap.admin"
"roles/compute.networkAdmin"
"roles/compute.viewer"
"roles/run.admin"
"roles/iam.serviceAccountAdmin"
"roles/serviceusage.serviceUsageAdmin"
"roles/cloudkms.admin"
"roles/logging.logWriter"
"roles/iam.serviceAccountUser"
"roles/cloudsql.admin"
"roles/cloudkms.autokeyAdmin"
"roles/storage.admin"
"roles/serviceusage.serviceUsageViewer"
"roles/resourcemanager.projectIamAdmin"
"roles/cloudkms.cryptoKeyEncrypterDecrypter"
)

for role in "${ROLES[@]}"; do
echo "Adding role: ${role}"
gcloud projects add-iam-policy-binding "${PROJECT_ID}" \
   --member="serviceAccount:${SERVICE_ACCOUNT}" \
   --role="${role}"
echo "---"
done

echo "Finished adding roles."

Tambahkan peran project pengelolaan yang diperlukan ke akun layanan.

#!/bin/bash

PROJECT_ID="MANAGEMENT_PROJECT_ID"
SERVICE_ACCOUNT="quickstart-service-account@MANAGEMENT_PROJECT_ID.iam.gserviceaccount.com"

ROLES=(
"roles/config.agent"
"roles/apphub.editor"
)

for role in "${ROLES[@]}"; do
echo "Adding role: ${role}"
gcloud projects add-iam-policy-binding "${PROJECT_ID}" \
   --member="serviceAccount:${SERVICE_ACCOUNT}" \
   --role="${role}"
echo "---"
done

echo "Finished adding roles."

Identifikasi nomor project pengelolaan Anda.

gcloud projects describe MANAGEMENT_PROJECT_ID \
--format="value(projectNumber)"

Tambahkan binding kebijakan IAM untuk peran roles/iam.serviceAccountUser di project pengelolaan Anda.

gcloud iam service-accounts add-iam-policy-binding projects/MANAGEMENT_PROJECT_ID/serviceAccounts/quickstart-service-account@MANAGEMENT_PROJECT_ID.iam.gserviceaccount.com \
--project=MANAGEMENT_PROJECT_ID \
--member="serviceAccount:service-MANAGEMENT_PROJECT_NUMBER@gcp-sa-designcenter.iam.gserviceaccount.com" \
--role="roles/iam.serviceAccountUser"

Perbarui aplikasi untuk menggunakan akun layanan Anda.

gcloud design-center spaces applications update quickstart-three-tier-test \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID \
--service-account=projects/MANAGEMENT_PROJECT_ID/serviceAccounts/quickstart-service-account@MANAGEMENT_PROJECT_ID.iam.gserviceaccount.com

Beri pengguna Anda izin actAs di akun layanan Anda.

gcloud iam service-accounts add-iam-policy-binding quickstart-service-account@MANAGEMENT_PROJECT_ID.iam.gserviceaccount.com \
--project=MANAGEMENT_PROJECT_ID \
--member="user:USER" \
--role="roles/iam.serviceAccountUser"

USER adalah pengguna Google Cloud Anda. Contohnya, dana@example.com.

Pratinjau aplikasi:

Pratinjau memerlukan waktu beberapa menit untuk dibuat.

gcloud design-center spaces applications preview quickstart-three-tier-test \
--location=us-central1 \
--space=SPACE \
--project=MANAGEMENT_PROJECT_ID

Deploy aplikasi.

gcloud design-center spaces applications deploy quickstart-three-tier-test \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID \
--async

Identifikasi ID operasi.

Deployment memerlukan waktu beberapa menit hingga selesai. Lacak status deployment.

gcloud design-center operations describe operation-OPERATION_ID \
--space=SPACE \
--location=us-central1 \
--project=MANAGEMENT_PROJECT_ID

Setelah deployment selesai, identifikasi parameter output aplikasi.

 gcloud design-center spaces applications describe quickstart-three-tier-test \
 --space=SPACE \
 --location=us-central1 \
 --project=MANAGEMENT_PROJECT_ID \
 --format='yaml(name,appParameters,componentParameters,deploymentMetadata,deploymentRevision,previewReference)'

Opsional: Memantau deployment Anda

Setelah men-deploy aplikasi, Anda dapat menggunakan Pemantauan Aplikasi untuk melihat telemetri aplikasi serta memantau kondisi dan performa:

Di konsol Google Cloud , buka halaman Application monitoring:
Buka Pemantauan aplikasi

Jika Anda menggunakan kotak penelusuran untuk menemukan halaman ini, pilih hasil yang subjudulnya adalah Monitoring.
Dari pemilih project di konsol Google Cloud , pilih project pengelolaan.
Untuk petunjuk mendetail tentang cara menggunakan dasbor standar dan menjelajahi data telemetri, lihat Melihat telemetri aplikasi.

Anda juga bisa mendapatkan informasi kesehatan dan performa tambahan di Cloud Hub, termasuk kegagalan deployment dan deployment yang dapat diupdate, informasi tentang Google Cloud insiden yang memengaruhi aplikasi Anda, dan layanan yang mendekati batas kuotanya.

Pembersihan

Agar akun Google Cloud Anda tidak dikenai biaya untuk resource yang digunakan pada halaman ini, hapus project Google Cloud yang berisi resource tersebut.

Hapus aplikasi yang di-deploy

Dari menu navigasi, klik Aplikasi.

Buka Applications
Dari tabel, klik Quickstart three-tier web app.
Klik Tindakan, lalu pilih Hapus aplikasi.
Di kolom Hapus, masukkan Quickstart three-tier web app.
Klik Hapus.

Sistem menghapus aplikasi, termasuk hal berikut:

Detail aplikasi dihapus dari Pusat Desain Aplikasi.
Aplikasi App Hub yang mendasarinya dihapus.
Resource pokok dihapus.

Opsional: Menghapus project

Untuk menghapus project turunan yang Anda buat di Sebelum Anda memulai, lakukan hal berikut:

Di konsol Google Cloud , buka halaman Manage resources.
Buka Kelola resource
Pada daftar project, pilih project yang ingin Anda hapus, lalu klik Hapus.
Pada layar perintah, ketik project ID, lalu klik Matikan.

Membuat dan memverifikasi template

Sebelum memulai

Menyiapkan alat

Pastikan Anda memiliki peran yang diperlukan

Membuat template baru dan menambahkan detail

Kanvas desain

Gemini Cloud Assist

gcloud CLI

Membuat draf aplikasi

Kanvas desain

gcloud CLI

Mengonfigurasi komponen

Kanvas desain

gcloud CLI

Men-deploy aplikasi

Kanvas desain

gcloud CLI

Opsional: Memantau deployment Anda

Pembersihan

Hapus aplikasi yang di-deploy

Opsional: Menghapus project

Langkah berikutnya