Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)

Transcript

1. Amazon Bedrock AgentCoreの フロントエンドを探す旅 (Next.js編) 2025/8/7(木)クラメソさっぽろIT勉強会 (仮) #11 LT 花火大会 発表者：たけのこ (宮崎 健太)
2. たけのこ (宮崎 健太) 職業：Webアプリのフロントエンドエンジニア 最近、AWSのインフラ開発もやってます！ 趣味： • ゲーム (Switch2は6回戦に進出しました) • お酒 (最近クラフトジンを飲みます) Xアカウント (@K5ARULtkUA4594) 自己紹介
3. 本日話すこと 注意事項 ① 本発表時点では、検証中の段階です。あくまで参考程度にご視聴いただけますと幸いです。 ② Amazon Bedrock AgentCoreは、2025/8/7(木) 時点でプレビューとなります。 話すこと ・Amazon Bedrock AgentCoreのフロントエンドにNext.jsを使ってみた話 ・AWS Amplify Hostingでデプロイしようとしたけど苦戦している話 話さないこと ・AgentCoreやNext.jsの詳細な仕様など
4. アジェンダ 1 Amazon Bedrock AgentCore について 2 Amazon Bedrock AgentCoreを呼び出す簡易な構成 3 フロントエンドの悩み 4 アプリの構成を考えてみる 5 Next.jsをAmplify Hostingにデプロイした構成 6 試した結果 7 所感
5. AgentCoreは、AIエージェントをAWS上で管理するためのツール群 Runtimeという機能を使えば、サーバレス環境でAIエージェントを動かせる！ 他にもいろいろと機能があるよ！ AWS Amazon Bedrock AgentCore (Runtime) Amazon Bedrock フロントエンド Amazon Bedrock AgentCoreについて Starnds Agentsなど AIエージェントがコンテナ上 で動くよ
6. Streamlit Community Cloud （フロントエンド） Streamlit AWS （バックエンド） Amazon Bedrock AgentCore (Runtime) Amazon Bedrock ユーザー 補足 Streamlit：少量のコードでリッチなUIを構築できるPythonライブラリ Amazon Bedrock：API経由で様々なLLMを利用できるAWSサービス Amazon Bedrock AgentCoreを呼び出す簡易構成
7. 悩み1. Streamlitも簡単で良いけど、フロントエンドのエコシステム使いたい！ 悩み2. ログインとか、認証系の機能やUIが欲しい！ 悩み3. デザインとか自由にカスタマイズしたい！ 悩み4. 既にあるコードを流用したい！ ・デザインシステム ・他システムのソースコード など フロントエンドの悩み
8. ポイント1. モダンなライブラリ、フレームワークか ポイント2. サーバー送信イベント(SSE) をサポートしているか (AgentCoreはストリーミングするためSSEで通信する必要がある) ポイント3. 簡単に認証機能を使いたい ポイント4. AWS上に全てデプロイしたい アプリの構成を考えてみる
9. ポイント1. モダンなライブラリ、フレームワークか ⇒ Next.js！！ ポイント2. サーバー送信イベント(SSE) をサポートしているか (AgentCoreはストリーミングするためSSEで通信する必要がある) ⇒ Next.js ！！ ポイント3. 簡単に認証機能を使いたい ⇒ AWS Amplify Auth ！！ ポイント4. AWS上に全てデプロイしたい ⇒ AWS Amplify Hosting ！！ アプリの構成を考えてみる
10. AWS Amazon Bedrock AgentCore (Runtime) Amazon Bedrock ユーザー AWS Amplify Hosting Next.js Amazon Cognito バックエンドAPI フロントエンド Next.js Next.js を Amplify Hostingにデプロイした構成
11. Let’s 実装！！
12. ストリーミングでレスポンスが返ってこない バックエンドは、AWS管理のCloudFront + URL付 Lambdaで動いてそう → Lambdaのログ的に、バックエンドはストリーミングで処理してそう → CloudFrontを介すると、バッファリングされるような挙動になってる ローカル実行では 上手くいったのに… 試した結果… 上手くいかない！
13. デプロイ先を変えてみる
14. AWS Amazon Bedrock AgentCore (Runtime) Amazon Bedrock ユーザー Vercel Next.js Amazon Cognito バックエンドAPI フロントエンド Next.js Next.js を Vercelにデプロイした構成
15. 動いたー！
16. Next.jsにして作成するAIアプリの自由度が広がる気がする！ • UIや機能なんでも作りこめるようになった！ 生成AIの世界線は進化が早いので、作りこみは禁物かも？ • エージェント連携ライブラリの成熟を待ちつつ… • ロジック・UIは依存性を排除して差し替え可能に！ Amplify Hostingが意外と奥深くておもしろい (反面むずかしい…) • Next.jsをデプロイすると、何のリソースで動作しているか不明… • ブラックボックス部分を追っていくと、意外と面白い！ 所感
17. 以上です！ ありがとうございました！！