## 用 AWS CDK 我也可以一鍵上傳前端網站
`---`
AWS User Group Taiwan Meetup 2021-12 線上 / 下小聚
---
## Clarence Lin
- 《AWS CDK 完全學習手冊》作者
- 第 12 屆 iT 邦幫忙鐵人賽 DevOps 組冠軍。
- 現職
* 長問科技雲端技術資深工程師
* 田茂智能互聯雲端解決方案技術顧問
- Twitter https://twitter.com/clarence_lin
- 部落格 https://blog.clarence.tw
- Facebook https://fb.me/ClarenceTaiwan
---
## AWS CDK 完全學習手冊
書籍特色
* 中文書籍
* 一步一腳印
* 高實用性的工具書
* 自動化部署 LAMP(Linux、Apache、MariaDB、PHP)叢集
* 在 AWS 上部署 Docker 容器解決方案
* 開發自動部署的 CDK Construct Library
---
## 簡介
* 帶初心者從 0 到 1 認識 AWS CDK,並且教你使用 CDK 一鍵上傳前端網站,體驗基礎架構程式碼 (IaC) 的神奇魔法把靜態網站部署上 S3,歡迎大家一起討論。
---
### AWS CDK 簡介
![](https://i.imgur.com/mpIc7Cz.png =500x)
目前支援語言 TypeScript, JavaScript, Python, Java, C#/.Net 還有正在 preview 的 Go
---
### 為什麼要使用 AWS CDK
如下 20 行的 CDK 可以變出高達 500 行的 CloudFormation 腳本
```typescript=
export class MyEcsConstructStack extends core.Stack {
constructor(scope: core.App, id: string, props?: core.StackProps) {
super(scope, id, props);
const vpc = new ec2.Vpc(this, "MyVpc", {
maxAzs: 3 // 使用 3 個 AZ
});
const cluster = new ecs.Cluster(this, "MyCluster", {
vpc: vpc
});
// 建立 ALB 串接 Fargate 的 ECS Service
new ecs_patterns.ApplicationLoadBalancedFargateService(this, "MyFargateService", {
cluster,
taskImageOptions: { image: ecs.ContainerImage.fromRegistry("amazon/amazon-ecs-sample") },
publicLoadBalancer: true // 預設為 false 僅內部使用 ALB
});
}
}
```
----
### 為什麼要使用 AWS CDK
此程式定義了 50 種資源
* AWS::EC2::EIP
* AWS::EC2::InternetGateway
* AWS::EC2::NatGateway
* AWS::EC2::Route
* AWS::EC2::RouteTable
* AWS::EC2::SecurityGroup
* AWS::EC2::Subnet
* AWS::EC2::SubnetRouteTableAssociation
----
### 為什麼要使用 AWS CDK
此程式定義了 50 種資源
* AWS::EC2::VPCGatewayAttachment
* AWS::EC2::VPC
* AWS::ECS::Cluster
* AWS::ECS::Service
* AWS::ECS::TaskDefinition
* AWS::ElasticLoadBalancingV2::Listener
* AWS::ElasticLoadBalancingV2::LoadBalancer
* AWS::ElasticLoadBalancingV2::TargetGroup
* AWS::IAM::Policy
* AWS::IAM::Role
* AWS::Logs::LogGroup
----
### 為什麼要使用 AWS CDK
超好用的自動補完提示
![](https://i.imgur.com/J4XGjLC.png =550x)
---
### AWS CDK 版本
- 目前同步更新 v1 與 v2
- CDK v1 在 2022/06/01 進入維護模式,之後只會修復 BUG 與進行安全更新
- CDK v1 最後支援到 2023/06/01
---
### 安裝 CDK 必要指令
* AWS CLI:
```bash=
python3 -m pip install --no-input --upgrade awscli
```
* AWS CDK CLI:
```bash=
npm install -g aws-cdk
```
---
### 設定 AWS CLI
```bash=
$ aws configure
AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-west-2
Default output format [None]:
```
----
### 測試 AWS CLI 是否有設定正常
```
$ aws sts get-caller-identity
{
"UserId": "AKIAIOSFODNN7EXAMPLE",
"Account": "888888888888",
"Arn": "arn:aws:iam::888888888888:user/clarence"
}
```
----
### CDK CLI 指令
- 列出所有的 stack:`cdk list` aka `cdk ls`
- 列出 CDK 專案的 CloudFormation 腳本:`cdk synthesize` aka `cdk synth`
- `cdk synth --json`
- 部署:CDK toolkit stack:`cdk bootstrap`
- 部署指令:`cdk deploy`
- 即時監看指令:`cdk watch`
- 移除部署:`cdk destroy`
- 部署比對:`cdk diff`
- 列出 CDK docs:`cdk docs`
----
### CDK CLI 指令
- 創建 CDK 專案 `cdk init`
- 列出創建專案可使用的指令 `cdk init --list`
- `cdk init -l typescript`
- `cdk init lib`
----
### CDK CLI 部署指令
- 關閉 approval `--require-approval=never`
- 指定當前的 Region `AWS_DEFAULT_REGION=us-west-2 cdk deploy`
---
### CDK 參考文件
- https://docs.aws.amazon.com/zh_tw/cdk/latest/guide/home.html
- https://github.com/aws-samples/aws-cdk-examples
- https://constructs.dev
- https://www.youtube.com/PahudDev
- https://www.ernestchiang.com/zh/notes/aws/cdk/
---
### 創建專案
#### 使用 CDK CLI
```bash=
mkdir hello-cdk && cd hello-cdk
cdk init --language=typescript
```
#### 使用 projen
```bash=
mkdir hello-cdk && cd hello-cdk
npx projen new awscdk-app-ts
```
----
### 創建專案
#### 使用 projen 指令版本
```bash=
mkdir hello-cdk && cd hello-cdk
npx projen new awscdk-app-ts --cdk-version 2.1.0
```
---
### 比較 CDK v1 與 v2 import 差別
#### CDK v1
```typescript=
import * as s3 from '@aws-cdk/aws-s3';
import * as s3deploy from '@aws-cdk/aws-s3-deployment';
```
#### CDK v2
```typescript=
aws_s3 as s3
aws_s3_deployment as s3deploy
```
---
## Workshop
https://github.com/clarencetw/gitpod-cdk-web
{"metaMigratedAt":"2023-06-16T15:47:29.725Z","metaMigratedFrom":"YAML","title":"AWS 初心者 - 用 AWS CDK 我也可以一鍵上傳前端網站","breaks":true,"slideOptions":"{\"theme\":\"league\",\"transition\":\"slide\"}","contributors":"[{\"id\":\"87a2f775-6516-4b87-9d7b-a8b6cf8deff3\",\"add\":5211,\"del\":915}]"}