创建并验证模板

本快速入门可帮助您创建和部署包含前端、后端和数据库组件的三层式 Web 应用模板。下图显示了设计画布，其中包含应用组件和连接。

设计画布中的三层式 Web 应用。该应用包含前端、后端和数据库组件。

您可以使用以下任一方式设计模板：

完成设计后，在 App Design Center 中部署测试应用，以验证模板。

如需在 Google Cloud 控制台中直接遵循有关此任务的分步指导，请点击操作演示：

操作演示

准备工作

  1. 设置 App Design Center。

  2. 在已启用应用的文件夹中创建后代项目。

    部署应用时，您会将 Google Cloud 资源部署到此项目。

  3. 确保您的后代项目已启用结算功能。

设置工具

您可以使用以下任一方式完成本快速入门。

  • 使用 Google Cloud 控制台中的设计画布。

  • 如需使用 Gemini Cloud Assist 创建设计，请参阅设置 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.

  • 如果您使用的是外部身份提供方 (IdP)，则必须先使用联合身份登录 gcloud CLI。

  • 如需初始化 gcloud CLI，请运行以下命令： 

    gcloud init

  • Install the Google Cloud CLI.

  • 如果您使用的是外部身份提供方 (IdP)，则必须先使用联合身份登录 gcloud CLI。

  • 如需初始化 gcloud CLI，请运行以下命令： 

    gcloud init

    • 确保您拥有所需的角色

    1. 如需创建模板，请确保您在管理项目中拥有以下角色之一：

    2. 如需部署应用，请确保您在管理项目中拥有以下角色之一：

    3. 如需在部署期间创建服务账号，请确保您拥有以下角色：

      • 如需创建服务账号，您必须拥有管理项目的 Create service accounts(roles/iam.serviceAccountCreator) 角色。

      • 如需授予服务账号对后代项目的访问权限，您必须拥有后代项目的 Project IAM Admin (roles/resourcemanager.projectIamAdmin) 角色。

    创建新模板并添加详细信息

    设计画布

    1. 在 Google Cloud 控制台中，前往模板页面。

      前往“模板”

    2. 点击创建模板，然后输入以下详细信息：

      1. 在模板 ID 字段中，输入 quickstart-three-tier-web-app。

      2. 在模板名称字段中，输入 Quickstart three-tier web app。

      3. 在说明字段中，输入 A template to generate a three-tier web application。

      4. 点击创建模板。

      系统会创建模板并显示设计画布。

    3. 在组件区域中，点击以下组件以将其添加到设计画布：

      • Cloud Run（添加两个组件）
      • Cloud SQL (PostgreSQL)

    4. 如需在组件之间创建连接，请执行以下操作：

      1. 从 cloud-run-1 底部的蓝点拖动到 cloud-run-2 顶部的蓝点。

      2. 从 cloud-run-2 底部的蓝点拖动到 sql-postgresql-1 顶部的蓝点。

      您的模板包含三个组件。画布上会在组件之间显示线条以表示连接。

    Gemini Cloud Assist

    1. 在 Google Cloud 控制台工具栏中，点击星光图标 打开或关闭 Gemini Cloud Assist 对话。

      系统将打开 Cloud Assist 面板。

    2. 在 Gemini Cloud Assist 对话中，输入以下提示：

      I want to create a three-tier web application.

      Gemini Cloud Assist 会生成一个三层 Web 应用的基本设计。

    3. 如需移除负载平衡器和 Secret Manager 组件，请输入以下提示：

      I don't need load balancers or Secret Manager.

      Gemini Cloud Assist 会更新设计以移除组件。

    4. 查看更新后的设计，其中包含以下组件：

      • Cloud Run（两个组件）
      • Cloud SQL for PostgreSQL

    5. 点击修改应用设计。

      系统会显示创建新模板页面。

    6. 输入以下模板详细信息：

      1. 在模板 ID 字段中，输入 quickstart-three-tier-web-app。

      2. 在模板名称字段中，输入 Quickstart three-tier web app。

      3. 在说明字段中，输入 A template to generate a three-tier web application。

    7. 点击创建模板。

      系统会创建一个新模板并显示设计画布。

    gcloud CLI

    1. 创建应用模板。

      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

    2. 列出 Google 目录中的共享模板。

      gcloud design-center spaces shared-templates list \
