ついに(CDKで)Cognito実装した話

2025.10.24のJAWS-UG浜松AWS勉強会202510でのLT発表資料です。
お付き合いいただきありがとうございました。

2025.11.30更新
スライドのアップデートが機能しないので記載漏れのあったp.17で引用したコンテンツの出典を追記します。

出典：気象庁 キキクル(危険度分布)
https://www.jma.go.jp/bosai/risk/

Transcript

1. ついに(CDKで)Cognito実装した話 Saito5656@JAWS-UG浜松 2025. 10. 24 JAWS-UG浜松 AWS勉強会 202510
2. まとめ(このＬＴの本質情報 分 か っ た 分 か っ た 聞 い て あ げ る か ら ね ー ね ー 聞 い て よ 、 つ い に Cognito の User pool 実 装 し ち ゃ っ て さ identity pool と ひ っ つ け て CDK 発 射 し て 、 で ち ゃ ん と 動 い て 、 あ と 大 事 ぽ い け ど Token て や や こ し い な CDK て SSM メ ン ド ク サ イ
3. お題 1. まとめ 2. 自己紹介 3. CDKでCognito実装 - 自己開発アプリの概要 - 認証方法変更 - Project構成 - 動作確認 - 振り返り 4. 少しだけアプリの話 5. 課題
4. 1. まとめ 2. 自己紹介 3. CDKでCognito実装 - 自己開発アプリの概要 - 認証方法変更 - Project構成 - 動作確認 - 振り返り 4. 少しだけアプリの話 5. 課題
5. 自己紹介 Saito 5656 勤務先：自動車部品とか作ってる田舎の製造業 職種 ：エンジニア 業務 ：各種用務(壁打ち相手・受注・設計・製造・養分他)
6. 現在こんな案件にJoinしてます 製造業DXド直球な設備監視と日常点検自動化
7. 1. まとめ 2. 自己紹介 3. CDKでCognito実装 - 自己開発アプリの概要 - 認証方法変更 - Project構成 - 動作確認 - 振り返り 4. 少しだけアプリの話 5. 課題
8. 自己開発アプリの概要 unit検証だけだとつまらないのでapp化して家庭内運用中 ココの 変更の話
9. 認証方法変更 いつものBASIC認証からCognito user poolに変更
10. Project構成 検証unitのapp.pyは合体 (もとい統合 New ! 普段使い結合済みstack.pyをresource別に分割
11. 動作確認
12. 振り返り 自分 既存webアプリのCognito統合ならびにcdkプロジェクト化を振り返り、依頼者の課題を分析します。 依頼者はエッジデバイスと周辺物理機器統合、それらを制御するソフトウェア開発、AWSバックエンドとの統合には約5年の経験 があり、ChatGPTを活用した新規構築においても経験値とノウハウを生かした要件定義と設計ドキュメントを準備することができ ます。しかし、フロントエンド構築、フロントエンド周りの認証、セキュリティ等の経験値は十分ではありません。 構築時の対話の中で、やり取りに繰り返しが多かった技術要素(アーキテクチャーの構想、クラスメソッドやパラメーターの扱い)、 依頼文章の精度が低かった技術要素を可視化して、経験値として吸収するために要点抽出したいと思います。 ChatGPT：まとめ ・繰り返しの多かった論点は「責務境界の明確化」「冪等化」「UI状態管理」「CDK出力の単一化」 ・これらをテンプレ化・チェックリスト化することで、次回以降の往復を大幅に削減し、再利用可能な設計資産 として蓄積できます 依頼者のスキルプロファイルに基づく学習ショートプラン 1. 認証UX基礎：OAuth2/OIDCの用語整理（PKCE/SRP/Implicit差分）、SPAのトークン運用 2. Cognito実装の癖：Hosted UIとカスタムUIのトレードオフ、Callback/Sign-outの多環境管理 3. フロントの信頼境界：Local Storage禁止の背景、CSP/型安全（TS）とエラーバブルアップ 4. UI状態機械：Promiseのライフサイクル、キャンセル、リトライ、ユーザ通知の規約化 5. CDK設計：スタック依存の切り方、SSM集中管理、Context/Stageの流儀
13. 言われっ放しだとアレなんで ChatGPT繰り返したがる(やられた)こと一例 ・変数名どんどん変える挙句に値も変える ・EdgeFunctionに環境変数付ける ・index.js プレースホルダ置換で CDK Token 埋込む ・cdk.json入れたがるがSSM使う意味あるんだよ など他多数(略 沼に落としといてあの言い草…落とされないて重要
14. もう一枚愚痴です() お前がかき回したから、いえ、ﾜｼの指示がｶｽでした
15. 一応Cognito-CloudFront統合の違いは比較 観点 Lambda@Edge あり 直接結合クライアント主導(＋CF Func任意) 静的資産の秘匿 可能（未認証はダウンロード不可） (Amazon Web Services, Inc.) 不可（基本公開） 実装/運用の複雑さ 高い（リダイレクト/キャッシュ/Cookie設計） (Repost) 低い（標準フロー準拠、トラブルシュート容易） パフォーマンス エッジ実行で低レイテンシ。 関数実行分のオーバーヘッドあり 最小オーバーヘッド。Functionsを使わなければゼロ コスト 関数実行分が加算 低コスト（関数ほぼ不要） JWT検証の堅牢性 フル実装可（ライブラリ利用・RS256検証OK） (AWS ドキュメント) Functions だと制約あり（実装難度↑） (AWS ドキュメント) 変更への追随 エッジ関数の更新が必要（レプリケーション遅延） (AWS ドキュメント) フロント/バックの通常デプロイで対応しやすい 失敗パターン ループ/403/キャッシュ汚染の罠 (Repost) 認証漏れ＝静的資産が見える設計上の限界
16. 1. まとめ 2. 自己紹介 3. CDKでCognito実装 - 自己開発アプリの概要 - 認証方法変更 - Project構成 - 動作確認 - 振り返り 4. 少しだけアプリの話 5. 課題
17. 今回の自己開発アプリ ・地殻変動量/統計値 グラフ ・地殻変動量ヒートマップ など 某庁のアプリ(本家) ・線状降水帯予測 ・土砂災害危険度マップ など 出典：気象庁 キキクル(危険度分布) https://www.jma.go.jp/bosai/risk/ アプリ名は本家をリスペクトして
18. きっかけは機能検証×防災意識
19. 機能検証は楽しくできたけど 気になる人はＭ〇ＧＡ地震予測など見て下さいmm 結論：変化は見えても兆候さっぱり分からん(苦笑 メニュー画面 変動量ＴＬ 変動量ＨＭ 閾値メール
20. 本職も予報ムリて言ってるし… 災害には 日頃から地味に備えましょうかね
21. 1. まとめ 2. 自己紹介 3. CDKでCognito実装 - 自己開発アプリの概要 - 認証方法変更 - Project構成 - 動作確認 - 振り返り 4. 少しだけアプリの話 5. 課題
22. 課題 ChatGPT： Auth@Edgeの最小実装は “リダイレクトのみ” のサンプルです。実運用 では署名付きクッキーやJWT検証を含むフル実装（公式ブログ＆サンプ ル）を推奨 •AWS公式サンプル: cloudfront-authorization-at-edge •参考ブログ（パターン解説）: CloudFront + Lambda@Edge + Cognito 必要な段階になったらフル実装に取り組みます 時間が出来たらAIで予測モデル組むかも()
23. 本日も徒然なＬＴにお付き合い ありがとうございました