AWS Amplify の AI Kit でオレオレAIサイトを作ってみる #ゆるWeb札幌

ゆるWeb勉強会@札幌 #28 の登壇資料
https://mild-web-sap.connpass.com/event/338912/

Transcript

1. AWS Amplify の AI Kit で オレオレAIサイトを作ってみる ゆるWeb勉強会@札幌 #28 2024/11/16 Kihara, Takuya (@tacck) ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 1
2. ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 2 Kihara, Takuya 木原 卓也 / @tacck / Sapporo, Japan CO-OP Sapporo 生活協同組合コープさっぽろ Software Engineer / Flutter, TypeScript, Vue.js, React Amplify Japan User Group 運営メンバー ゆるWeb勉強会@札幌 主催 AWS Community Builder Since Q2 2021 / Category: Front-end Web and Mobile Community 好きなフィギュアスケートの技 スプレッド・イーグル
3. 昨年のお話し ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 3
4. 今日のお話 ▪ Amplify Gen2 ▪ Amplify AI Kit ▪ なにが変わった? ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 4
5. AMPLIFY GEN2 ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 5
6. AWS Amplify とは ▪ フロントエンドアプリケーションを開発するための、サービスおよびツール群。 – CI/CD を備えたホスティングサービス – Git branches をベースとしたデプロイ先の切り分け – AWS リソース(Cognito, S3, AppSync, etc) のためのライブラリ群 – Web フロントエンド用ライブラリ ▪ React / Next.js / Angular / Vue / JavaScript – スマートフォンアプリ用ライブラリ ▪ React Native / Flutter / Android / Swift ▪ mBaaS → フロントエンドホスティング強化 → フロントエンド開発者体験強化 (Gen2) ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 6
7. 開発者体験 (Developer Experience) 強化 ▪ TypeScript での開発強化 – Web フロントエンドライブラリの TypeScript 対応 – バックエンドリソースの TypeScript での宣言 – Lambda Functions の TypeScript 実装対応 – etc... ▪ 開発中の Sandbox 機能追加 (開発環境をAWSへ即時反映) – AWS CDK を全面的に取り込んだプロジェクト構成 ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 7
8. Sandbox とは ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 8 ▪ 開発者のマシンとAWSリソースを直接繋ぐ仕組み – バックエンドのリソースファイル保存に応じて、 即時でAWSへ環境構築。 – 複数人でも、それぞれ専用の環境が構築される。 – AWS CDK のホットスワッピングを使い、高速デプロイ。
9. AMPLIFY AI KIT ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 9
10. Amplify AI Kit ▪ AWS Amplify (Frontend) から簡単に Bedrock を呼ぶためのライブラリ ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 10
11. なにが変わった? ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 11
12. なにが変わった? ▪ 昨年の発表も実質同じことをやっている。 ▪ Amplify AI Kit を使うことで変わったことはあるか? ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 12
13. なにが変わった? アーキテクチャ ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 13
14. なにが変わった? アーキテクチャ Before ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 14 ▪ Lambda Functions から Bedrock の呼び出しを 意図的に実装 ▪ UIを自分で実装 ▪ AppSync から Lambda の呼び出しを 意図的に設定
15. なにが変わった? アーキテクチャ After ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 15 ▪ Lambda Functions から Bedrock の呼び出しの 実装不要 ▪ UIはコンポーネントを配置 ▪ AppSync から Lambda の呼び出しは 意識せずにに設定
16. まとめ ▪ フロントエンドから Bedrock を呼び出すときは、 amplify/data/resource.ts で AppSync の口(API)を定義するだけ。 – 自前で Lambda Functions の実装不要 – DynamoDB の準備もやってくれるので手間要らず – UIも Component を使うだけ ▪ Bedrock のモデルの準備は事前にやっておく – リージョンで使えるモデルが変わる – Amplify のプロジェクト自体をモデルに合わせてリージョン選ぶ必要あり – この辺りの自由度高まると嬉しい ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 16
17. END ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 17