早さを求めて個人アプリをAmplifyからCDKに移行してみた！

Transcript

1. 早さを求めて個人アプリをAmplifyから CDKに移行してみた！ JAWS-UG CDK支部 #26 〜CDKに関する真夏のLT大会〜 2026/09/08 鈴木陽介
2. 自己紹介 鈴木 陽介(アマコネ芸人) ◆所属：株式会社ウフル ◆業務内容 • お客様窓口(コンタクトセンター)の構築 ◆好きなサービス • Amazon Connect Customer , AWS CDK ◆最近ハマっていること • Slack App開発 • Webアプリ開発(Amplify Gen2)
3. 本日の内容について ◆Qiitaに投稿した以下の記事をベースにアップデートした内容です。 ◆ご興味がある方がいらっしゃいましたらこちらから確認いただけると幸いです！
4. はじめに：作ったもの • AI模試ノート(ベンダー資格対策問題集アプリ) • AWS ANSリベンジのために開発中… • 試験ガイドやSkill Builder (無料サンプル問題), 合格体験記系Techブログをベースに問題生成 • クローズドβテスト中(弊社開発メンバー)
5. はじめに：作ったもの • AI模試ノート(ベンダー資格対策問題集アプリ) • AWS ANSリベンジのために開発中… • 試験ガイドやSkill Builder (無料サンプル問題), 合格体験記系Techブログをベースに問題生成 • クローズドβテスト中(弊社開発メンバー) • プチ実績：合格実績あり(笑)
6. システム構成(概要)
7. Amplify を使ったWebアプリ開発について(所感) • 機能としては大満足！ • SSRでの ホスティングと Cognito 認証基盤が揃っている • Git push だけでビルドからデプロイまで完結(CI/CD)を自前する必要なし • アイドル時ほぼ0円(無料枠範囲)
8. Amplify を使ったWebアプリ開発について(所感) • 機能としては大満足！ • SSRでの ホスティングと Cognito 認証基盤が揃っている • Git push だけでビルドからデプロイまで完結(CI/CD)を自前する必要なし • アイドル時ほぼ0円(無料枠範囲) • 気になった点：Amplify ビルド時間 • 1回あたり平均 7.5分：build時のキャッシュの往復がネック • 復元 91秒 ＋ 作成・アップロード 109秒 で全体の約半分 • リリース:200回弱/月： • ビルド時間課金が嵩む(0.01 USD・分)ためなるべく短縮したい…
9. ビルド時間の内訳 (例：新規試験問題追加時) キャッシュ作成・アップロード 109秒 next build (コンパイル・型検査) 98秒 キャッシュ復元 (取得・展開) 91秒 バックエンド deploy (ampx) 44秒 環境キャッシュ・後処理 22秒 npm install 20秒 セットアップ・clone 4秒 キャッシュ関連だけで 3分22秒 = 全体の 51%
10. ビルド時間の内訳 (例：新規試験問題追加時) キャッシュ作成・アップロード 109秒 next build (コンパイル・型検査) 98秒 キャッシュ復元 (取得・展開) 91秒 バックエンド deploy (ampx) 44秒 環境キャッシュ・後処理 22秒 20秒 npm install セットアップ・clone キャッシュ関連だけで 3分22秒 = 全体の 51% 4秒 もっと劇的に 早くビルドするには・・・
11. まず Amplify のままビルド時間を短縮するには buildSpecの見直し • キャッシュを対象の選定 • .npm 484MB をキャッシュ対象から外す ： node_modules が復元されるなら不要 • CDK 系依存を devDependencies へ整理 ： node_modules 2.2GB を圧縮 • ビルド回数自体を減らす • 文言修正だけなら PR をまとめて 1 ビルドに寄せる
12. まず Amplify のままビルド時間を短縮するには buildSpecの見直し • キャッシュを対象の選定 • .npm 484MB をキャッシュ対象から外す ： node_modules が復元されるなら不要 • CDK 系依存を devDependencies へ整理 ： node_modules 2.2GB を圧縮 • ビルド回数自体を減らす • 文言修正だけなら PR をまとめて 1 ビルドに寄せる • CDKでローカルデプロイ • → コンテナ起動やキャッシュ転送・再生成時間なども無いのではもっと早くなる(はず！)
13. 検証スタックのアーキテクチャ Amplify Gen2 と同種の構成を素の CDK で再現。CloudFront+S3 + Lambda Web Adapter
14. 素の CDK で検証 ： 遅さの正体は安定化待ち cdk deploy 301秒 の内訳（LWA 構成・新規作成） CloudFront Distribution 約156秒 キャッシュ無効化 待ち 約90秒 その他 約55秒 デプロイ時間の 約8割がCloudFront と キャッシュ無効化待ち CONSISTENCY_CHECK (一貫性チェック) ＋ キャッ シュ無効化待ち そもそもCloudFormation は何を待っている？ ・リソースを作った後、設定が全リージョンへ行き 渡るのを確認してから次へ進む。 →CloudFront はこの伝播が遅い(初回デプロイ)。 ・他静的アセット配置(BucketDeployment)も Distribution の ID を参照するのでさらに待機時間増
15. 素の CDK で検証 ： 遅さの正体は安定化待ち cdk deploy 301秒 の内訳（LWA 構成・新規作成） CloudFront Distribution 約156秒 キャッシュ無効化 待ち 約90秒 その他 約55秒 デプロイ時間の 約8割がCloudFront と キャッシュ無効化待ち CONSISTENCY_CHECK (一貫性チェック) ＋ キャッ シュ無効化待ち そもそもCloudFormation は何を待っている？ ・リソースを作った後、設定が全リージョンへ行き 渡るのを確認してから次へ進む。 →CloudFront はこの伝播が遅い(初回デプロイ)。 ・他静的アセット配置(BucketDeployment)も Distribution の ID を参照するのでさらに待機時間増 Amplify から CDK に移しただけでは・・・ 483秒 → 329秒 の 約1.5倍どまり 待ち時間そのものは残ったまま
16. 解消法：CDK Express モードを使う • 何をするもの？ • cdk deploy --express で CloudFormation の安定化待ち(一貫性チェック)を省略 • 既存の CDK コードはそのまま利用可能
17. 解消法：CDK Express モードを使う • 何をするもの？ • cdk deploy --express で CloudFormation の安定化待ち(一貫性チェック)を省略 • 既存の CDK コードはそのまま利用可能 • 実測 ： ほぼ変わらず • デプロイ時間 301秒 → 270秒 で 約1.1倍(全体 329秒 → 281秒) • 理由 ： 待ちの正体が Express の対象外 (カスタムリソース) • Custom::CDKBucketDeployment の キャッシュ無効化待ち(120秒) • →カスタムリソースのためスキップ対象外(参考)
18. 解消法：CDK Express モードを使う • 何をするもの？ • cdk deploy --express で CloudFormation の安定化待ち(一貫性チェック)を省略 • 既存の CDK コードはそのまま利用可能 • 実測 ： ほぼ変わらず • デプロイ時間 301秒 → 270秒 で 約1.1倍(全体 329秒 → 281秒) • 理由 ： 待ちの正体が Express の対象外 (カスタムリソース) • Custom::CDKBucketDeployment の キャッシュ無効化待ち(120秒) • →カスタムリソースのためスキップ対象外(参考) • もっと早いのがあるぞ(神の声)
19. cdkd (CDK Direct) AWS DevTools Hero の gotoさん が開発した OSS(GitHub https://github.com/go-to-k/cdkd) • CDK CLI をフルスクラッチで作り直したツール(紹介記事： https://zenn.dev/go_to_k/articles/cdkd-cdk-direct) • 最大 15倍 速いデプロイ • CloudFormationを介さずAWS SDK で直接プロビジョニング • CDK 互換(書き換え不要) • cdk deploy を cdkd deploy に置き換えるだけ。 • CDK CLI を置き換えるものではなく、補完するもの • 開発 ・ テスト向け (本番はCDKを推奨)
20. cdkd (CDK Direct) AWS DevTools Hero の gotoさん が開発した OSS(GitHub https://github.com/go-to-k/cdkd) • CDK CLI をフルスクラッチで作り直したツール(紹介記事： https://zenn.dev/go_to_k/articles/cdkd-cdk-direct) • 最大 15倍 速いデプロイ • CloudFormationを介さずAWS SDK で直接プロビジョニング • CDK 互換(書き換え不要) • cdk deploy を cdkd deploy に置き換えるだけ。 • CDK CLI を置き換えるものではなく、補完するもの • 開発 ・ テスト向け (本番はCDKを推奨) 早さ is 正義
21. cdkd (CDK Direct) やっていき！ AWS DevTools Hero の gotoさん が開発した OSS(GitHub https://github.com/go-to-k/cdkd) • CDK CLI をフルスクラッチで作り直したツール(紹介記事： https://zenn.dev/go_to_k/articles/cdkd-cdk-direct) • 最大 15倍 速いデプロイ • CloudFormationを介さずAWS SDK で直接プロビジョニング • CDK 互換(書き換え不要) • cdk deploy を cdkd deploy に置き換えるだけ。 • CDK CLI を置き換えるものではなく、補完するもの • 開発 ・ テスト向け (本番はCDKを推奨) 早さ is 正義
22. cdkd はなぜ速いのか(概要) synth までは CDK と完全に同じ。デプロイエンジンが違う(CDK CLIとCFnエンジンをフルスクラッチ) cdk deploy (CDK CLI + CloudFormation) cdkd deploy (フルスクラッチエンジン) CloudFormation テンプレート作成まではCDKと同じ Asset Build & Publish Asset Build & Publish S3 ZIP アップロード・ECR イメージの push S3 ZIP アップロード・ECR イメージの push ▼ ▼ ChangeSet 作成 cdkd Engine 変更セットを CloudFormation に登録 DAG 解析・Diff 計算・並列実行 ▼ ▼ CFn が順次実行 SDK Provider Cloud Control API 各リソースの安定化を待って進む 各リソースを SDK で直接操作 追加タイプをフォールバック ▼ ▼ 完了 完了 ChangeSet 作成と一貫性チェックの待ち時間がまるごと無くなる
23. 結果 ： 全体時間の比較 483秒 Amplify Gen2 CI/CD 素の CDK cdk deploy 329秒 cdkd cdkd deploy Amplify 比 約4.1倍 1回の push で 6分 返ってくる 281秒 CDK Express --express CDK Express ＋ キャッシュ無効化なし cdkd で 8分3秒 → 1分57秒 214秒 117秒 プロビジョニングだけなら cdkd 101秒 は通常CDK比 約3.0倍 全体時間 = synth + asset 公開 + デプロイ。 Next.js ビルド (約100秒) は含まない
24. まとめ(結果からわかったこと) Amplify Gen2 → CDK → CDK –express → cdkd それぞれでデプロイ 01 02 03 プロビジョニングは約3.0倍 全体では約2.8倍 Amplify 比では約4.1倍 デプロイ 301秒 → 101秒 329秒 → 117秒 483秒 → 117秒 CloudFormation を迂回し、一貫性 チェック待ちが消える ※synth・asset 公開は残る 1回の push あたり約6分カット 結論 : 開発・テストや個人アプリのイテレーションは cdkd にガンガン寄せると幸せになる！ ここからさらに早くビルドできるようにリファクタリングしていきます！