本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 使用 AWS CDK 搭配 TypeScript 部署多堆疊應用程式
<a name="deploy-multiple-stack-applications-using-aws-cdk-with-typescript"></a>

*Rahul Sharad Gaikwad 醫生，Amazon Web Services*

## 總結
<a name="deploy-multiple-stack-applications-using-aws-cdk-with-typescript-summary"></a>

此模式提供step-by-step方法。 TypeScript 例如， 模式會部署無伺服器即時分析應用程式。

模式會建置和部署巢狀堆疊應用程式。父 AWS CloudFormation 堆疊會呼叫子堆疊或巢狀堆疊。 每個子堆疊都會建置和部署 CloudFormation 堆疊中定義的 AWS 資源。AWS CDK Toolkit 是命令列界面 (CLI) 命令 `cdk`，是 CloudFormation 堆疊的主要界面。

## 先決條件和限制
<a name="deploy-multiple-stack-applications-using-aws-cdk-with-typescript-prereqs"></a>

**先決條件**
+ 作用中的 AWS 帳戶
+ 現有的虛擬私有雲端 (VPC) 和子網路
+ 安裝並設定 AWS CDK Toolkit
+ 具有管理員許可和一組存取金鑰的使用者。
+ Node.js
+ AWS 命令列界面 (AWS CLI)

**限制**
+ 由於 AWS CDK 使用 AWS CloudFormation，AWS CDK 應用程式受限於 CloudFormation 服務配額。如需詳細資訊，請參閱 [AWS CloudFormation 配額](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cloudformation-limits.html)。

**產品版本**

此模式已使用下列工具和版本建置和測試。
+ AWS CDK Toolkit 1.83.0
+ Node.js 14.13.0
+ npm 7.0.14

模式應適用於任何版本的 AWS CDK 或 npm。請注意，Node.js 13.0.0 到 13.6.0 版與 AWS CDK 不相容。

## Architecture
<a name="deploy-multiple-stack-applications-using-aws-cdk-with-typescript-architecture"></a>

**目標技術堆疊**
+ AWS Amplify 主控台
+ Amazon API Gateway
+ AWS CDK
+ Amazon CloudFront
+ Amazon Cognito
+ Amazon DynamoDB
+ Amazon Data Firehose
+ Amazon Kinesis Data Streams
+ AWS Lambda
+ Amazon Simple Storage Service (Amazon S3)

**目標架構**

下圖顯示使用 AWS CDK 搭配 TypeScript 的多堆疊應用程式部署。

