Amplify Gen 2ではじめる 
 生成AIアプリ開発入門 
 1 2024.10.12
 
 JAWS FESTA 2024 in 広島


2 自己紹介 ★ ハンドルネーム ○ つくぼし ★ 所属 ○ AWS事業本部コンサルティング部 ○ ソリューションアーキテクト ★ 最近ハマっているAWSサービス ○ AWS Application Composer ★ SNS/ブログ ○ X(@tsukuboshi0755) ○ DevelopersIO(つくぼし)

3 目次 1. Amplify Gen 2とは 2. UIデザイン支援AIツールの紹介 3. Bedrockを呼び出す際のポイント 4. 直近のAmplifyアップデート 5. オススメのAmplify × Bedrockハンズオン 6. 最後に

4 対象者 ● 生成AIを用いたフロントエンド開発をAWS上で試してみたい方 ● Amazon Bedrockをよく使うがUIの作り込みに困っている方 ● Amplifyはよく使うがBedrockとの繋ぎ方を知りたい方

5 登壇者のレベル ● オンプレミス畑出身のインフラ専門エンジニア ● 最近の業務では生成AIやRAGを中心に触る事が多い ● CDKでTypeScriptを書いてIaCを定義した事はある ● 3ヶ月前にAmplifyを触るまでフロントエンドとほぼ無縁だった

6 Amplify Gen 2とは

7 AWS Amplifyとは ● ウェブアプリケーションやモバイルアプリを構築するため のフルスタック開発プラットフォーム ● バックエンドが簡素化された事で、フロントエンドで開発し たアプリの展開を迅速に行う事が可能 ● トラフィックの増加に応じて、構築したアプリケーションが 自動スケールされる

8 ここがすごいぞAmplify Gen 2 1. ブランチ毎にgit pushでCI/CDが自動で走る 2. サンドボックスで開発環境を分離できる 3. CDKベースなのでインフラをTypeScriptで定義可能 4. JS ResolverによりバックエンドをTypeScriptで書ける

9 ブランチ毎にgit pushでCI/CDが自動で走る ブランチを指定して デプロイが可能 特定ブランチにgit pushする事で ビルドおよびデプロイが全て走る

10 サンドボックスで開発環境を分離できる Gen 2では開発者毎に sandbox環境を作成可能 バックエンドを分離して 開発できる

11 CDKベースなのでインフラをTypeScriptで定義可能 Gen 2はCDKのL3 Construct として提供されている CDKベースでインフラの 定義・拡張が可能！

12 JS ResolverによりバックエンドをTypeScriptで書ける 本来AppSyncのResolverはVTLで定義するが、 代わりにJavaScriptを使用可能 コンパイルを挟む事で バックエンドも全てTypeScriptで定義できる

13 TypeScriptさえ知っていれば Amplify Gen 2で直感的に開発できる！

14 AWSにおけるホスティング構成の比較 比較項目 S3 + CloudFront Amplify (Gen 2) 実装方法 コンソール・CLI・各種IaCいずれも可 コンソール & IaCのみ 認証機能 CloudFrontのLambda@edgeやCloudFront Functionsでコードを書けば実装可能 aws/amplify-backendモジュールのdefineAuthメソッドで簡 単に実装可能 バックエンド機能 単体ではなし ALB + ECSやAPIGateway + Lambda等を組み合わ せて検討 aws/amplify-backendモジュールのdefineDataメソッドで簡 単に実装可能 CI/CD機能 単体ではなし CodePipeline等を組み合わせて検討 デフォルトで設定されている amplify.ymlで簡単なカスタマイズが可能 カスタムドメイン機能 単体ではなし Route 53 + ACMを組み合わせて検討 Amplifyコンソールから簡単に設定可能 WAFの紐付け 可能 不可 CloudFront + WAF + Amplifyで代用 CDNパラメータの調整 (キャッシュビヘイビア・マルチオ リジン・セキュリティポリシー等 ) 可能 不可 CloudFrontがAmplifyでラップされ見えなくなる

15 余談：TypeScriptを学ぶには？ ● サバイバルTypeScript ○ 簡単なアプリケーションを作りながら主要な文法を学べる ○ あまりプログラムを触った事がない初心者にオススメ ● プロを目指す人のためのTypeScript入門 ○ TypeScriptの文法について一からディープダイブできる ○ 既に他のプログラミング言語経験がある方にオススメ

16 UIデザイン支援 AIツールの紹介

17 フロントエンドに詳しくなくても 簡単にUIをカスタマイズできる！

18 Claude Artifacts (by Anthropic) コードのプレビューを同じ 画面で表示可能 繰り返し質問する事で 細かい修正も可能

