Azure Container Apps を活用して画像生成 Bot & LIFF を開発する！（構想編）

Azure Container Apps を活用して 画像生成 Bot & LIFF を開発する！ （構想編） 【クラウド/ChatGPT etc】LDGQ + LINEDC 勉強会@福岡 2023/06/03 平林 拓将（ひらりん） himarin269 / himanago

About me • name： 平林 拓将（ひらりん） • work： テクニカルトレーナー＆開発 • award/title: - Microsoft MVP for Azure（2019.11～） - LINE API Expert（2020.3～） • like: - C# / serverless / cross-platform • social: - Twitter：@himarin269 GitHub：himanago Blog：https://himanago.hatenablog.com/

• https://twitter.com/himarin269
• https://github.com/himanago/
• https://himanago.hatenablog.com/

今回お話しすること（15分） • サーバーレスにコンテナー・マイクロサービス運用が できる「Azure Container Apps」。 • このサービスをフル活用して、いま話題の画像生成AI （OpenAI）がLINEから使える便利 Bot / LIFF を 開発しようとしています。 • 今回は「構想編」として、画像生成 Bot / LIFF を マイクロサービスとして開発するために便利な Azure Container Apps の機能を、上記の設計を ベースにご紹介します。

つくるもの ① LINE からテキスト（プロンプト）を送ると それをもとに生成した画像が返信されてくる

つくるもの ② 連動する LIFF でこれまでに生成した画像の 履歴が確認できる＆同一プロンプトで再作成 「クマがウサギをカメラで撮っているところ」 生成履歴 prompt クマがウサギを カメラで撮って いるところ × image 再生成 再生成したらLIFF内の一覧を更新して LINEにもメッセージを送信する

開発する必要のあるもの • 画像生成処理 • OpenAI の API を呼び出す • LINE Bot 複数のサーバー処理が必要 ＆ クライアント側とのイベントベースな連携 • Webhook • メッセージ送信 • LIFF • フロントエンド • バックエンド • リアルタイム更新機能 クラウドとマイクロサービスが活躍する場面！

Azure Container Apps サーバーレスなコンテナーアプリを動かすためのサービス 複数のコンテナーを組み合わせてマイクロサービスを運用可能 https://learn.microsoft.com/ja-jp/azure/container-apps/

• https://learn.microsoft.com/ja-jp/azure/container-apps/

Azure Container Apps の構成 Container Apps Environment Container App Container App Container App

システム構成図 プロンプト Botバックエンド （Webhook） プロンプト 画像生成 Bot 画像メッセージ プロンプトと 画像URLを 保存 Botバックエンド （送信担当） LIFF 画像生成機能 画像URL 画像保存 Change Feed LINE 作成履歴表示 ＆再作成 リアルタイム 更新 Storage Cosmos DB 画面更新用 SignalR Service 再作成 Static Web Apps LIFFバックエンド 画像生成 API

システム構成図（LINE Bot） プロンプトをもとに 画像を生成 プロンプト Botバックエンド （Webhook） プロンプト 画像生成 Bot 画像メッセージ Botバックエンド （送信担当） Change Feed プロンプトと 画像URLを 保存 画像生成機能 画像URL 画像生成 API 画像保存 LINE Cosmos DB 生成した履歴（プロンプトと画像URL）が 保存されたことをトリガーに処理が起動 ※リプライトークンも一緒に保存しておく 閲覧用URLが取得可

コンテナー同士の連携 Container Apps Environment Container App Container App Container App

Dapr（Distributed Application Runtime） • マイクロサービス同士の連携 などを容易に開発できるよう にする • オープンなAPIで開発言語も 問わない https://dapr.io/ https://learn.microsoft.com/ja-jp/azure/container-apps/dapr-overview

• https://dapr.io/
• https://learn.microsoft.com/ja-jp/azure/container-apps/dapr-overview

Dapr サイドカー Dapr 経由で別のコンテナーの API を簡単に呼び出すことができる 画像生成機能を 他のコンテナーから 簡単に呼び出せる！ https://learn.microsoft.com/ja-jp/dotnet/architecture/dapr-for-net-developers/dapr-at-20000-feet

• https://learn.microsoft.com/ja-jp/dotnet/architecture/dapr-for-net-developers/dapr-at-20000-feet

システム構成図（LINE Bot） プロンプト Botバックエンド （Webhook） プロンプト 画像生成 Bot 画像メッセージ Azure Functions Botバックエンド （送信担当） Change Feed プロンプトと 画像URLを 保存 LINE Cosmos DB 生成した履歴（プロンプトと画像URL）が 保存されたことをトリガーに処理が起動 ※リプライトークンも一緒に保存しておく 画像生成機能 画像URL 画像保存 画像生成 API

