WebLog

aws-cdkを使ってs3+cloudfrontの静的サイトホスティングを作る

2023/06/04 13:34

はじめに

aws-cli が使えるようにしておきます

aws-cliのインストール
1brew install awscli # aws-cliのインストール
2aws --version # インストールされたことの確認

aws configureで profile の設定をしておきます

awsのprofileの設定
1aws configure # default というprofile名で作成
2# もしくは aws configure --profile user1 などでdefault以外のprofile名で作成してもよい
3
4# 以下の項目が聞かれるので、埋める
5AWS Access Key ID [None]: {アクセスキー(各自)}
6AWS Secret Access Key [None]: {シークレットアクセスキー(各自)}
7Default region name [None]: ap-northeast-1
8Default output format [None]: json (または yaml, text など)
awsコマンドを打ってみる
1aws sts get-caller-identity # 呼び出した人のアカウントなどを取得
2# profileを指定する場合は aws sts get-caller-identity --profile user1 などとする
3
4aws configure list # default profileの設定を確認
5aws iam list-users # IAMユーザーの一覧を確認
AWS-CLIの初期設定のメモ #aws-cli - Qiita

AWS-CLIの初期設定のメモ #aws-cli - Qiita

概要aws-cliを使い始めたので、設定について軽くメモを残す。AWS-CLI準備下記マニュアルを参考に、awsコマンドをインストールしてコマンドが使えるようにする。※ AWS CLI のイ…

AWS CLI 出力フォーマットを設定する - AWS Command Line InterfaceAWS CLI 出力フォーマットを設定する - AWS Command Line Interface
AWS CLI 出力フォーマットを設定する - AWS Command Line InterfaceAWS CLI 出力フォーマットを設定する - AWS Command Line Interface

AWS CLI 出力フォーマットを設定する - AWS Command Line InterfaceAWS CLI 出力フォーマットを設定する - AWS Command Line Interface

AWS Command Line Interface (AWS CLI) からの出力の形式を制御します。IAM アイデンティティセンター

作っていく

前提

  • 言語は typescript で行います
  • エディタは vscode を使います
  • node: 18.13.0(20 系だと aws-cdk がまだ対応してないみたいな警告が出たので 18 でやってみます)
  • npm: 8.19.3

ディレクトリ作成

1mkdir zenn-cdk
2cd zenn-cdk
3git init
4cd cdk
5npx cdk init app --language typescript
1$ tree -aL 2
2.
3├── .git
4├── HEAD
5├── config
6├── description
7├── hooks
8├── info
9├── objects
10└── refs
11├── .vscode
12├── extensions.json
13└── settings.json
14└── cdk
15 ├── .gitignore
16 ├── .npmignore
17 ├── README.md
18 ├── bin
19 ├── cdk.json
20 ├── jest.config.js
21 ├── lib
22 ├── node_modules
23 ├── package-lock.json
24 ├── package.json
25 ├── test
26 └── tsconfig.json

vscode の設定(飛ばしても OK)

個人の趣向なので、適当にカスタムしてください

.vscode/extensions.json
1{
2 "recommendations": [
3 "esbenp.prettier-vscode", // typescriptをフォーマットする
4 "amazonwebservices.aws-toolkit-vscode", // vscode上でawsリソースを確認したりできる
5 ]
6}
.vscode/settings.json
1{
2 "editor.defaultFormatter": "esbenp.prettier-vscode",
3 "editor.formatOnSave": true,
4 "editor.tabSize": 2,
5}
.prettierrc
1{
2 "trailingComma": "all",
3 "tabWidth": 2,
4 "singleQuote": true,
5 "semi": true
6}

cdk bootstrap

cdk-bootstrap
1npx cdk bootstrap # default profileで設定
2# もしくは cdk bootstrap aws://XXXXXXXX/ap-northeast-1 --profile cm-wada など

s3 と cloudfront を作る

