快速启动解决方案：使用 JavaScript 部署动态 Web 应用

Last reviewed 2023-12-06 UTC

本指南可帮助您了解、部署和使用使用 JavaScript 的动态 Web 应用快速起步解决方案。此解决方案展示了如何在 Google Cloud 上构建和运行动态网站。您可以将其作为示例，探索如何将您自己的动态网站部署到 Google Cloud，包括您可能需要的 Google Cloud 产品以及它们应如何相互通信。

本解决方案指南将 Developer Journey Web 应用部署到 Google Cloud。

Developer Journey 使用 TypeScript、Next.js 和 React 构建，并演示了用于预渲染可缓存网页的静态生成和服务器端渲染方法。

本文档假定您熟悉基本的云概念，但不一定熟悉 Google Cloud。拥有 Terraform 经验会很有帮助。

目标

本解决方案指南将帮助您了解如何使用 Google Cloud 执行以下操作：

我们建议：

  • 您熟悉 TypeScript 和 React 编程。
  • 您有兴趣为新的 JavaScript 应用使用云基础架构。
  • 您熟悉数据库连接、CI/CD、调试和日志记录。
  • 您熟悉网站开发的基础知识。

使用的产品

下面总结了 Developer Journeys 解决方案集成的 Google Cloud 产品：

  • Cloud Run：这是一项全托管式服务，可让您构建和部署无服务器容器化应用。Cloud Run 负责处理扩缩和其他基础架构任务，以便您可以专注于代码的业务逻辑。
  • Firestore：这是一个 NoSQL 文档数据库，能够自动扩缩、具备出色的性能，并且易于进行应用开发。
  • Cloud Load Balancing：Google Cloud 上的可扩缩、高性能负载均衡。
  • Secret Manager：该服务可让您将密钥以二进制 blob 或文本字符串的形式进行存储、管理和访问。您可以使用 Secret Manager 存储应用在运行时需要的数据库密码、API 密钥或 TLS 证书。
  • Cloud Storage：这是一种企业级服务，为各种数据类型提供费用低廉、不受限制的对象存储。可从 Google Cloud 内部和外部访问数据，并以地理位置冗余方式复制数据。
  • Cloud Build：此服务可让您从代码库或 Cloud Storage 空间导入源代码，执行构建并生成 Docker 容器或 Cloud Storage spaces 等工件，以实现持续交付。

架构

下图展示了该解决方案的架构：

使用 JavaScript 架构部署动态 Web 应用的示意图

请求流程

该架构包括以下组件：

  1. 移动用户和 Web 用户使用网址连接到应用。
  2. Cloud CDN 提供已缓存资源（如果有）。否则，请求将被路由到 Cloud Load Balancing。
  3. 对于静态资产，Cloud Load Balancing 会从 Cloud Storage 存储桶拉取。
  4. 对于动态资源，Cloud Load Balancing 会将请求定向到 Cloud Run。
  5. 系统使用存储在 Secret Manager 中的环境变量向 Cloud Run 提供敏感值。
  6. Cloud Run 从 Firestore（Web 应用的 NoSQL 数据库后端）查询用户数据。

费用

如需估算“使用 JavaScript 部署动态 Web 应用”解决方案所用的 Google Cloud 资源的费用，请参阅 Google Cloud 价格计算器中预先计算的估算值。

使用估算值作为起点来计算部署费用。您可以修改估算值，以反映您计划对解决方案中使用的资源进行的任何配置更改。

系统会基于某些因素（包括以下因素）做出预先计算的估算：

  • 部署资源的 Google Cloud 位置。
  • 资源的使用时间。

准备工作

如需部署此解决方案，您首先需要一个 Google Cloud 项目和一些 IAM 权限。

创建或选择 Google Cloud 项目

部署解决方案时，您需要选择部署资源的 Google Cloud 项目。您可以创建一个新项目或使用现有项目进行部署。

