モダンUIでフルサーバーレスなAIエージェントをAmplifyとCDKでサクッとデプロイしよう

AI Agent Builders Meetup
https://minorun365.connpass.com/event/380913/

Transcript

1. モダンUIでフルサーバーレスな AIエージェントをAmplifyと CDKでサクッとデプロイしよう みのるん @minorun365　with Claude 1
2. 自己紹介 2
3. このスライドについて 本スライドは Claude Code + Marp で作成しています みのるんが伝えたい内容を 音声入力で大量にしゃべって Claude Codeに整理・構成してもらいました 内容自体はみのるん本人の知見・経験に基づいています。 安心して聞いてください 3
4. 突然ですが…
5. AIエージェント開発で困ること Pythonでエージェントは書ける。でも... フロントエンドどうする問題 React？ TypeScript？ ...苦手意識ありませんか 5
7. AIエージェント開発で困ること Pythonでエージェントは書ける。でも... フロントエンドどうする問題 React？ TypeScript？ ...苦手意識ありませんか つい Streamlit に逃げてしまう 毎回おなじみの見た目になりがち WebSocket必須 → サーバーレスに載らない ECSで動かすと月数千円〜の維持費が発生 PoCやデモを量産するAI案件には向かない 7
8. 理想の構成ってなんだろう 観点 Streamlit 理想 フロントの自由度 低い 高い デプロイ先 ECS等 サーバーレス 維持費 月数千円〜 ほぼ無料 CI/CD 自前構築 自動 認証 自前実装 マネージド 8
9. 実はそれ、Amplify Gen2で実現できる！
10. Amplify Gen2とは TypeScriptベースのフルスタックアプリを簡単にデプロイできるサービス （ようはAWS版のVercel） 旧Amplifyは「癖が強い」と言われがちだった Gen2で開発者体験が大幅に向上 GitHubリポジトリを紐付けるだけで自動デプロイ CI/CDが勝手に構築される Cognito認証がネイティブ対応 フロントエンドのホスティングも込み 10
11. Amplify Sandbox が便利すぎる ローカル開発時の体験が最高 npx ampx sandbox バックエンドのクラウドリソースが 開発者ごとに 一時的に立ち上がる ローカルのフロントエンドからCognito、Lambda等をそのまま使える ファイル変更を検知して自動デプロイ（ホットリロード） 11
12. ブランチを増やすと環境も増える GitHubにブランチをプッシュするだけで環境が分離 ブランチ 環境 main 本番環境（自動デプロイ） dev 検証環境（自動デプロイ） ローカル Sandbox環境（開発者ごと） Sandboxで検証 → devにプッシュ → 動作確認 → mainにマージ この運用がゼロ設定で実現できる 12
13. CDKでカスタムリソースも内包できる Amplifyネイティブ機能以外も、CDKで追加可能 AgentCoreランタイム CloudFront などなど… つまり、AIエージェントのバックエンドもフロントエンドも ひとつのリポジトリにまとめてAmplifyに任せられる！ 13
14. AIエージェントのフルスタック構成 レイヤー 技術スタック フロントエンド React + Vite + TypeScript 認証 Amazon Cognito バックエンド AgentCore Runtime エージェント Python + Strands Agents デプロイ GitHub → Amplify 全部1リポジトリ。GitHubにプッシュするだけ！ 14
16. でも、フロントエンド 書けないんですけど...
17. Claude Codeが全部書いてくれる フロントエンドが苦手？ 大丈夫。 音声入力で要件を喋りまくる Claude Codeが壁打ち相手になって仕様を整理 技術スタックを指定して開発を進める React / TypeScript、自分で書かなくても全然いける 実際、私もReact/TypeScript得意じゃなかったけど Claude Codeのおかげで今では不自由なく書けるようになりました！ 17
18. これからのエンジニアに求められること Claude Codeがコードを書いてくれる時代に人間が担うべき役割は？ フロント/バックエンド/インフラを横断的に理解する 企業システムとしてのセキュリティ・ガバナンスを担保する サーバーレス vs コンテナなどコスト最適化の判断をする 要件に合った技術構成を選定する コードを書く力 → フルスタックで設計・判断する力へ 18
19. 実際にやってみよう
20. 構築手順 1. AmplifyのReact + Vite テンプレートをクローン 2. AgentCoreのCDKコードを amplify/ 配下に追加 3. エージェントのPythonコード（Strands Agents）を格納 4. GitHubにプッシュ 5. Amplifyでアプリを作成 → 自動デプロイ完了 たったこれだけ。CI/CDの設定は不要。 フルサーバーレスなので維持コストがタダ同然！ 推論APIコストのみ。 20
21. Qiitaで図解つき手順を公開してます！ 21
22. デモ① パワポ作るマン 人間の代わりにPowerPoint資料を作ってくれるAIエージェント 裏側で Marp CLI を使用 LLMがMarkdownを生成 → Marpがスライドに変換 テキストベースなので出力が安定 PDF / PPTX のエクスポートにも対応 22
23. デモ② M365秘書エージェント まるで人間の秘書のように、日々の雑務を自動で巻き取ってくれるAIエージ ェント Outlook の予定を確認・作成・変更 Microsoft To Do のタスクを更新 Confluence のドキュメントを確認・作成 Microsoft Entra ID で認証 23