Azure OpenAIサービスにチャットUIを付けてみる（初級編）

小野友顕 - Microsoft MVP（Microsoft Azure カテゴリー）

はじめに

こんにちは、NRIの小野です。
昨今Azure界隈では、生成AI・Azure OpenAIサービスの話題…中でも「Retrieval-Augmented Generation （RAG）を構築して業務活用したい」といった話が多く聞こえてきます。
しかし一方で、もう少し手前の「安全に生成AIサービスをお試ししてみたいんだけど…」といったお悩みを抱えている方も多いのではないでしょうか。

さて、生成AIサービスの多くのユースケースでは、チャットユーザーインターフェース（UI）はほぼ必須となる機能です。一般ユーザー向けのUIがないと試用もなかなか進みません。そこで今回は「早く（楽に）、安く、安全に」をモットーに、「Azure OpenAIサービスにチャットUIを付けてみる」に取り組んでみたいと思います。

作るもの

下記のような構成を構築していきます。

今回気にするポイント（要件）は以下の3つです。

①チャットUIを動かすWebアプリをできるだけ簡単に作る

②Webアプリでの認証、接続元制限を入れる

③Azure OpenAIサービス↔Webアプリ間を閉域接続する

実際に作ってみた

０：まず、構成図通りにVNET、Subnetを作成しておきます。今回の記事では主題ではないため、詳細は割愛します。

１： Azure OpenAIサービスの「Webアプリ」を作成します。
Azure OpenAI Studioにて、生成AIモデルをデプロイすると、[Webアプリにデプロイ]というボタンから簡単なチャットUI用Webアプリケーションをすぐにデプロイすることができます。非常に簡単で、さっそく要件①を満たしてしまいました。

参考：Azure OpenAI Web アプリを使う - Azure OpenAI Service | Microsoft Learn

このWebアプリは、AzureのWebAppsサービスを使用しています。今回は要件③のため（WebAppsからAzure OpenAI閉域接続）、「basic」以上のskuを選びます。

もし③が気にならないようでしたら「Free」を選ぶことでほとんどお金を掛けずに試すこともできます。
もちろん、生成AIモデルの利用料が、利用量に応じてかかってしまいますが、どんどん安くなっていますので生成AI業界の進歩に感謝しながら使います。なお今回は執筆時点で最新であるgpt-4o-miniを使っています。企業のポリシーなど使ってよいリージョンが限られる場合は、例えば東日本リージョンで提供されているものから選びましょう。

２：Azure OpenAIサービスにプライベートエンドポイントを設定します。
Azure OpenAIサービスのリソースのネットワーク構成から、VNET内にプライベートエンドポイントを作成します。これにより、Azure OpenAIサービスにパブリックネットワークからアクセスできなくなり、予期せぬ外部からのアクセスを防ぐことができます。なお、後続で設定するWebAppsが閉域でプライベートエンドポイントにアクセスできるようにするため、プライベートDNS統合も行いましょう。

３：WebAppsをVNET統合します。
WebAppsからの「送信アクセス」がVNET内になりますので、プライベートエンドポイント経由でAzure OpenAIサービスにアクセスできるようになります。

設定要素としては、VNET・Subnetを指定するくらいです。

４：WebAppsの接続元を制限します。
WebAppsのネットワーク構成から、接続元のIPアドレスを制限します。ここでは、会社等からアクセスすることを想定して、会社のグローバルIPアドレスからのアクセスを許可します。多くの場合、会社のプロキシを管理するネットワーク管理者の方いらっしゃると思いますので、聞いてみましょう。

５：WebAppsに認証機能を付与します。
…なんと、「１」でデプロイされたWebAppsでは、最初からMicrosoft Entra ID連携機能が有効になっており、何も考慮する必要がありません。本環境のMicrosoft Entra IDに作成されたユーザーのみがこのアプリケーションにアクセスできます。これで要件②も満たせたことになります。
認証無しにしたい・IdPを変更したいといった要件がある場合は、WebAppsの[設定]＞[認証]という画面から変更しましょう。

以上で構成完了です。