如果您要创建新项目，请在开始部署之前执行此操作。使用新项目有助于避免与先前预配的资源（例如用于生产工作负载的资源）发生冲突。

如需创建项目，请完成以下步骤：

  1. In the Google Cloud console, go to the project selector page.

    Go to project selector

  2. Click Create project.

  3. Name your project. Make a note of your generated project ID.

  4. Edit the other fields as needed.

  5. Click Create.

获取所需的 IAM 权限

如需开始部署过程，您需要下表中列出的 Identity and Access Management (IAM) 权限。

如果您为此解决方案创建了新项目，则您在该项目中拥有 roles/owner 基本角色，并拥有所有必要的权限。如果您没有 roles/owner 角色，请让管理员授予您这些权限（或包含这些权限的角色）。

所需的 IAM 权限 包含所需权限的预定义角色

serviceusage.services.enable

 Service Usage Admin
(roles/serviceusage.serviceUsageAdmin)

iam.serviceAccounts.create

 Service Account Admin
(roles/iam.serviceAccountAdmin)

resourcemanager.projects.setIamPolicy

 Project IAM Admin
(roles/resourcemanager.projectIamAdmin)
config.deployments.create
config.deployments.list		 Cloud Infrastructure Manager Admin
(roles/config.admin)
iam.serviceAccount.actAs Service Account User
(roles/iam.serviceAccountUser)

关于临时服务账号权限

如果您通过控制台启动部署过程，则 Google 会创建一个服务账号，用于代表您部署解决方案（以及稍后删除部署）。系统会临时为此服务账号分配某些 IAM 权限；也就是说，在解决方案部署和删除操作完成后，会自动撤消这些权限。Google 建议您在删除部署后删除服务账号，如本指南后面部分所述。

查看分配给服务账号的角色

