# はじめに
aws-cli が使えるようにしておきます
aws-cliのインストール
brew install awscli # aws-cliのインストール
aws --version # インストールされたことの確認
aws configure
で profile の設定をしておきます
awsのprofileの設定
aws configure # default というprofile名で作成
# もしくは aws configure --profile user1 などでdefault以外のprofile名で作成してもよい
# 以下の項目が聞かれるので、埋める
AWS Access Key ID [None]: {アクセスキー(各自)}
AWS Secret Access Key [None]: {シークレットアクセスキー(各自)}
Default region name [None]: ap-northeast-1
Default output format [None]: json (または yaml, text など)
awsコマンドを打ってみる
aws sts get-caller-identity # 呼び出した人のアカウントなどを取得
# profileを指定する場合は aws sts get-caller-identity --profile user1 などとする
aws configure list # default profileの設定を確認
aws iam list-users # IAMユーザーの一覧を確認
AWS-CLIの初期設定のメモ - Qiita
概要aws-cliを使い始めたので、設定について軽くメモを残す。AWS-CLI準備下記マニュアルを参考に、awsコマンドをインストールしてコマンドが使えるようにする。※ AWS CLI のイ…
![AWS-CLIの初期設定のメモ - Qiita](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QVdTLUNMSSVFMyU4MSVBRSVFNSU4OCU5RCVFNiU5QyU5RiVFOCVBOCVBRCVFNSVBRSU5QSVFMyU4MSVBRSVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9OWY5MzI5ODU4ZDU5MWM3YjJjMDc0YTUwMjcwYmMyYTE&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDByZWZsZXQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRlNDZiYjIzZDNmYTljOTM1OTlmYjg3NjFlMGRhMzhm&blend-x=142&blend-y=486&blend-mode=normal&s=2c3754ab665585ccb4697b5597e2084a)
AWS CLI 出力フォーマットを設定する - AWS Command Line Interface
AWS CLI からの出力の形式を制御します。
# 作っていく
## 前提
- 言語は typescript で行います
- エディタは vscode を使います
- node: 18.13.0(20 系だと aws-cdk がまだ対応してないみたいな警告が出たので 18 でやってみます)
- npm: 8.19.3
## ディレクトリ作成
ディレクトリ作成
mkdir zenn-cdk
cd zenn-cdk
git init
cd cdk
npx cdk init app --language typescript
ディレクトリ構成
$ tree -aL 2
.
├── .git
│ ├── HEAD
│ ├── config
│ ├── description
│ ├── hooks
│ ├── info
│ ├── objects
│ └── refs
├── .vscode
│ ├── extensions.json
│ └── settings.json
└── cdk
├── .gitignore
├── .npmignore
├── README.md
├── bin
├── cdk.json
├── jest.config.js
├── lib
├── node_modules
├── package-lock.json
├── package.json
├── test
└── tsconfig.json
## vscode の設定(飛ばしても OK)
個人の趣向なので、適当にカスタムしてください
.vscode/extensions.json
{
"recommendations": [
"esbenp.prettier-vscode", // typescriptをフォーマットする
"amazonwebservices.aws-toolkit-vscode", // vscode上でawsリソースを確認したりできる
]
}
.vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.tabSize": 2,
}
.prettierrc
{
"trailingComma": "all",
"tabWidth": 2,
"singleQuote": true,
"semi": true
}
## cdk bootstrap
cdk-bootstrap
npx cdk bootstrap # default profileで設定
# もしくは cdk bootstrap aws://XXXXXXXX/ap-northeast-1 --profile cm-wada など
## s3 と cloudfront を作る
lib/cdk-stack.ts
import * as cdk from 'aws-cdk-lib';
import { Construct } from 'constructs';
export class CdkStack extends cdk.Stack {
constructor(scope: Construct, id: string, props?: cdk.StackProps) {
super(scope, id, props);
// 静的サイトホスティング用のバケットを作成
const bucket = new cdk.aws_s3.Bucket(this, 'ZennCdkTestBucket', {
bucketName: 'zenn-cdk-test-bucket',
removalPolicy: cdk.RemovalPolicy.DESTROY, // スタック削除時(npx cdk destroy実行時)にバケットも削除(ただし、s3の中身を空にしておかないとエラーになる)
});
// cloudfront用のoriginAccessIdentityを作成
const originAccessIdentity = new cdk.aws_cloudfront.OriginAccessIdentity(
this,
'OriginAccessIdentity',
{
comment: 'OriginAccessIdentityForStaticSiteHostingBucket',
},
);
// bucket policyを作成
const bucketPolicy = new cdk.aws_iam.PolicyStatement({
actions: ['s3:GetObject'], // GetObjectのみ許可
resources: [`${bucket.bucketArn}/*`], // バケット内の全てのオブジェクトを対象
// originAccessIdentityから(CloudFront経由でのアクセス)のみを許可
principals: [
new cdk.aws_iam.CanonicalUserPrincipal(
originAccessIdentity.cloudFrontOriginAccessIdentityS3CanonicalUserId,
),
],
});
// bucketにpolicyを追加
bucket.addToResourcePolicy(bucketPolicy);
// cloudfrontの設定
const distribution = new cdk.aws_cloudfront.Distribution(
this,
'distribution',
{
comment: 'DistributionForStaticSiteHostingBucket',
defaultRootObject: 'index.html', // index.htmlをデフォルトルートに設定
defaultBehavior: {
compress: true, // 圧縮を有効化
viewerProtocolPolicy:
cdk.aws_cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS, // httpからのアクセスをhttpsにリダイレクト
allowedMethods: cdk.aws_cloudfront.AllowedMethods.ALLOW_GET_HEAD, // GETとHEADのみ許可
origin: new cdk.aws_cloudfront_origins.S3Origin(bucket, {
originAccessIdentity,
}),
},
},
);
// s3にデプロイ
new cdk.aws_s3_deployment.BucketDeployment(this, 'BucketDeployment', {
destinationBucket: bucket,
distribution,
sources: [
cdk.aws_s3_deployment.Source.data(
'/index.html',
'<html><body><h1>Hello, World!</h1></body></html>',
),
],
});
// cloudfrontのURLを出力
// CfnOutputはcdkのスタックをデプロイした後に出力される値を出力する時に使う
// 参考: https://zenn.dev/winteryukky/articles/5e5353ae72ab5c
new cdk.CfnOutput(this, 'URL', {
value: `https://${distribution.distributionDomainName}`,
});
}
}
AWS CDKでデプロイ時の値を使ってフロントエンドとバックエンドを一発でデプロイできるようになったので試してみる
![AWS CDKでデプロイ時の値を使ってフロントエンドとバックエンドを一発でデプロイできるようになったので試してみる](https://res.cloudinary.com/zenn/image/upload/s--kBCQYZLJ--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:AWS%2520CDK%25E3%2581%25A7%25E3%2583%2587%25E3%2583%2597%25E3%2583%25AD%25E3%2582%25A4%25E6%2599%2582%25E3%2581%25AE%25E5%2580%25A4%25E3%2582%2592%25E4%25BD%25BF%25E3%2581%25A3%25E3%2581%25A6%25E3%2583%2595%25E3%2583%25AD%25E3%2583%25B3%25E3%2583%2588%25E3%2582%25A8%25E3%2583%25B3%25E3%2583%2589%25E3%2581%25A8%25E3%2583%2590%25E3%2583%2583%25E3%2582%25AF%25E3%2582%25A8%25E3%2583%25B3%25E3%2583%2589%25E3%2582%2592%25E4%25B8%2580%25E7%2599%25BA%25E3%2581%25A7%25E3%2583%2587%25E3%2583%2597%25E3%2583%25AD%25E3%2582%25A4%25E3%2581%25A7%25E3%2581%258D%25E3%2582%258B%25E3%2582%2588%25E3%2581%2586%25E3%2581%25AB%25E3%2581%25AA%25E3%2581%25A3%25E3%2581%259F%25E3%2581%25AE%25E3%2581%25A7%25E8%25A9%25A6%25E3%2581%2597%25E3%2581%25A6%25E3%2581%25BF%25E3%2582%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:WinterYukky%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hQRW5Wd0MyMnZHYlRLNTI5d2IwaXVtaTdOX194NEVxQ2J1OHd5PXM5Ni1j%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png)
[AWS CDK(Cloud Development Kit)] スタック削除時にS3バケットも削除されるように設定する | DevelopersIO
コンニチハ、千葉です。 CDKの検証で、スタック環境を作成、削除をしていたのですが、cdk destroy を実行しても作成したS3バケットが残ってました。なぜだろう?と思い調査をはじめました。 背景 GitHubのイシ …
![[AWS CDK(Cloud Development Kit)] スタック削除時にS3バケットも削除されるように設定する | DevelopersIO](https://devio2023-media.developers.io/wp-content/uploads/2019/08/aws-cloud-development-kit.png)
## デプロイ
デプロイ
npm run build # tscが実行される, 念の為コンパイルが通ることを確認
# 本当はjestでテスト書いて、npm testが通ること確認とかしたい
npx cdk synth # CDKのコードからCFnのテンプレートが生成される
# デプロイ前にvscodeのaws toolkitとかでstackの内容を確認しておくのもおすすめ
npx cdk deploy # デプロイコマンド
# Outputs:
# CdkStack.URL = https://hogehoge.cloudfront.net
url にアクセスして Hello world!と出たら OK です s3 の index.html に直アクセスができないことから OAI も効いていることを確かめます さらに、cloudformation にアクセスして、stack ができていることを確かめるとより勉強になるかもしれません
## お片付け
- s3 の中身を空にする
npx cdk destroy
- cloudformation で stack がきえていることを確認する
- URL にアクセスできないことを確認する