本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。 # 使用 Green Boost 探索全栈云原生 Web 应用程序开发 *Ben Stickley 和 Amiin Samatar，Amazon Web Services* ## Summary 为了应对开发人员不断变化的需求，Amazon Web Services (AWS) 意识到开发云原生 Web 应用程序的高效方法的迫切需求。AWS 的重点是帮助您克服与在 AWS Cloud上部署 Web 应用程序相关的常见障碍。通过利用 TypeScript AWS Cloud Development Kit (AWS CDK)、React 和 Node.js 等现代技术的功能，这种模式旨在简化和加快开发流程。 在 Green Boost (GB) 工具包的支持下，该模式提供了构建充分利用 AWS 广泛功能的 Web 应用程序的实用指南。它是一份全面的路线图，引导您完成与 Amazon Aurora PostgreSQL 兼容版本集成的基本 CRUD（创建、读取、更新、删除）网络应用程序的部署过程。这是通过使用 Green Boost 命令行界面 (Green Boost CLI) 和建立本地开发环境来实现的。 成功部署应用程序后，该模式深入研究 Web 应用程序的关键组件，包括基础设施设计、后端和前端开发，以及用于可视化的 cdk-dia 等基本工具，从而促进高效的项目管理。 ## 先决条件和限制 **先决条件** + [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) 已安装 + [Visual Studio 代码（VS 代码）](https://code.visualstudio.com/download)已安装 + [AWS 命令行界面（AWS CLI）](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html)已安装 + 已安装 [AWS CDK Toolkit](https://docs.aws.amazon.com/cdk/v2/guide/cli.html) + [Node.js 18](https://nodejs.org/en/download) 已安装，或者已激活[带 pnpm 的 Node.js 18](https://pnpm.io/cli/env) + [pnpm](https://pnpm.io/installation) 已安装，前提是它不是 Node.js 安装的一部分 + 对 AWS CDK TypeScript、Node.js 和 React 有基本的熟悉程度 + 一个[有效的 Amazon Web Services account](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) + 通过在 `us-east-1` 中使用 AWS CDK [引导的 Amazon Web Services account](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html)。`us-east-1`AWS 区域****是支持 Amazon CloudFront Lambda @Edge 功能所必需的。 + 在终端环境中正确配置的 [AWS 安全凭证](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html)，包括 `AWS_ACCESS_KEY_ID` + 对于 Windows 用户，管理员模式下的终端（以适应 pnpm 处理节点模块的方式） **产品版本** + 适用于 JavaScript 版本 3 的 AWS 开发工具包 + AWS CDK 版本 2 + AWS CLI 版本 2.2 + Node.js 版本 18 + React 版本 18 ## 架构 **目标技术堆栈** + Amazon Aurora PostgreSQL 兼容版 + Amazon CloudFront + Amazon CloudWatch + 亚马逊弹性计算云（亚马逊 EC2） + AWS Lambda + AWS Secrets Manager + Amazon Simple Notification Service(Amazon SNS) + Amazon Simple Storage Service(Amazon S3) + AWS WAF **目标架构** 下图显示了用户请求在与 S3 存储桶、Aurora 数据库 CloudFront、实例进行交互并最终到达开发人员之前，先通过亚马逊、AWS WAF 和 AWS Lambda 传递。 EC2 另一方面，管理员则使用 Amazon SNS 和 Amazon CloudWatch 进行通知和监控。 ![\[使用 Green Boost CLI 部署与 Amazon Aurora PostgreSQL 集成的 CRUD Web 应用程序的过程。\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/129691e9-7fd3-4208-ab8c-05b9f40a5c4c.png) 要在部署后更深入地了解应用程序，可以使用 [cdk-dia](https://github.com/pistazie/cdk-dia) 创建图表，如以下示例所示。 ![\[第一张图显示了以用户为中心的视图；cdk-dia 图显示了技术基础设施视图。\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/5e4c3321-47bd-44e7-bf14-f470eed984c1.png) 这些图表从两个不同的角度展示 Web 应用程序架构。cdk-dia 图表提供了 AWS CDK 基础设施的详细技术视图，重点介绍了特定的 Amazon Web Services，例如 Amazon Aurora PostgreSQL-Compatible 和 AWS Lambda。相比之下，另一个图采用了更广泛的视角，强调数据和用户交互的逻辑流。主要区别在于详细程度：cdk-dia 深入研究了技术的复杂性，而第一个图提供了更加以用户为中心的视图。 操作说明*使用 AWS CDK 了解应用程序基础设施*中介绍了 cdk-dia 图的创建。 ## 工具 **Amazon Web Services** + [Amazon Aurora PostgreSQL 兼容版](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.AuroraPostgreSQL.html)是一个完全托管的、与 ACID 兼容的关系数据库引擎，可帮助您建立、运行和扩缩 PostgreSQL 部署。 + [AWS Cloud Development Kit (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) 是一个软件开发框架，可帮助您在代码中定义并预置 Amazon Web Services Cloud 基础设施。 + [AWS 命令行界面（AWS CLI）](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html)是一种开源工具，它可帮助您通过命令行 Shell 中的命令与 Amazon Web Services 交互。 + [Amazon](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 通过全球数据中心网络交付您的网页内容，从而降低延迟并提高性能，从而 CloudFront加快网络内容的分发。 + [Amazon CloudWatch](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) 可帮助您实时监控您的 AWS 资源和在 AWS 上运行的应用程序的指标。 + [亚马逊弹性计算云 (Amazon EC2)](https://docs.aws.amazon.com/ec2/) 在 AWS 云中提供可扩展的计算容量。您可以根据需要启动任意数量的虚拟服务器，并快速纵向扩展或缩减这些服务器。 + [AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) 是一项计算服务，可帮助您运行代码，而无需预置或管理服务器。它仅在需要时运行您的代码，并且能自动扩缩，因此您只需为使用的计算时间付费。 + [AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html) 帮助您将代码中的硬编码凭证（包括密码）替换为对 Secrets Manager 的 API 调用，以便以编程方式检索密钥。 + [AWS Systems Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/what-is-systems-manager.html) 可帮助您管理在 Amazon Web Services Cloud 中运行的应用程序和基础设施。它简化了应用程序和资源管理，缩短了检测和解决操作问题的时间，并帮助您大规模安全地管理 AWS 资源。此模式使用 AWS Systems Manager 会话管理器。 + [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) 是一项基于云的对象存储服务，可帮助您存储、保护和检索任意数量的数据。[Amazon Simple Notification Service (Amazon SNS)](https://docs.aws.amazon.com/sns/latest/dg/welcome.html) 可帮助您协调和管理发布者与客户端（包括 Web 服务器和电子邮件地址）之间的消息交换。 + [AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/what-is-aws-waf.html) 是一种 Web 应用程序防火墙，可帮助您监视转发至受保护 Web 应用程序资源的 HTTP 和 HTTPS 请求。 **其他工具** + [Git](https://git-scm.com/docs) 是开源分布式版本控制系统。 + [Green Boost](https://awslabs.github.io/green-boost/overview/intro) 是用于在 AWS 上构建网络应用程序的工具包。 + [Next.js](https://nextjs.org/docs) 是用于添加功能和优化的 React 框架。 + [Node.js](https://nodejs.org/en/docs/) 是一个事件驱动的 JavaScript 运行时环境，专为构建可扩展的网络应用程序而设计。 + [pgAdmin](https://www.pgadmin.org/) 是一种适用于 PostgreSQL 的开源管理工具。它提供了一个图形界面，可帮助您创建、维护和使用数据库对象。 + [pnpm](https://pnpm.io/motivation) 是 Node.js 项目依赖项的包管理器。 ## 最佳实践 有关以下建议的更多信息，请参阅[操作说明](#explore-full-stack-cloud-native-web-application-development-with-green-boost-epics)部分： + 使用 Amazon CloudWatch 控制面板和警报监控基础设施。 + 使用 cdk-nag 运行静态基础设施即代码（IaC）分析，以执行 AWS 最佳实践。 + 使用 Systems Manager 会话管理器通过SSH (Secure Shell) 隧道建立数据库端口转发，这比公开的 IP 地址更安全。 + 通过运行 `pnpm audit` 来管理漏洞。 + 使用执行静态 TypeScript 代码分析 [ESLint](https://eslint.org/)，使用 Pr [ettier](https://prettier.io/) 来标准化代码格式，从而强制执行最佳实践。 ## 操作说明 ### 部署与 Aurora PostgreSQL 兼容的 CRUD Web 应用程序 | Task | 说明 | 所需技能 | | --- | --- | --- | | 安装 Green Boost CLI。 | 要安装 Green Boost CLI，请运行以下命令。
pnpm add -g gboost
| 应用程序开发人员 | | 创建 GB 应用程序。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | | 安装依赖项并部署应用程序。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)等待部署完成(大约 20 分钟)。在等待期间，请在 CloudFormation 控制台中监控 AWS CloudFormation 堆栈。请注意代码中定义的构造如何映射至部署的资源。在 CloudFormation 控制台中查看 [CDK 构造树视图](https://docs.aws.amazon.com/cdk/v2/guide/constructs.html)。 | 应用程序开发人员 | | 访问该应用程序。 | 在本地部署 GB 应用程序后，您可以使用 CloudFront URL 对其进行访问。URL 打印终端输出中，但查找起来可能有点让人不知所措。若要更快地找到它，请使用以下步骤：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)或者，您可以通过访问 Amazon CloudFront 控制台来找到 CloudFront URL：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)复制与分配关联的**域名**。这与 `your-unique-id.cloudfront.net` 类似。 | 应用程序开发人员 | ### 使用 Amazon 进行监控 CloudWatch | Task | 说明 | 所需技能 | | --- | --- | --- | | 查看 CloudWatch 控制面板。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | | 启用警报。 | CloudWatch 控制面板可帮助您主动监控您的 Web 应用程序。若要被动监控您的 Web 应用程序，您可以启用警报。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | ### 通过 AWS CDK 了解应用程序基础设施 | Task | 说明 | 所需技能 | | --- | --- | --- | | 创建架构图。 | 使用 [cdk-dia](https://github.com/pistazie/cdk-dia) 生成 Web 应用程序的架构图。可视化架构有助于增进团队成员之间的理解与沟通。它清晰地概述系统的组件及其关系。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | | 使用 cdk-nag 强制执行最佳实践。 | 使用 [cdk-nag](https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/check-aws-cdk-applications-or-cloudformation-templates-for-best-practices-by-using-cdk-nag-rule-packs.html) 通过实施最佳实践，降低安全漏洞和配置错误的风险，以帮助您维护安全和合规的基础设施。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | ### 评估数据库配置与架构 | Task | 说明 | 所需技能 | | --- | --- | --- | | 获取环境变量。 | 若要获取所需环境变量，请使用以下步骤：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | | 创建端口转发。 | 若要创建端口转发，请使用以下步骤：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | | 调整 Systems Manager 会话管理器超时。 | （可选）如果默认 20 分钟的会话超时时间太短，则可以在 Systems Manager 控制台中选择 **Session Manager**、**偏好**、**编辑**、**空闲会话超时**，将其延长至 60 分钟。 | 应用程序开发人员 | | 可视化数据库。 | pgadmin 是一款用户友好开源工具，用于管理 PostgreSQL 数据库。它简化了数据库任务，使您可高效地创建、管理和优化数据库。本节将指导您 [安装 pgadmin](https://www.pgadmin.org/download/) 并使用其功能进行 PostgreSQL 数据库管理。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | ### 使用 Node.js 调试 | Task | 说明 | 所需技能 | | --- | --- | --- | | 调试创建项目用例。 | 若要调试创建项目用例，请执行以下步骤：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | ### 开发前端 | Task | 说明 | 所需技能 | | --- | --- | --- | | 设置开发服务器。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | ### 含绿色增强功能的工具 | Task | 说明 | 所需技能 | | --- | --- | --- | | 设置 monorepo 与 pnpm 包管理器。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | | 运行 pnpm 脚本。 | 在存储库的根目录中运行以下命令：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)请注意这些命令如何在所有工作区中运行。这些命令是在每个工作空间的 `package.json#scripts` 字段中定义的。 | 应用程序开发人员 | | ESLint 用于静态代码分析。 | 要测试的静态代码分析能力 ESLint，请执行以下操作：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | | 管理依赖项和漏洞。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | | 使用 Husky 预先提交挂钩。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)这些工具是帮助防止不良代码进入您的应用程序的机制。 | 应用程序开发人员 | ### 拆除基础设施 | Task | 说明 | 所需技能 | | --- | --- | --- | | 从您的账户中移除部署。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 应用程序开发人员 | ## 问题排查 | 问题 | 解决方案 | | --- | --- | | 无法建立端口转发 | 确保您的 AWS 凭证配置正确并具有必要的权限。仔细检查堡垒主机 ID (`DB_BASTION_ID`) 与数据库端点 (`DB_ENDPOINT`) 环境变量是否设置正确。如果您仍然遇到问题，请参阅 AWS 文档以[排除 SSH 连接和会话管理器](https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-getting-started-enable-ssh-connections.html)。 | | `localhost:3000` 网站未加载 | 确认终端输出显示端口转发成功，包含转发地址。确保本地计算机上没有使用端口 3000 的冲突进程。验证 Green Boost 应用程序是否已正确配置并在预期端口 (3000) 上运行。检查您的 Web 浏览器是否有任何可能阻止本地连接的安全扩展或设置。 | | 本地部署期间的错误消息 (`pnpm deploy:local`) | 仔细查看错误消息，以确定问题的原因。验证必要的环境变量以及配置文件是否设置正确。 | ## 相关资源 + [AWS CDK 文档](https://docs.aws.amazon.com/cdk/latest/guide/home.html) + [Green Boost 文档](https://awslabs.github.io/green-boost/learn/m1-deploy-gb-app) + [Next.js 文档](https://nextjs.org/docs) + [Node.js 文档](https://nodejs.org/en/docs/) + [React 文档](https://reactjs.org/docs/getting-started.html) + [TypeScript 文档](https://www.typescriptlang.org/docs/)