本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # 使用 Green Boost 探索完整堆疊的雲端原生 Web 應用程式開發 *Ben Stickley 和 Amiin Samatar，Amazon Web Services* ## 總結 為了回應開發人員不斷演進的需求，Amazon Web Services (AWS) 認識到有效開發雲端原生 Web 應用程式的關鍵需求。AWS 的重點在於協助您克服與在 AWS 雲端部署 Web 應用程式相關的常見障礙。透過利用 TypeScript、AWS Cloud Development Kit (AWS CDK)、React 和 Node.js 等現代技術的功能，此模式旨在簡化和加速開發程序。 此模式以 Green Boost (GB) 工具組為基礎，提供建構 Web 應用程式的實際指南，以充分利用 AWS 的廣泛功能。它可做為全面的藍圖，引導您部署與 Amazon Aurora PostgreSQL 相容版本整合的基本 CRUD （建立、讀取、更新、刪除） Web 應用程式。這可透過使用 Green Boost 命令列界面 (Green Boost CLI) 並建立本機開發環境來完成。 在成功部署應用程式之後，模式會深入探索 Web 應用程式的關鍵元件，包括基礎設施設計、後端和前端開發，以及基本工具，例如用於視覺化的 cdk-dia，促進有效率的專案管理。 ## 先決條件和限制 **先決條件** + 已安裝 [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) + 已安裝 [Visual Studio Code (VS Code)](https://code.visualstudio.com/download) + 已安裝 [AWS Command Line Interface (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 安裝的一部分 + 對 TypeScript、AWS CDK、Node.js 和 React 的基本熟悉度 + [作用中的 AWS 帳戶](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) + [在 中使用 AWS CDK 引導的 AWS 帳戶](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html)`us-east-1`。Amazon CloudFront Lambda@Edge 函數的支援** **需要 `us-east-1` AWS 區域。 + [在終端機環境中正確設定 AWS 安全登入](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html)資料`AWS_ACCESS_KEY_ID`，包括 。 + 對於 Windows 使用者，終端機處於管理員模式 （以適應 pnpm 處理節點模組的方式） **產品版本** + 適用於 JavaScript 的 AWS 開發套件第 3 版 + AWS CDK 第 2 版 + AWS CLI 2.2 版 + Node.js 第 18 版 + React 第 18 版 ## Architecture **目標技術堆疊 ** + Amazon Aurora PostgreSQL-Compatible Edition + Amazon CloudFront + Amazon CloudWatch + Amazon Elastic Compute Cloud (Amazon EC2) + AWS Lambda + AWS Secrets Manager + Amazon Simple Notification Service (Amazon SNS) + Amazon Simple Storage Service (Amazon S3) + AWS WAF **目標架構** 下圖顯示使用者請求在與 S3 儲存貯體、Aurora 資料庫、EC2 執行個體互動，最終到達開發人員之前，會先通過 Amazon CloudFront、AWS WAF 和 AWS Lambda。另一方面，管理員使用 Amazon SNS 和 Amazon CloudWatch 進行通知和監控。 ![\[使用 Green Boost CLI 部署與 Amazon Aurora PostgreSQL 整合之 CRUD Web 應用程式的程序。\]](http://docs.aws.amazon.com/zh_tw/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_tw/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/5e4c3321-47bd-44e7-bf14-f470eed984c1.png) 這些圖表展示兩個不同角度的 Web 應用程式架構。cdk-dia 圖表提供 AWS CDK 基礎設施的詳細技術檢視，強調特定的 AWS 服務，例如 Amazon Aurora PostgreSQL 相容和 AWS Lambda。相反地，另一個圖表採用更廣泛的視角，強調資料和使用者互動的邏輯流程。關鍵區別在於細節層級：cdk-dia 深入探索技術複雜性，而第一個圖表提供更以使用者為中心的檢視。 使用 *AWS CDK 建立 cdk-dia 圖表涵蓋在史詩中。了解應用程式基礎設施*。 ## 工具 **AWS 服務** + [Amazon Aurora PostgreSQL 相容版本](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.AuroraPostgreSQL.html)是完全受管的 ACID 相容關聯式資料庫引擎，可協助您設定、操作和擴展 PostgreSQL 部署。 + [AWS 雲端開發套件 (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) 是一種軟體開發架構，可協助您在程式碼中定義和佈建 AWS 雲端基礎設施。 + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) 是一種開放原始碼工具，可協助您透過命令列 shell 中的命令與 AWS 服務互動。 + [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 透過全球資料中心網路提供 Web 內容，進而降低延遲並改善效能，進而加快 Web 內容的發佈速度。 + [Amazon CloudWatch](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) 可協助您即時監控 AWS 資源的指標，以及您在 AWS 上執行的應用程式。 + [Amazon Elastic Compute Cloud (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) 可協助您以 API 呼叫 Secrets Manager，以程式設計方式擷取秘密，取代程式碼中的硬式編碼登入資料，包括密碼。 + [AWS Systems Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/what-is-systems-manager.html) 可協助您管理在 AWS 雲端中執行的應用程式和基礎設施。它可簡化應用程式和資源管理、縮短偵測和解決操作問題的時間，並協助您大規模安全地管理 AWS 資源。此模式使用 AWS Systems Manager Session 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 上建置 Web 應用程式。 + [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 專案相依性的套件管理員。 ## 最佳實務 如需下列建議的詳細資訊，請參閱 [Epics](#explore-full-stack-cloud-native-web-application-development-with-green-boost-epics) 一節： + 使用 Amazon CloudWatch Dashboards 和警示來監控基礎設施。 + 使用 cdk-nag 執行靜態基礎設施即程式碼 (IaC) 分析，以強制執行 AWS 最佳實務。 + 使用 Systems Manager Session Manager 透過 SSH （安全殼層） 通道建立資料庫連接埠轉送，這比擁有公開的 IP 地址更安全。 + 執行 來管理漏洞`pnpm audit`。 + 使用 [ESLint](https://eslint.org/) 執行靜態 TypeScript 程式碼分析和 [Prettier](https://prettier.io/) 標準化程式碼格式，以強制執行最佳實務。 ## 史詩 ### 使用 Aurora PostgreSQL 相容部署 CRUD Web 應用程式 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 安裝 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_tw/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_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)等待部署完成 （約 20 分鐘）。當您等待時，請在 AWS CloudFormation 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_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)或者，您也可以存取 Amazon CloudFront 主控台來尋找 CloudFront URL： Amazon CloudFront [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)複製與分佈相關聯的**網域名稱**。它看起來類似於 `your-unique-id.cloudfront.net`。 | 應用程式開發人員 | ### 使用 Amazon CloudWatch 進行監控 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 檢視 CloudWatch Dashboard。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 應用程式開發人員 | | 啟用提醒。 | CloudWatch Dashboard 可協助您主動監控 Web 應用程式。若要被動監控 Web 應用程式，您可以啟用提醒。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 應用程式開發人員 | ### 使用 AWS CDK 了解應用程式基礎設施 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 建立架構圖。 | 使用 [cdk-dia](https://github.com/pistazie/cdk-dia) 產生 Web 應用程式的架構圖。視覺化架構有助於改善團隊成員之間的理解和溝通。它提供系統元件及其關係的清晰概觀。[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/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_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 應用程式開發人員 | ### 評估資料庫組態和結構描述 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 取得環境變數。 | 若要取得所需的環境變數，請使用下列步驟：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/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_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 應用程式開發人員 | | 調整 Systems Manager Session Manager 逾時。 | （選用） 如果預設的 20 分鐘工作階段逾時太短，您可以在 Systems 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_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 應用程式開發人員 | ### 使用 Node.js 偵錯 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 對建立項目使用案例進行偵錯。 | 若要偵錯建立項目使用案例，請遵循下列步驟：[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/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_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 應用程式開發人員 | ### 開發前端 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 設定開發伺服器。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | 應用程式開發人員 | ### Green Boost 工具 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 設定 monorepo 和 pnpm 套件管理員。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/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_tw/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_tw/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_tw/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_tw/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)這些工具是有助於防止錯誤程式碼進入您應用程式的機制。 | 應用程式開發人員 | ### 向下拉動基礎設施 | 任務 | Description | 所需的技能 | | --- | --- | --- | | 從您的帳戶中移除部署。 | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_tw/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 連線和 Session Manager](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/)