Azure Cosmos DB • NoSQLデータベースサービス • 無料枠あり！ • 好きな API を選べる コア(SQL), MongoDB, Cassandra, Azure Table, Gremlin • Dapr 状態管理のデータストアとしても 使える

Change Feed（変更フィード） ✓ データの変更があった場合にFunctionをトリガー ✓ 追加・変更に対応（順序保証あり） ★ Azure Cosmos DB の変更フィードの設計パターン https://docs.microsoft.com/ja-jp/azure/cosmos-db/change-feed-design-patterns

• https://docs.microsoft.com/ja-jp/azure/cosmos-db/change-feed-design-patterns?WT.mc_id=AZ-MVP-5003530

プレビュー Azure Functions の Container Apps ホスティング ON すべてのトリガーが使用可能！ Cosmos DB との連携などの Functions の強みを Container Apps でも発揮できる！

システム構成図 プロンプト Botバックエンド （Webhook） プロンプト 画像生成 Bot 画像メッセージ プロンプトと 画像URLを 保存 Botバックエンド （送信担当） LIFF 画像生成機能 画像URL 画像保存 Change Feed LINE 作成履歴表示 ＆再作成 リアルタイム 更新 Storage Cosmos DB 画面更新用 SignalR Service 再作成 Static Web Apps LIFFバックエンド 画像生成 API

システム構成図（LIFF） プロンプト Bot 画像メッセージ プロンプトと 画像URLを 保存 Botバックエンド （送信担当） LIFF 画像生成機能 画像URL 画像保存 Change Feed LINE 作成履歴表示 ＆再作成 リアルタイム 更新 Storage Cosmos DB 画面更新用 SignalR Service 再作成 Static Web Apps LIFFバックエンド 画像生成 API

LIFF におすすめ：Azure Static Web Apps • 静的Webサイトホスティングサービス • カスタムドメイン・SSL 対応 • GitHub との統合による CI/CD • ステージング環境での PR レビュー ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/static-web-apps/

• https://docs.microsoft.com/ja-jp/azure/static-web-apps/

Azure Static Web Apps の特徴 /front </> ブラウザ /api API バックエンドAPI（Azure Functions）を 同一リポジトリで開発・デプロイ クロスオリジン制約を 気にすることなく アクセス可能 組み込みの Functions の代わりに Container Apps を使うことができる！

Container Appsをバックエンドに使用できる SWA Dapr で連携が容易！ </> LIFFフロントエンド Container Apps Environment LINE Bot 画像生成 LIFFバックエンド

#lpf_revup #lpf_revup_t Azure SignalR Service • Webページなどのクライアント をリアルタイム更新するための サービス • 出力バインディングで Functions と簡単に統合できる ★ ドキュメント https://docs.microsoft.com/ja-jp/azure/azure-signalr/

• https://docs.microsoft.com/ja-jp/azure/azure-signalr/?WT.mc_id=AZ-MVP-5003530

データの更新をリアルタイムに反映 出典： Azure Functions で SignalR Service バインドを使用したリアルタイムのサーバーレス アプリケーション https://azure.microsoft.com/ja-jp/blog/real-time-serverless-applications-with-the-signalr-service-bindings-in-azure-functions/

• https://azure.microsoft.com/ja-jp/blog/real-time-serverless-applications-with-the-signalr-service-bindings-in-azure-functions/?WT.mc_id=AZ-MVP-5003530

プレビュー サービスコネクタ • Container Apps と他の Azure サービスを 簡単に連携させることができる • Azureポータルから簡単操作で 接続できる https://learn.microsoft.com/ja-jp/azure/containerapps/service-connector?tabs=azure-portal

• https://learn.microsoft.com/ja-jp/azure/container-apps/service-connector?tabs=azure-portal

システム構成図 JS Python Deno プロンプト Botバックエンド （Webhook） プロンプト 画像生成 Bot 画像メッセージ C# LIFF Botバックエンド （送信担当） 作成履歴表示 ＆再作成 画像URL 画像生成 API 画像保存 Change Feed Azure Functions LINE プロンプトと 画像URLを 保存 画像生成機能 リアルタイム 更新 Storage Cosmos DB 画面更新用 Java SignalR Service 再作成 Static Web Apps LIFFバックエンド 各コンテナーで言語や フレームワークを 自由に選択できる！

まとめ • Azure Container Apps は複数コンテナーを使った 開発・運用が楽にできるおすすめサービス • Dapr の機能でコンテナー同士の連携が容易 • 既存のAzureサーバーレスとの連携が強み • うまく組み合わせれば LINE Bot ＆ LIFF 開発の強力 な武器に！