![\[VPC 中的堆疊架構，具有父堆疊和兩個包含資源的子堆疊。\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/images/pattern-img/0ac29a11-1362-4084-92ed-6b85205763ca/images/8f92e86a-aa3d-4f8a-9b11-b92c52a7226c.png)


 

下圖顯示範例無伺服器即時應用程式的架構。

![\[區域中的應用程式架構。\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/images/pattern-img/0ac29a11-1362-4084-92ed-6b85205763ca/images/2df00faf-f871-4aec-9655-19ba2eb14cf8.png)


 

## 工具
<a name="deploy-multiple-stack-applications-using-aws-cdk-with-typescript-tools"></a>

**工具**
+ [AWS Amplify 主控台](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)是 AWS 中完全堆疊 Web 和行動應用程式部署的控制中心。Amplify 主控台託管提供以 git 為基礎的工作流程，用於託管具有持續部署的完整堆疊無伺服器 Web 應用程式。Admin UI 是前端 Web 和行動開發人員的視覺化界面，可在 AWS 主控台外部建立和管理應用程式後端。
+ [Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html) 是一種 AWS 服務，可用於建立、發佈、維護、監控和保護任何規模的 REST、HTTP 和 WebSocket APIs。
+ [AWS 雲端開發套件 (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) 是一種軟體開發架構，可協助您在程式碼中定義和佈建 AWS 雲端基礎設施。
+ [AWS CDK Toolkit](https://docs.aws.amazon.com/cdk/latest/guide/cli.html) 是命令列雲端開發套件，可協助您與 AWS CDK 應用程式互動。CLI `cdk` 命令是與您的 AWS CDK 應用程式互動的主要工具。它會執行您的應用程式、查詢您定義的應用程式模型，以及產生和部署由 AWS CDK 產生的 AWS CloudFormation 範本。
+ [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 是一種 Web 服務，可加速靜態和動態 Web 內容的分佈，例如 .html、.css、.js 和映像檔案。CloudFront 透過稱為節點的全球資料中心網路提供內容，以降低延遲並改善效能。
+ [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) 為您的 Web 和行動應用程式提供身分驗證、授權和使用者管理。您的使用者可以直接或透過第三方登入。
+ [Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/Introduction.html) 是全受管的 NoSQL 資料庫服務，可提供快速且可預測的效能和無縫的可擴展性。
+ [Amazon Data Firehose](https://docs.aws.amazon.com/firehose/latest/dev/what-is-this-service.html) 是一項全受管服務，可將即時[串流資料](https://aws.amazon.com/streaming-data/)交付至目的地，例如 Amazon S3、Amazon Redshift、Amazon OpenSearch Service、Splunk，以及受支援的第三方服務供應商擁有的任何自訂 HTTP 端點或 HTTP 端點。
+ [Amazon Kinesis Data Streams](https://docs.aws.amazon.com/streams/latest/dev/introduction.html) 是一項服務，可即時收集和處理大型資料記錄串流。
+ [AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) 是一種運算服務，支援執行程式碼，無需佈建或管理伺服器。Lambda 只有在需要時才會執行程式碼，可自動從每天數項請求擴展成每秒數千項請求。只需為使用的運算時間支付費用，一旦未執行程式碼，就會停止計費。
+ [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) 是一種雲端型物件儲存服務，可協助您儲存、保護和擷取任何數量的資料。

**Code**

此模式的程式碼已連接。

## 史詩
<a name="deploy-multiple-stack-applications-using-aws-cdk-with-typescript-epics"></a>

### 安裝 AWS CDK Toolkit
<a name="install-aws-cdk-toolkit"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 安裝 AWS CDK Toolkit。 | 若要全域安裝 AWS CDK Toolkit，請執行下列命令。`npm install -g aws-cdk` | DevOps | 
| 驗證版本。 | 若要驗證 AWS CDK Toolkit 版本，請執行下列命令。 `cdk --version` | DevOps | 

### 設定 AWS 登入資料
<a name="set-up-aws-credentials"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 設定登入資料。 | 若要設定登入資料，請執行 `aws configure`命令並依照提示操作。<pre>$aws configure<br />AWS Access Key ID [None]: <br />AWS Secret Access Key [None]: your_secret_access_key<br />Default region name [None]:<br />Default output format [None]:</pre> | DevOps | 

### 下載專案程式碼
<a name="download-the-project-code"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 下載連接的專案程式碼。 | 如需 目錄和檔案結構的詳細資訊，請參閱*其他資訊*一節。 | DevOps | 

### 引導 AWS CDK 環境
<a name="bootstrap-the-aws-cdk-environment"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 引導環境。 | 若要將 AWS CloudFormation 範本部署到您要使用的帳戶和 AWS 區域，請執行下列命令。`cdk bootstrap <account>/<Region>`如需詳細資訊，請參閱 [AWS 文件](https://docs.aws.amazon.com/cdk/latest/guide/bootstrapping.html)。 | DevOps | 

### 建置和部署專案
<a name="build-and-deploy-the-project"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 建置專案。 | 若要建置專案程式碼，請執行 `npm run build`命令。 | DevOps | 
| 部署專案。 | 若要部署專案程式碼，請執行 `cdk deploy`命令。 |  | 

### 驗證輸出
<a name="verify-outputs"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 驗證堆疊建立。 | 在 AWS 管理主控台上，選擇 **CloudFormation**。在專案的堆疊中，確認已建立父堆疊和兩個子堆疊。 | DevOps | 

### 測試應用程式。
<a name="test-the-application"></a>


| 任務 | Description | 所需的技能 | 
| --- | --- | --- | 
| 將資料傳送至 Kinesis Data Streams。 | 設定您的 AWS 帳戶，使用 Amazon Kinesis Data Generator (KDG) 將資料傳送至 Kinesis Data Streams。如需詳細資訊，請參閱 [Amazon Kinesis Data Generator](https://awslabs.github.io/amazon-kinesis-data-generator/web/help.html)。 | DevOps | 
| 建立 Amazon Cognito 使用者。 | 若要建立 Amazon Cognito 使用者，請從 [Kinesis Data Generator 說明頁面上](https://awslabs.github.io/amazon-kinesis-data-generator/web/help.html)*的建立 Amazon Cognito 使用者*區段下載 cognito-setup.json CloudFormation 範本。啟動範本，然後輸入您的 Amazon Cognito **使用者名稱和密碼******。**Outputs** 索引標籤會列出 Kinesis Data Generator URL。 | DevOps | 
| 登入 Kinesis Data Generator | 若要登入 KDG，請使用您提供的 Amazon Cognito 登入資料和 Kinesis Data Generator URL。 | DevOps | 
| 測試應用程式。 | 在 KDG 的記錄**範本****範本 1 **中，從*其他資訊*區段貼上測試碼，然後選擇**傳送資料**。 | DevOps | 
| 測試 API Gateway。 | 擷取資料之後，請使用 `GET`方法來擷取資料，以測試 API Gateway。 | DevOps | 

## 相關資源
<a name="deploy-multiple-stack-applications-using-aws-cdk-with-typescript-resources"></a>

**參考**
+ [AWS 雲端開發套件](https://aws.amazon.com/cdk/)
+ [GitHub 上的 AWS CDK](https://github.com/aws/aws-cdk)
+ [使用巢狀堆疊](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/using-cfn-nested-stacks.html)
+ [AWS 範例 - 無伺服器即時分析](https://github.com/aws-samples/serverless-realtime-analytics)

## 其他資訊
<a name="deploy-multiple-stack-applications-using-aws-cdk-with-typescript-additional"></a>

**目錄和檔案詳細資訊**

此模式會設定下列三個堆疊。
+ `parent-cdk-stack.ts` – 此堆疊做為父堆疊，並呼叫兩個子應用程式做為巢狀堆疊。 
+ `real-time-analytics-poc-stack.ts` – 此巢狀堆疊包含基礎設施和應用程式程式碼。
+ `real-time-analytics-web-stack.ts` – 此巢狀堆疊僅包含靜態 Web 應用程式程式碼。

*重要檔案及其功能*
+ `bin/real-time-analytics-poc.ts` – AWS CDK 應用程式的進入點。它會載入 下定義的所有堆疊`lib/`。
+ `lib/real-time-analytics-poc-stack.ts` – AWS CDK 應用程式堆疊的定義 (`real-time-analytics-poc`)。
+ `lib/real-time-analytics-web-stack.ts` – AWS CDK 應用程式堆疊的定義 (`real-time-analytics-web-stack`)。
+ `lib/parent-cdk-stack.ts` – AWS CDK 應用程式堆疊的定義 (`parent-cdk`)。
+ `package.json` – npm 模組資訊清單，其中包含應用程式名稱、版本和相依性。
+ `package-lock.json` – 由 npm 維護。
+ `cdk.json` – 用於執行應用程式的 工具組。
+ `tsconfig.json` – 專案的 TypeScript 組態。
+ `.gitignore` – Git 應從來源控制中排除的檔案清單。
+ `node_modules` – 由 npm 維護；包括專案的相依性。

父堆疊中的下一節程式碼會將子應用程式稱為巢狀 AWS CDK 堆疊。

```
import * as cdk from '@aws-cdk/core';
import { Construct, Stack, StackProps } from '@aws-cdk/core';
import { RealTimeAnalyticsPocStack } from './real-time-analytics-poc-stack';
import { RealTimeAnalyticsWebStack } from './real-time-analytics-web-stack';


export class CdkParentStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);


    new RealTimeAnalyticsPocStack(this, 'RealTimeAnalyticsPocStack');
    new RealTimeAnalyticsWebStack(this, 'RealTimeAnalyticsWebStack');
  }
}
```

**用於測試的程式碼**

```
session={{date.now('YYYYMMDD')}}|sequence={{date.now('x')}}|reception={{date.now('x')}}|instrument={{random.number(9)}}|l={{random.number(20)}}|price_0={{random.number({"min":10000, "max":30000})}}|price_1={{random.number({"min":10000, "max":30000})}}|price_2={{random.number({"min":10000, "max":30000})}}|price_3={{random.number({"min":10000, "max":30000})}}|price_4={{random.number({"min":10000, "max":30000})}}|price_5={{random.number({"min":10000, "max":30000})}}|price_6={{random.number({"min":10000, "max":30000})}}|price_7={{random.number({"min":10000, "max":30000})}}|price_8={{random.number({"min":10000, "max":30000})}}|
```

**測試 API Gateway**

在 API Gateway 主控台上，使用 `GET`方法測試 API Gateway。

![\[在 OPTIONS 下選擇具有 GET 的 API Gateway 主控台。\]](http://docs.aws.amazon.com/zh_tw/prescriptive-guidance/latest/patterns/images/pattern-img/0ac29a11-1362-4084-92ed-6b85205763ca/images/452e5b8f-6d61-401d-8484-e5a436cb6f1b.png)


 

## 附件
<a name="attachments-0ac29a11-1362-4084-92ed-6b85205763ca"></a>

若要存取與本文件相關聯的其他內容，請解壓縮下列檔案： [attachment.zip](samples/p-attach/0ac29a11-1362-4084-92ed-6b85205763ca/attachments/attachment.zip)