Kiro WebとClaude CodeでReactアプリをさくっとデプロイ！

Transcript

1. Kiro Web & Claude Codeで Reactアプリをサクっとデプロイ！ 5/22 JAWS-UG初心者支部#82 GW成果発表会 WithEduJAWS！
2. GW ~ 5月中旬 • フロントエンドの勉強時間を確保 ◦ React + Vite ◦ TypeScript • 教材 ◦ 『はじめてのAWSモダンアプリ開発入門』 ◦ チュートリアル：三目並べ – React 本は紙派です
3. 動機 • AWSの設計・構築はできるようになってきた • ただし、そこにホストされるアプリに関する知見が乏しい ◦ アプリの特性を踏まえたアーキテクチャを提案したい ◦ インフラ観点で実現性や制約に関する意見を求められた時、的確に意見したい • アプリとか、インフラとか、そういう境目が消えつつある • 「できたら面白そう」という純粋な好奇心 フルスタックになるしかない！！！ まずは React がいいかな？？
4. React公式のチュートリアル - 三目並べゲーム 縦、横、斜めのいずれかで自分のマークを揃えた方が勝ちとなる
5. 追加する機能一覧 • 現在の着手の部分だけ、ボタンではなく “You are at move #…” というメッセージを 表示するようにする。 • マス目を全部ハードコードするのではなく、Board を 2 つのループを使ってレン ダーするよう書き直す。 • 手順を昇順または降順でソートできるトグルボタンを追加する。 • どちらかが勝利したときに、勝利につながった 3 つのマス目をハイライト表示する。 引き分けになった場合は、引き分けになったという結果をメッセージに表示する。 • 着手履歴リストで、各着手の場所を (row, col) という形式で表示する。
6. Kiro Web • Kiroのブラウザ版 • Kiro Webのエージェントはタスクごとにクラウドに用意されたサンドボックス環境で実行 • GitHubの複数リポジトリと接続し、プルリクエスト作成までノンストップで実行 • Planner, Coder, Semantic Reviewer の3つの専用サブエージェントがサブタスクを処理
8. Kiro Web ? Kiro Autonomous Agent ? 5/11時点 5/15時点
9. リポジトリ接続 Autonomous mode : ON
10. 一撃で機能追加完了
11. ここからは、Claude Code × Agent Toolkit for AWSを使って、ReactアプリをAWSにデ プロイします。 Kiro Webを使って以下ファイルは作成済の状態です。 • AWSリソースのcfnテンプレート • CI/CD環境（GitHub Actionsのワークフロー定義ファイル） ① ②
12. Agent Toolkit for AWS • AIエージェントがより正確・安全に、ベストプラクティスに基づいて、AWSを操作する ためのツールセット • コンポーネント ◦ plugin ◦ skills ◦ rules ◦ AWS MCP Server（リモートMCPサーバー） • 追加料金なし
13. ① OIDC認証用のIAMロール・IdPの作成
14. ② mainへのマージをトリガーにGitHub Actionsを実行 • ワークフローのデプロイジョブでエラー発生 • OIDC認証用ロールに変更セットの操作権限が不足
15. ② mainへのマージをトリガーにGitHub Actionsを実行（リベン ジ）
16. まとめ • 念願だった Kiro Autonomous Agent を体験できた（ということにする） • Claude Code × Agent Toolkit for AWS を使って、自然言語でインフラを構築する 体験に感動した ◦ これ自体はおそらく新しいことではない ◦ AWSのサービスチームのノウハウが詰まった pluginで誰でも容易に適切なアーキテクチャで構築 できる • React公式チュートリアルの次は、Next.js公式のチュートリアルに取り組んでみよう と思います
17. Blog • 20ドル課金して Kiro Autonomous Agent を使ってみた ~OIDC認証を添えて~ • Claude Code × Agent Toolkit for AWS - 自然言語でインフラを構築して感動した 話
18. fin. 明日、栃木でお会いしま しょう