此处列出了这些角色，以防 Google Cloud 项目或组织的管理员需要此信息。

  • roles/datastore.owner
  • roles/iam.serviceAccountAdmin
  • roles/iam.serviceAccountUser
  • roles/resourcemanager.projectIamAdmin
  • roles/run.admin
  • roles/`roles/secretmanager.admin
  • roles/storage.admin
  • roles/compute.networkAdmin
  • roles/compute.admin

部署解决方案

为了减少您部署此解决方案所需的工作量，GitHub 中提供了 Terraform 配置。Terraform 配置定义了解决方案需要的所有 Google Cloud 资源。

您可以使用以下任一方法来部署解决方案：

  • 通过控制台：如果您要试用采用默认配置的解决方案并了解其工作原理，请使用此方法。Cloud Build 会部署此解决方案需要的所有资源。如果您不再需要部署的解决方案，可以通过控制台将其删除。您在部署解决方案后创建的任何资源都可能需要单独删除。

    如需使用此部署方法，请按照通过控制台进行部署中的说明操作。

  • 使用 Terraform CLI：如果您要自定义解决方案，或者要使用基础架构即代码 (IaC) 方法自动预配和管理资源，请使用此方法。从 GitHub 下载 Terraform 配置，根据需要选择性地自定义代码，然后使用 Terraform CLI 部署解决方案。部署解决方案后，您可以继续使用 Terraform 来管理解决方案。

    如需使用此部署方法，请按照使用 Terraform CLI 进行部署中的说明操作。

通过控制台进行部署

完成以下步骤以部署预配置的解决方案。

  1. 在 Google Cloud 快速启动解决方案目录中，打开使用 JavaScript 的动态 Web 应用解决方案。

    打开“使用 JavaScript 的动态 Web 应用”解决方案

  2. 查看页面上提供的信息，例如解决方案的预计费用和预计部署时间。

  3. 准备好开始部署解决方案后，请点击部署。

    此时会显示分步配置窗格。

  4. 完成配置窗格中的步骤。

    请记下您输入的部署名称。在稍后删除部署时需要此名称。

    点击部署后，系统会显示解决方案部署页面。此页面的状态字段显示正在部署。

  5. 等待解决方案部署。

    如果部署失败，状态字段将显示失败。您可以使用 Cloud Build 日志来诊断错误。如需了解详情，请参阅通过控制台部署时出错。

    部署完成后，状态字段将更改为已部署。

如果您不再需要此解决方案，可以将部署删除，以免继续为 Google Cloud 资源计费。如需了解详情，请参阅删除部署。

使用 Terraform CLI 进行部署

本部分介绍如何使用 Terraform CLI 自定义解决方案或自动预配和管理解决方案。使用 Terraform CLI 部署的解决方案不会显示在 Google Cloud 控制台的解决方案部署页面中。

设置 Terraform 客户端

您可以在 Cloud Shell 或本地主机上运行 Terraform。本指南介绍如何在 Cloud Shell 中运行 Terraform，其中预安装了 Terraform 并将其配置为向 Google Cloud 进行身份验证。

GitHub 代码库中提供了此解决方案的 Terraform 代码。

  1. 将 GitHub 代码库克隆到 Cloud Shell。

    在 Cloud Shell 中打开

    系统会显示一条提示，要求您确认将 GitHub 代码库下载到 Cloud Shell。

  2. 点击确认。

    Cloud Shell 会在单独的浏览器标签页中启动，而 Terraform 代码会下载到 Cloud Shell 环境的 $HOME/cloudshell_open 目录中。

  3. 在 Cloud Shell 中，检查当前工作目录是否为 $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra。这是包含此解决方案的 Terraform 配置文件的目录。如果您需要切换到该目录，请运行以下命令：

    cd $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra

  4. 通过运行以下命令来初始化 Terraform：

    terraform init

    等待系统显示以下消息：

    Terraform has been successfully initialized!

配置 Terraform 变量

您下载的 Terraform 代码包含可用于根据需要自定义部署的变量。例如，您可以指定 Google Cloud 项目以及要在其中部署解决方案的区域。

  1. 确保当前工作目录为 $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra。如果不是，请转到该目录。

  2. 在同一目录中，创建一个名为 terraform.tfvars 的文本文件。

  3. 在 terraform.tfvars 文件中，复制以下代码段，并为所需的变量设置值。

    • 按照代码段中作为注释提供的说明进行操作。
    • 此代码段仅包含您必须为其设置值的变量。Terraform 配置包括具有默认值的其他变量。如需查看所有变量和默认值，请参阅 $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra 目录中提供的 variables.tf 文件。
    • 确保您在 terraform.tfvars 文件中设置的每个值都与 variables.tf 文件中声明的变量类型匹配。例如，如果为 variables.tf 文件中的变量定义的类型为 bool，则必须将 true 或 false 指定为该变量在 terraform.tfvars 文件中的值。
    # This is an example of the terraform.tfvars file.
# The values in this file must match the variable types declared in variables.tf.
# The values in this file override any defaults in variables.tf.

# ID of the project in which you want to deploy the solution
project_id = "PROJECT_ID"

# Google Cloud region where you want to deploy the solution
# Example: us-central1
region = "REGION"

# Google Cloud zone where you want to deploy the solution
# Example: us-central1-a
zone = "ZONE"

如需了解可分配给所需变量的值，请查看：

验证并查看 Terraform 配置

  1. 确保当前工作目录为 $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra。如果不是，请转到该目录。

  2. 验证 Terraform 配置没有错误：

    terraform validate

    如果该命令返回任何错误，请在配置中进行所需的更正，然后再次运行 terraform validate 命令。重复此步骤，直到命令返回以下消息：

    Success! The configuration is valid.

  3. 查看配置中定义的资源：

    terraform plan

  4. 如果您未按照上文所述创建 terraform.tfvars 文件，则 Terraform 会提示您为没有默认值的变量输入值。输入必需的值。

    terraform plan 命令的输出是在应用配置时 Terraform 预配的资源列表。

    如果要进行任何更改，请修改配置，然后再次运行 terraform validate 和 terraform plan 命令。

预配资源

如果 Terraform 配置中不需要进一步更改，请部署资源。

  1. 确保当前工作目录为 $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra。如果不是，请转到该目录。

  2. 应用 Terraform 配置：

    terraform apply

  3. 如果您未按照上文所述创建 terraform.tfvars 文件，则 Terraform 会提示您为没有默认值的变量输入值。输入必需的值。

    Terraform 会显示将创建的资源列表。

  4. 当系统提示您执行操作时，请输入 yes。

    Terraform 展示一些显示部署进度的消息。

    如果无法完成部署，则 Terraform 会显示导致失败的错误。查看错误消息，并更新配置以修复错误。然后，再次运行 terraform apply 命令。如需有关排查 Terraform 错误的帮助，请参阅使用 Terraform CLI 部署解决方案时出错。

    创建完所有资源后，Terraform 会显示以下消息：

    Apply complete!

如果您不再需要此解决方案，可以将部署删除，以免继续为 Google Cloud 资源计费。如需了解详情，请参阅删除部署。

探索您的部署

您已部署示例 JavaScript 动态 Web 应用。您的解决方案部署包括已集成到单个 Google Cloud 项目中的多个主要服务，其中包括：

如需查看已部署的 Google Cloud 资源及其配置，请进入交互式导览。

开始导览

可选：自定义您的应用

如需自定义“使用 JavaScript 的动态 Web 应用”解决方案，您可以对部署在 Cloud Run 上的应用进行更改，然后重新部署。如需直接在 Cloud Shell Editor 中按照此任务的分步指南来执行操作，请点击操作演示。

操作演示

此任务大约需要 30 分钟才能完成。

删除部署

如果不再需要该解决方案，为避免继续为您在此解决方案中创建的资源计费，请删除所有资源。

通过控制台删除

如果您通过控制台部署了解决方案，请按以下流程操作。

  1. 在 Google Cloud 控制台中，转到解决方案部署页面。

    转到“解决方案部署”

  2. 选择您要删除的部署所在的项目。

  3. 找到您要删除的部署。

  4. 在部署对应的行中，点击 操作，然后选择删除。

    您可能需要向下滚动才能看到该行中的操作。

  5. 输入部署的名称，然后点击确认。

    状态字段显示正在删除。

    如果删除失败，请参阅删除部署时出错中的问题排查指南。

如果您不再需要用于此解决方案的 Google Cloud 项目，则可以删除该项目。如需了解详情，请参阅可选：删除项目。

使用 Terraform CLI 进行删除

如果您使用 Terraform CLI 部署了解决方案，请按照以下步骤操作。

  1. 在 Cloud Shell 中，确保当前工作目录为 $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra。如果不是，请转到该目录。

  2. 移除 Terraform 预配的资源：

    terraform destroy

    Terraform 会显示将被销毁的资源列表。

  3. 当系统提示您执行操作时，请输入 yes。

    Terraform 会显示显示进度的消息。删除所有资源后，Terraform 将显示以下消息：

    Destroy complete!

    如果删除失败，请参阅删除部署时出错中的问题排查指南。

如果您不再需要用于此解决方案的 Google Cloud 项目，则可以删除该项目。如需了解详情，请参阅可选：删除项目。

可选：删除项目

如果您在新的 Google Cloud 项目中部署了解决方案，但不再需要该项目，请完成以下步骤来将其删除：

  1. 在 Google Cloud 控制台中，进入管理资源页面：

    打开“管理资源”

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

可选：删除服务账号

如果删除了用于解决方案的项目，请跳过此部分。

如本指南前面部分所述，当您部署解决方案时，系统代表您创建了一个服务账号。系统为服务账号临时分配了某些 IAM 权限；也就是说，在解决方案的部署和删除操作完成后，系统会自动撤消这些权限，但不会删除服务账号。Google 建议您删除此服务账号。

  • 如果您通过 Google Cloud 控制台部署了解决方案，请进入解决方案部署页面。（如果您已进入该页面，请刷新浏览器。）系统会在后台触发进程来删除服务账号。无需进一步操作。

  • 如果您使用 Terraform CLI 部署了解决方案，请完成以下步骤：

    1. 在 Google Cloud 控制台中，转到服务账号页面。

      转到“服务账号”

    2. 选择您用于解决方案的项目。

    3. 选择要删除的服务账号。

      为解决方案创建的服务账号的电子邮件 ID 采用以下格式：

      goog-sc-DEPLOYMENT_NAME-NNN@PROJECT_ID.iam.gserviceaccount.com

      电子邮件 ID 包含以下值：

      • DEPLOYMENT_NAME：部署的名称。
      • NNN：随机 3 位数。
      • PROJECT_ID：部署了解决方案的项目的 ID。

    4. 点击删除。

排查错误

可以诊断和解决错误的操作取决于部署方法和错误的复杂程度。

通过控制台进行部署时发生错误

如果您使用控制台时部署失败，请执行以下操作：

  1. 转到解决方案部署页面。

    如果部署失败，状态字段将显示失败。

  2. 查看导致失败的错误的详细信息：

    1. 在部署对应的行中，点击 操作。

      您可能需要向下滚动才能看到该行中的操作。

    2. 选择查看 Cloud Build 日志。

  3. 查看 Cloud Build 日志，并采取适当的措施来解决导致失败的问题。

使用 Terraform CLI 进行部署时发生错误

如果在使用 Terraform 时部署失败，terraform apply 命令的输出将包含错误消息，您可以查看这些错误消息以诊断问题。

以下部分中的示例显示了您在使用 Terraform 时可能会遇到的部署错误。

“API 未启用”错误

如果您创建了一个项目，然后立即尝试在新项目中部署此解决方案，则部署可能会失败，并显示如下错误：

Error: Error creating Network: googleapi: Error 403: Compute Engine API has not
been used in project PROJECT_ID before or it is disabled. Enable it by visiting
https://console.developers.google.com/apis/api/compute.googleapis.com/overview?project=PROJECT_ID
then retry. If you enabled this API recently, wait a few minutes for the action
to propagate to our systems and retry.

如果发生此错误，请等待几分钟，然后再次运行 terraform apply 命令。

删除部署时出错

在某些情况下，尝试删除部署可能会失败：

  • 通过控制台部署解决方案后，如果您更改此解决方案预配的任何资源，然后尝试删除部署，则删除操作可能会失败。解决方案部署页面上的状态字段会显示失败，并且 Cloud Build 日志会显示错误原因。
  • 使用 Terraform CLI 部署解决方案后，如果您使用非 Terraform 界面（例如控制台）更改任何资源，然后尝试删除部署，则删除操作可能会失败。terraform destroy 命令输出中的消息会显示错误的原因。

查看错误日志和消息，找出并删除导致错误的资源，然后再次尝试删除部署。

如果基于控制台的部署未删除，并且您无法使用 Cloud Build 日志诊断错误，则可以使用 Terraform CLI 删除该部署，如下一部分所述。

使用 Terraform CLI 删除基于控制台的部署

本部分介绍在尝试通过控制台删除基于控制台的部署出错时如何删除该部署。在此方法中，您可以下载要删除的部署的 Terraform 配置，然后使用 Terraform CLI 删除部署。

  1. 确定部署的 Terraform 代码、日志和其他数据的存储区域。此区域可能与您在部署解决方案时选择的区域不同。

    1. 在 Google Cloud 控制台中，转到解决方案部署页面。

      转到“解决方案部署”

    2. 选择您要删除的部署所在的项目。

    3. 在部署列表中，找到要删除的部署所在的行。

    4. 点击 查看所有行内容。

    5. 在位置列中，记下第二个位置，如以下示例中突出显示部分所示：

      部署代码、日志和其他工件的位置。

  2. In the Google Cloud console, activate Cloud Shell.

    Activate Cloud Shell

    At the bottom of the Google Cloud console, a Cloud Shell session starts and displays a command-line prompt. Cloud Shell is a shell environment with the Google Cloud CLI already installed and with values already set for your current project. It can take a few seconds for the session to initialize.

  3. 为要删除的部署的项目 ID、区域和名称创建环境变量：

    export REGION="REGION"
export PROJECT_ID="PROJECT_ID"
export DEPLOYMENT_NAME="DEPLOYMENT_NAME"

    在这些命令中，替换以下内容：

    • REGION：您先前在此过程中记下的位置。
    • PROJECT_ID：您在其中部署解决方案的项目的 ID。
    • DEPLOYMENT_NAME：您要删除的部署的名称。

  4. 获取您要删除的最新修订版本部署的 ID：

    export REVISION_ID=$(curl \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    "https://config.googleapis.com/v1alpha2/projects/${PROJECT_ID}/locations/${REGION}/deployments/${DEPLOYMENT_NAME}" \
    | jq .latestRevision -r)
    echo $REVISION_ID

    输出类似于以下内容：

    projects/PROJECT_ID/locations/REGION/deployments/DEPLOYMENT_NAME/revisions/r-0

  5. 获取该部署的 Terraform 配置的 Cloud Storage 位置：

    export CONTENT_PATH=$(curl \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    "https://config.googleapis.com/v1alpha2/${REVISION_ID}" \
    | jq .applyResults.content -r)
    echo $CONTENT_PATH

    以下是此命令的输出示例：

    gs://PROJECT_ID-REGION-blueprint-config/DEPLOYMENT_NAME/r-0/apply_results/content

  6. 将 Terraform 配置从 Cloud Storage 下载到 Cloud Shell：

    gcloud storage cp $CONTENT_PATH $HOME --recursive
cd $HOME/content/infra

    等到系统显示 Operation completed 消息，如以下示例所示：

    Operation completed over 45 objects/268.5 KiB

  7. 初始化 Terraform：

    terraform init

    等待系统显示以下消息：

    Terraform has been successfully initialized!

  8. 移除已部署的资源：

    terraform destroy

    Terraform 会显示将被销毁的资源列表。

    如果显示的警告与未声明变量有关，请忽略这些警告。

  9. 当系统提示您执行操作时，请输入 yes。

    Terraform 会显示显示进度的消息。删除所有资源后，Terraform 将显示以下消息：

    Destroy complete!

  10. 删除部署工件：

    curl -X DELETE \
    -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    "https://config.googleapis.com/v1alpha2/projects/${PROJECT_ID}/locations/${REGION}/deployments/${DEPLOYMENT_NAME}?force=true&delete_policy=abandon"

  11. 等待几秒钟，然后验证部署工件是否已删除：

    curl -H "Authorization: Bearer $(gcloud auth print-access-token)" \
    -H "Content-Type: application/json" \
    "https://config.googleapis.com/v1alpha2/projects/${PROJECT_ID}/locations/${REGION}/deployments/${DEPLOYMENT_NAME}" \
    | jq .error.message

    如果输出显示 null，请等待几秒钟，然后再次运行该命令。

    删除部署工件后，系统会显示一条如以下示例所示的消息：

    Resource 'projects/PROJECT_ID/locations/REGION/deployments/DEPLOYMENT_NAME' was not found

提交反馈

快速起步解决方案仅供参考，并非官方支持的产品。Google 可能会在不事先通知的情况下更改或移除解决方案。

如需排查错误，请查看 Cloud Build 日志和 Terraform 输出。

如需提交反馈，请执行以下操作：

  • 对于文档、控制台教程或解决方案，请使用页面上的发送反馈按钮。

  • 对于未经修改的代码，请在相应的 GitHub 代码库中创建问题：

    GitHub 问题会尽量得到查看，且不适用于一般使用问题。

后续步骤

如需继续详细了解 Google Cloud 产品和功能，请参阅：