--google-catalog \
--location=us-central1
      1. 确定 Cloud Run 和 Cloud SQL 的共享模板 ID。

    3. 添加一个 Cloud Run 组件，用作前端。

      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

    4. 添加第二个 Cloud Run 组件以用作后端。

      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

    5. 添加 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

    6. 将 cloud-run-1 连接到 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

    7. 将 cloud-run-2 连接到 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

    8. 提交更改以创建应用模板修订版本。

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

    创建应用草稿

    设计画布

    1. 在设计画布中，点击配置应用。

    2. 点击创建新应用，然后执行以下操作：

      1. 在名称字段中，输入 quickstart-three-tier-test。

      2. 在显示名称字段中，输入 Quickstart three-tier test。

      3. 从区域列表中，选择 us-central1 (Iowa)。

      4. 从环境列表中，选择 Test。

      5. 从严重性列表中，选择 Low。

      6. 在范围区域中，从应用范围列表中选择 Regional。

    3. 点击创建应用。

      系统会创建应用草稿。

    gcloud CLI

    1. 确定应用模板的最新修订版本 URI。

       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)'

    2. 根据您的模板创建应用草稿。

         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

    配置组件

    设计画布

    1. 在设计画布中，点击 cloud-run-1，然后在配置区域中执行以下操作：

      1. 从项目 ID 列表中，选择您在准备工作中创建的后代项目。 资源将部署到此项目。

      2. 在服务名称字段中，输入 frontend-service。

      3. 点击保存。

    2. 在设计画布中，点击 cloud-run-2，然后在配置区域中执行以下操作：

      1. 从项目 ID 列表中，选择您在准备工作中创建的后代项目。 资源将部署到此项目。

      2. 在服务名称字段中，输入 backend-service。

      3. 点击保存。

    3. 在设计画布中，点击 sql-postgresql-1，然后在配置区域中执行以下操作：

      1. 从项目 ID 列表中，选择您在准备工作中创建的后代项目。 资源将部署到此项目。

      2. 在名称字段中，输入 database-postgresql。

      3. 从数据库版本列表中，选择 POSTGRES_15。

      4. 从可用区下拉列表中选择 us-central1-a。

      5. 点击保存。

      画布会在每个组件中显示一个绿色对勾标记，表示您已指定必需的参数。现在，您可以将应用草稿部署到 Test 环境以进行验证。

    gcloud CLI

    1. 描述应用以确定所需的配置参数。

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

    2. 对于每个组件，请在您的主目录中创建一个包含必需参数值的 JSON 文件。

      1. 创建 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"
      }
   ]
 }

      2. 创建 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"
      }
   ]
 }

      3. 创建 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"
      }
   ]
 }

    3. 更新应用以配置必需的参数。

       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

    部署应用

    设计画布

    1. 点击部署。

    2. 在选择服务账号区域中，执行以下操作：

      1. 点击创建新服务账号。

      2. 点击继续。

    3. 点击部署。

      几分钟后，系统会在您的项目中部署应用并创建资源。系统会显示以下详细信息：

      • 指向 App Hub 的链接，您可以在其中查看已部署的资源详细信息，包括指向监控信息中心的链接。
      • 指向 Cloud Build 日志的链接，您可以使用这些日志来排查部署错误。
      • 系统会显示服务 URI 等输出，您可以用于与已部署的资源进行互动。

    4. 如需在本快速入门的基础上继续操作，请参阅更新应用模板并重新部署。

    gcloud CLI

    1. 描述应用，以确定部署服务账号所需的 IAM 角色。

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

    2. 创建新的服务账号以部署应用。

       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"

    3. 向服务账号添加所需的部署项目角色。

      #!/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."

    4. 向服务账号添加所需的管理项目角色。

      #!/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."

    5. 确定您的管理项目编号。

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

    6. 为管理项目添加 roles/iam.serviceAccountUser 角色的 IAM 政策绑定。

      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"

    7. 更新应用以使用您的服务账号。

      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

    8. 向您的用户授予服务账号的 actAs 权限。

      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 是您的 Google Cloud 用户。例如 dana@example.com。

    9. 预览应用：

      生成预览需要几分钟时间。

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

    10. 部署应用。

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

    11. 确定操作 ID。

    12. 部署需要几分钟才能完成。跟踪部署状态。

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

    13. 部署完成后，确定应用输出参数。

       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)'

    可选：监控部署

    部署应用后，您可以使用应用监控来查看应用遥测数据，并监控健康状况和性能：

    1. 在 Google Cloud 控制台中，前往应用监控页面：

      前往应用监控

      如果您使用搜索栏查找此页面，请选择子标题为监控的结果。

    2. 在 Google Cloud 控制台的项目选择器中，选择管理项目。

    3. 如需详细了解如何使用预定义的信息中心和探索遥测数据，请参阅查看应用遥测数据。

    您还可以在 Cloud Hub 中获取其他健康状况和性能信息，包括部署失败和可更新的部署、影响应用的 Google Cloud 突发事件的相关信息，以及接近配额限制的服务。

    清理

    为避免因本页面中使用的资源导致您的 Google Cloud 账号产生费用，请删除包含这些资源的 Google Cloud 项目。

    删除已部署的应用

    1. 在导航菜单中，点击应用。

      转到“应用”

    2. 在表中，点击快速入门三层 Web 应用。

    3. 点击 操作，然后选择删除应用。

    4. 在删除字段中，输入 Quickstart three-tier web app。

    5. 点击删除。

    系统会删除应用，包括以下内容：

    • 应用详细信息会从 App Design Center 中移除。
    • 底层 App Hub 应用会被删除。
    • 底层资源会被删除。

    可选：删除项目

    如需删除您在准备工作中创建的后代项目，请执行以下操作：

    1. 在 Google Cloud 控制台中，前往管理资源页面。

      转到“管理资源”

    2. 在项目列表中，选择要删除的项目，然后点击删除。
    3. 在提示符处，输入项目 ID，然后点击关停。

    后续步骤