Profile

こうブログ

「そういえばこんなことやってたな」っていうブログ


AWS CDK Pipeline Static Site

2026年6月21日

概要

AWS CDK Pipeline を使用して S3 + CloudFront 構成を作成しました。

検証のために同一アカウントにて作成します。


成果物

https://github.com/m-kotaro/cdk-pipeline-001


AWSアーキテクチャ

AWSアーキテクチャ


おおよその構築の流れ

細かいところは実際のリポジトリを見てもらうとして、おおよその流れを記します。
あまり初学者向けじゃないけど許して!

フォークする??

https://github.com/m-kotaro/cdk-pipeline-001 を自分の GitHub アカウントにフォークしてね!

ドメイン準備

自分の独自ドメインを準備します。
僕の場合は m-kotaro.net

CDK Bootstrap

CDK つかうならこれをやらんと始まらん。

CloudShell で下記を実行。

export ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)
export REGION=ap-northeast-1

npx cdk bootstrap aws://${ACCOUNT_ID}/${REGION}

CDKToolkit というCloudFormationスタックができていればOK

CodeConnection の作成

cfn/codeconnection.yaml を流します。
README に従って CLI でも、GUI で作成してもOK。

スタック名 : stack-cp001-codeconnection

GitHub接続

GitHub への接続が作成されているので更新して接続。
対象のリポジトリへの許可を出します。

Hosted Zone の作成

cfn/hostedzone.yaml を流します。
README に従って CLI でも、GUI で作成してもOK。

dev / prd どちらも作ります。

dev : stack-cp001-dev-hostedzone prd : stack-cp001-prd-hostedzone

DOMAIN_NAME に親ドメインを指定して作成。

DNS 登録

CloudFormation スタックの出力にドメインとNSレコードが出力されるので親ドメインにNSレコードを登録します。
dev/prd どっちも。
画像は AWS Route53 の場合。

CDK デプロイ

初回のみ、ソースコードを zip に圧縮して CloudShell にアップロードして実行。

unzip cdk-pipeline-001.zip && cd cdk-pipeline-001 && cd cdk
npm ci
npx cdk deploy

dev Stage

CodePipelineが動いていて、dev Stage が成功していれば一旦OK

承認

承認フローにて、prd へのリリースは承認が必要です。
承認すれば prd 環境へのリソースが構築されます。

Congratulations!🎉

dev も prd もできていればOK

index.html アップロード

s3-cp001-dev-site, s3-cp001-prd-siteindex.html をアップロードして dev.example.com, prd.example.com にアクセスしてみましょう。
サイトが表示されていればOK


まとめ

AWS CDK Pipeline を利用して AWS CDK をデプロイしてみました。 AWS CDK Pipeline は CDK デプロイの公式推奨みたいですね。

確かにラクだが、色々イレギュラーなのとキャッチアップが必要なのでチーム戦でやるにはちょっと難しいかも。
その辺を習熟しているメンバーを集めるか習熟をしてもらわないといけなくて要員確保が面倒なので、本採用となるにはいくつかハードルがあるかもしれないですね。

ただ、腐らせるには勿体無いので、機会があったら使ってみようと思います。