## 用 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\"}"}
    801 views