19 v0 (by Vercel) Claudeよりもさらに フロントエンドに特化して いる(らしい) GitHubリポジトリの フォークが可能

20 実際にAIが作ったUIをAmplifyで動かした例

21 Bedrockを呼び出す際のポイント

22 Amazon Bedrockとは ● 主要な生成AIの基盤モデル(Foundation Model)を、 AWS上で利用できるフルマネージド型サービス ● 有名なAI企業が提供する様々な基盤モデルを、同一の APIで使用可能 ● プライバシーとセキュリティを維持しながら、AWS内で完 結する生成AIアプリケーションを構築可能

23 AmplifyでBedrockを呼び出す際のポイント 1. バックエンド定義方法(AppSyncリゾルバー)の選択 2. 基盤モデル呼び出しAPIの選択 3. 基盤モデルリージョンの選択 4. 基盤モデルIDの選択

24 バックエンド定義方法(AppSyncリゾルバー)の選択 比較項目 カスタムリゾルバー (HTTPリゾルバー ) Amplify Function(Lambdaリゾルバー ) アーキテクチャ ランタイム APPSYNC_JS (JavaScript)のみ Lambdaでサポートされているランタイム全て コードの最大サイズ AppSync関数毎に 32,000 文字 Lambda関数毎に50 MB (zip圧縮、直接アップロード用 ) ネットワークアクセス 不可 可能 ファイルシステムアクセス 不可 可能 コールドスタート なし あり(別途プロビジョニングされた同時実行を使用すればな し) 価格 追加料金なし Lambdaの使用料金が別途かかる

25 基盤モデル呼び出しAPIの選択 ● Invoke APIの代わりにConverse APIを使 う事で、コードの変更なくモデルを切り替え られるためオススメ ● Bedrock以外のモデルも共通インター フェースで呼び出したい場合は、 LangChainも選択肢に上がる

26 基盤モデルリージョンの選択 ● リソースは国内(東京)リージョンにデ プロイしつつ、Bedrockだけ海外リー ジョンの最新モデルを呼び出すのが よくあるパターン ● カスタムリゾルバーの場合、リージョ ンを変更する度にデータソースの更 新が発生するため注意

27 基盤モデルIDの選択 ● テキスト生成はClaude 3.5(by Anthropic)一択 ○ 価格&応答速度のHaiku ○ バランスのSonnet ○ 性能のOpus ● 画像生成は以下の二択 ○ 知名度が高いSDXL 1.0 (by Stability AI) ○ 価格が安いTitan Image(by Amazon)

28 いくつかのポイントに注意すれば Bedrockとの連携も簡単！

29 直近のAmplifyアップデート

30 Amplify AIが熱い！

31 Amplify AI(Preview)とは ● Amplifyの中でBedrockを呼び出す生成AIチャットボットUIを簡単に作れ る ● 現時点ではRFCのため変更の可能性あり ○ https://github.com/aws-amplify/amplify-ui/issues/5773 ● サンプルリポジトリもあります ○ https://github.com/dbanksdesign/amplify-ai-starter

32 使用方法 バックエンドのスキーマに conversationを追加 フロントエンドに CreateAIHooksとAIConversationを追加

33 動作例

34 その他直近のAmplifyアップデート ● Storage Browser for Amazon S3 (Preview) ○ S3 でのファイルブラウズ機能を追加し、データ参照アップロードやダ ウンロード機能を提供するUI ○ https://github.com/aws-amplify/amplify-ui/issues/5731 ● スケジュール実行可能な関数の定義 ● 関数の非同期呼び出し ● 複数バケットのサポート

35 オススメの Amplify × Bedrockハンズオン

36 公式ハンズオン①：俳句生成AI 手順：https://docs.amplify.aws/react/build-a-backend/data/custom-business-logic/connect-bedrock/

37 公式ハンズオン②：レシピ提案AI 手順：https://aws.amazon.com/jp/getting-started/hands-on/build-serverless-web-app-lambda-amplify-bedrock-cognito-gen-ai/

38 公式ハンズオン③：勉強計画提案AI 手順 ：https://catalog.us-east-1.prod.workshops.aws/workshops/950b2f47-7b52-46dd-b760-a8144de7f1db/en-US?sc_channel=sm&sc_pub lisher=TWITTER&sc_country=global&sc_geo=GLOBAL&sc_outcome=awareness&linkId=480537974

39 最後に

40 まとめ ● Amplify Gen 2はTypeScriptによるフルスタック開発を実現可能 ● Claudeやv0によりUI作成の敷居が下がっている ● Bedrockとの連携もいくつかのポイントに注意すれば簡単 ● 今後のAmplifyのアップデートにも要注目

41 フロントエンド開発は楽しいぞ！

42