lib/cdk-stack.ts
1import * as cdk from 'aws-cdk-lib';
2import { Construct } from 'constructs';
3
4export class CdkStack extends cdk.Stack {
5 constructor(scope: Construct, id: string, props?: cdk.StackProps) {
6 super(scope, id, props);
7
8 // 静的サイトホスティング用のバケットを作成
9 const bucket = new cdk.aws_s3.Bucket(this, 'ZennCdkTestBucket', {
10 bucketName: 'zenn-cdk-test-bucket',
11 removalPolicy: cdk.RemovalPolicy.DESTROY, // スタック削除時(npx cdk destroy実行時)にバケットも削除(ただし、s3の中身を空にしておかないとエラーになる)
12 });
13
14 // cloudfront用のoriginAccessIdentityを作成
15 const originAccessIdentity = new cdk.aws_cloudfront.OriginAccessIdentity(
16 this,
17 'OriginAccessIdentity',
18 {
19 comment: 'OriginAccessIdentityForStaticSiteHostingBucket',
20 },
21 );
22
23 // bucket policyを作成
24 const bucketPolicy = new cdk.aws_iam.PolicyStatement({
25 actions: ['s3:GetObject'], // GetObjectのみ許可
26 resources: [`${bucket.bucketArn}/*`], // バケット内の全てのオブジェクトを対象
27 // originAccessIdentityから(CloudFront経由でのアクセス)のみを許可
28 principals: [
29 new cdk.aws_iam.CanonicalUserPrincipal(
30 originAccessIdentity.cloudFrontOriginAccessIdentityS3CanonicalUserId,
31 ),
32 ],
33 });
34
35 // bucketにpolicyを追加
36 bucket.addToResourcePolicy(bucketPolicy);
37
38 // cloudfrontの設定
39 const distribution = new cdk.aws_cloudfront.Distribution(
40 this,
41 'distribution',
42 {
43 comment: 'DistributionForStaticSiteHostingBucket',
44 defaultRootObject: 'index.html', // index.htmlをデフォルトルートに設定
45 defaultBehavior: {
46 compress: true, // 圧縮を有効化
47 viewerProtocolPolicy:
48 cdk.aws_cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS, // httpからのアクセスをhttpsにリダイレクト
49 allowedMethods: cdk.aws_cloudfront.AllowedMethods.ALLOW_GET_HEAD, // GETとHEADのみ許可
50 origin: new cdk.aws_cloudfront_origins.S3Origin(bucket, {
51 originAccessIdentity,
52 }),
53 },
54 },
55 );
56
57 // s3にデプロイ
58 new cdk.aws_s3_deployment.BucketDeployment(this, 'BucketDeployment', {
59 destinationBucket: bucket,
60 distribution,
61 sources: [
62 cdk.aws_s3_deployment.Source.data(
63 '/index.html',
64 '<html><body><h1>Hello, World!</h1></body></html>',
65 ),
66 ],
67 });
68
69 // cloudfrontのURLを出力
70 // CfnOutputはcdkのスタックをデプロイした後に出力される値を出力する時に使う
71 // 参考: https://zenn.dev/winteryukky/articles/5e5353ae72ab5c
72 new cdk.CfnOutput(this, 'URL', {
73 value: `https://${distribution.distributionDomainName}`,
74 });
75 }
76}
AWS CDKでデプロイ時の値を使ってフロントエンドとバックエンドを一発でデプロイできるようになったので試してみるZennZenn

AWS CDKでデプロイ時の値を使ってフロントエンドとバックエンドを一発でデプロイできるようになったので試してみるZennZenn

[AWS CDK(Cloud Development Kit)] スタック削除時にS3バケットも削除されるように設定する | DevelopersIO
[AWS CDK(Cloud Development Kit)] スタック削除時にS3バケットも削除されるように設定する | DevelopersIO

[AWS CDK(Cloud Development Kit)] スタック削除時にS3バケットも削除されるように設定する | DevelopersIO

コンニチハ、千葉です。 CDKの検証で、スタック環境を作成、削除をしていたのですが、cdk destroy を実行しても作成したS3バケットが残ってました。なぜだろう?と思い調査をはじめました。 背景 GitHubのイシ …

デプロイ

1npm run build # tscが実行される, 念の為コンパイルが通ることを確認
2# 本当はjestでテスト書いて、npm testが通ること確認とかしたい
3
4npx cdk synth # CDKのコードからCFnのテンプレートが生成される
5# デプロイ前にvscodeのaws toolkitとかでstackの内容を確認しておくのもおすすめ
6
7npx cdk deploy # デプロイコマンド
8
9# Outputs:
10# CdkStack.URL = https://hogehoge.cloudfront.net

url にアクセスして Hello world!と出たら OK です s3 の index.html に直アクセスができないことから OAI も効いていることを確かめます さらに、cloudformation にアクセスして、stack ができていることを確かめるとより勉強になるかもしれません

お片付け

  • s3 の中身を空にする
  • npx cdk destroy
  • cloudformation で stack がきえていることを確認する
  • URL にアクセスできないことを確認する

最新の投稿