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

Slide 1

Slide 1 text

AWS Amplify の AI Kit でオレオレAIサイトを作ってみるゆるWeb勉強会@札幌 #28 2024/12/21 Kihara, Takuya (@tacck) ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 1

Slide 2

Slide 2 text

ゆる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 好きなフィギュアスケートの技スプレッド・イーグル

Slide 3

Slide 3 text

昨年のお話しゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 3

Slide 4

Slide 4 text

今日のお話 ■ Amplify Gen2 ■ Amplify AI Kit ■ なにが変わった? ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 4

Slide 5

Slide 5 text

AMPLIFY GEN2 ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 5

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

開発者体験 (Developer Experience) 強化 ■ TypeScript での開発強化 – Web フロントエンドライブラリの TypeScript 対応 – バックエンドリソースの TypeScript での宣言 – Lambda Functions の TypeScript 実装対応 – etc... ■ 開発中の Sandbox 機能追加 (開発環境をAWSへ即時反映) – AWS CDK を全面的に取り込んだプロジェクト構成ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 7

Slide 8

Slide 8 text

Sandbox とはゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 8 ■ 開発者のマシンとAWSリソースを直接繋ぐ仕組み – バックエンドのリソースファイル保存に応じて、即時でAWSへ環境構築。 – 複数人でも、それぞれ専用の環境が構築される。 – AWS CDK のホットスワッピングを使い、高速デプロイ。

Slide 9

Slide 9 text

AMPLIFY AI KIT ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 9

Slide 10

Slide 10 text

Amplify AI Kit ■ AWS Amplify (Frontend) から簡単に Bedrock を呼ぶためのライブラリゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 10

Slide 11

Slide 11 text

なにが変わった? ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 11

Slide 12

Slide 12 text

なにが変わった? ■ 昨年の発表も実質同じことをやっている。 ■ Amplify AI Kit を使うことで変わったことはあるか? ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 12

Slide 13

Slide 13 text

なにが変わった? アーキテクチャゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 13

Slide 14

Slide 14 text

なにが変わった? アーキテクチャ Before ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 14 ■ Lambda Functions から Bedrock の呼び出しを意図的に実装 ■ UIを自分で実装 ■ AppSync から Lambda の呼び出しを意図的に設定

Slide 15

Slide 15 text

なにが変わった? アーキテクチャ After ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 15 ■ Lambda Functions から Bedrock の呼び出しの実装不要 ■ UIはコンポーネントを配置 ■ AppSync から Lambda の呼び出しは意識せずにに設定

Slide 16

Slide 16 text

まとめ ■ フロントエンドから Bedrock を呼び出すときは、 amplify/data/resource.ts で AppSync の口(API)を定義するだけ。 – 自前で Lambda Functions の実装不要 – DynamoDB の準備もやってくれるので手間要らず – UIも Component を使うだけ ■ Bedrock のモデルの準備は事前にやっておく – リージョンで使えるモデルが変わる – Amplify のプロジェクト自体をモデルに合わせてリージョン選ぶ必要あり – この辺りの自由度高まると嬉しいゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 16

Slide 17

Slide 17 text

END ゆるWeb勉強会@札幌 #28/ #ゆるWeb札幌 17