---
title: AWS 初心者 - 用 AWS CDK 我也可以一鍵上傳前端網站
tags: AWSUG
slideOptions:
theme: league
transition: 'slide'
---

## 用 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 簡介
目前支援語言 TypeScript, JavaScript, Python, Java, C#/.Net 還有正在 preview 的 Go

---

### 為什麼要使用 AWS CDK
如下 20 行的 CDK 可以變出高達 500 行的 CloudFormation 腳本

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
超好用的自動補完提示

---

### AWS CDK 版本
- 目前同步更新 v1 與 v2
- CDK v1 在 2022/06/01 進入維護模式，之後只會修復 BUG 與進行安全更新
- CDK v1 最後支援到 2023/06/01

---

### 安裝 CDK 必要指令
* AWS CLI：

python3 -m pip install --no-input --upgrade awscli

* AWS CDK CLI：

npm install -g aws-cdk

---

### 設定 AWS CLI

$ 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

mkdir hello-cdk && cd hello-cdk
cdk init --language=typescript

#### 使用 projen

mkdir hello-cdk && cd hello-cdk
npx projen new awscdk-app-ts

----

### 創建專案
#### 使用 projen 指令版本

mkdir hello-cdk && cd hello-cdk
npx projen new awscdk-app-ts --cdk-version 2.1.0

---

### 比較 CDK v1 與 v2 import 差別
#### CDK v1

import * as s3 from '@aws-cdk/aws-s3';
import * as s3deploy from '@aws-cdk/aws-s3-deployment';

#### CDK v2

aws_s3 as s3
aws_s3_deployment as s3deploy

---

## Workshop
https://github.com/clarencetw/gitpod-cdk-web