Azure Chatの概要と使い方【導入方法を解説 | Private ChatGPT】

はじめまして、ますみです！

株式会社Galirage（ガリレージ）という「生成AIのシステム開発会社」で、代表をしております^^

この記事では「Azure Chatの概要と使い方」を解説します！

生成AI界隈で、かなり注目されているOSSの一つなため、ぜひ最後までご覧ください^^

Azure OpenAI Serviceについてまだ知らない方は、下記の動画を先にご覧ください。

https://youtu.be/fnAWyHylxGU

文字よりも「動画の方が理解しやすい」という方はこちらをご覧ください◎
Azure ChatGPTの概要と使い方【有料級 | 導入方法を解説 | Private ChatGPT】 - YouTube

Azure Chatとは？

Azure Chat（旧Azure ChatGPT）とは、「ChatGPTをセキュアに利用するための法人向けのウェブアプリケーション」です。

Microsoftによって提供されているオープンソースで、「Azure環境で簡単に展開するためのパッケージ」と「ウェブアプリケーションのソースコード」が公開されています。このオープンソースを複製して、自社のクラウド環境に展開することによって、自社に特化したChatGPTを開発することができます。

このAzure ChatGPTのソースコードを用いて、Azure環境に正しく展開することによって次の3つのメリットがあります。

1. データの保護
   Azure ChatGPTで用いたデータは、OpenAIのサーバーへ共有されないため、データプライバシーの水準が高くなります。

2. ネットワーク制御
   インフラにおけるネットワークを自由に制御できるようになるため、かなり高い水準のセキュリティ構成にすることができます。

3. カスタム性の高い機能開発
   一般的なChatGPTのウェブアプリでは実装されていないような機能を、自由に開発できます。たとえば、機密性の高い社内ドキュメントを参照して回答を生成する自社特化もしくは業界特化のChatGPTを開発できます。

Azure ChatGPTの画面説明

次に、実際にAzure ChatGPTを展開した際の画面を説明します。

まずログイン画面において、GitHubとMicrosoft 365（Azure Entra、旧Azure AD）でのログインから選択することができます。

ログインをすると、次のようなホーム画面へ遷移します。

そして、現状、Azure ChatGPTでできることとしては次のとおりです。

1. 新規チャットの追加
2. チャットの履歴確認
3. チャットの削除
4. モデル選択
5. ダークモードの切り替え

実際のチャット画面は次の通りです。

そして、チャット履歴は次のように表示されます。

ダークモードは次のような見た目をします。

Azure ChatGPTの導入方法

これ以降、Azure ChatGPTの導入方法を解説します。

なるべく丁寧に説明しますが、システム開発を本業としていない方々などにとっては、正直導入のハードルが高い場合もあるかと思います。

そのため、もしも「自分たちで導入するのは不安だな、大変そうだな」という方がいましたら、私たちの会社で導入支援をすることも可能なため、まるっと任せたい方は以下のフォームよりご相談ください。

https://forms.gle/G5g1SJ7BBZw7oXYA7

まず前提として、Azure ChatGPTを使用するためには、次の3つを用意します。

1. GitHubのアカウント
2. Azureのアカウントおよびサブスクリプション
3. Azure OpenAI Serviceの登録

AzureとAzure OpenAI Serviceの登録方法に関しては、こちらの動画で詳しく解説しています。

https://youtu.be/dnuvrxZ0zEg

これら3つの準備ができた方は、以下のAzure ChatGPTのGitHubリポジトリにアクセスします。

https://github.com/microsoft/azurechatgpt

そして、「Provision Azure Resources」の中の「Deploy to Azure」をクリックします。

そして、Azureのアカウントでサインインします。

ここで、以下の項目を記入して、「確認と作成」をクリックし、次の画面で「作成」をクリックします。

• サブスクリプション
• リソースグループ
• リージョン
• Name
• OpenAI API Key
• OpenAI Instance Name
• OpenAI Deployment Name
• OpenAI API Version

デプロイが完了したら、「リソースに移動」をクリックし、「リソースグループに移動」をクリックして、デプロイされたリソースグループを確認します。

そうすると、このようにApp ServiceとApp ServiceプランとAzure Cosmos DBアカウントが作成されていることがわかります。

それぞれMicrosoftの公式のアーキテクチャ図を用いて少しだけ説明します。

• Azure App Serviceは、ウェブアプリの部分を担います。
• Azure Cosmos DBは、チャット履歴などを保存する部分を担います。
• Azure OpenAI Serviceは、LLMの処理の部分を担います。
• Microsoft Entra（旧Azure AD）は、ユーザー認証の部分を担います。

ここで、気付いた方もいるかと思いますが、今の状態では、まだウェブアプリケーションを動かすことはできません。試しに、Azure App ServiceからエンドポイントURLを開いてみましょう。

すると、このようにApplication Errorになり、次のようなエラーが表示されます。

If you are the application administrator, you can access the [diagnostic resources](https://azure-chatgpt-test-app-43mvdamzgd3qi.scm.azurewebsites.net/detectors).

では、残りのデプロイ作業を進めましょう。

まずAzure ChatGPTのソースコードをGitHubからデプロイする必要があります。

Azure ChatGPTのGitHubのページを開き、Forkをしましょう。

ここからAZURE_CREDENTIALSの発行をして、GitHubのSecretsに格納していきます。

まずTerminalを開き、次のように入力しましょう。

shell

% az ad sp create-for-rbac --name "Azure ChatGPT Production" --role contributor --scopes /subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP} --sdk-auth --output json
Option '--sdk-auth' has been deprecated and will be removed in a future release.
Creating 'contributor' role assignment under scope '/subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP}'
The output includes credentials that you must protect. Be sure that you do not include these credentials in your code or check the credentials into your source control. For more information, see https://aka.ms/azadsp-cli

すると、次のように、jsonファイルで認証情報が返ってくるため、こちらを控えておきましょう。

shell

{
  "clientId": "xxx",
  "clientSecret": "xxx",
  "subscriptionId": "xxx",
  "tenantId": "xxx",
  "activeDirectoryEndpointUrl": "https://login.microsoftonline.com",
  "resourceManagerEndpointUrl": "https://management.azure.com/",
  "activeDirectoryGraphResourceId": "https://graph.windows.net/",
  "sqlManagementEndpointUrl": "https://management.core.windows.net:8443/",
  "galleryEndpointUrl": "https://gallery.azure.com/",
  "managementEndpointUrl": "https://management.core.windows.net/"
}

そして、GitHubへ戻り、Azure ChatGPTのリポジトリの「Settings」から「Secrets and variables」からActionsを選択して、「New repository secret」をクイックします。

そして、Nameに「AZURE_CREDENTIALS」と入力し、Secretの中に先ほどのjsonのデータを貼り付けて、Add secretで登録します。

さらに、もう一度「New repository secret」をクイックして、今度は、Nameに「AZURE_APP_SERVICE_NAME」を入力し、Azure Web Appの名前を入力します。

具体的にはエンドポイントURLである「https://my-web-app-name.azurewebsites.net/」の中の「my-web-app-name」の部分が該当します。

Secretsの格納が完了したら、GitHub Actionsから実行していきます。

完了すると次のような画面になります。

次に、認証機能を追加していきます。

まずAzure ChatGPTは、GitHubとMicrosoft Entraによる認証から選ぶことができます。

今回は、両方とも解説していきます。

まずMicrosoft Entraによる認証方法を解説します。

そして、Azure Web Appを開き、「構成」から「New application setting」をクリックして、次の3つの環境変数を設定します。これらの情報は、Terminalで発行したAZURE_CREDENTIALSのjsonファイルの中の情報を使用します。

AZURE_AD_CLIENT_ID=xxx
AZURE_AD_CLIENT_SECRET=xxx
AZURE_AD_TENANT_ID=xxx

最後に、reply addressの設定をします。

Azure Active Directoryを開き、「アプリの登録」を選択します。

そして、すべてのアプリケーションを選択し、今回作成したアプリを開きます。

「認証」をクリックして、「プラットフォームを追加」をクリックします。

そして、Webを選択して、以下のようなAzure Web AppのURLをリダイレクトURLとして登録します。

https://azure-chatgpt-test-app-43mvdamzgd3qi.azurewebsites.net/api/auth/callback/azure-ad

それでは、Webアプリケーションを実行してみましょう。

すると、次のようにウェブアプリのログイン画面が表示されて、このようにサービスを使用できるようになります。

さらに、GitHubによる認証の方法も解説します。

GitHubの設定画面の中の「Developer Settings」の中のOAuth Appsを選択します。

そして、「Register a new application」をクリックします。

そこで、次のようにアプリケーション名・ホームページURL・コールバックURLを登録します。

Application name: Azure ChatGPT Production
Homepage URL: https://YOUR-WEBSITE-NAME.azurewebsites.net
Authorization callback URL: https://YOUR-WEBSITE-NAME.azurewebsites.net/api/auth/callback/github

そして、「Generate a new client secret」をクリックして、「Client secret」を保存します。

そして、Client IDも併せて、保存しておきます。

そして、Azure Web Appの「構成」の「New application setting」より先ほど保存した二つのkeyを保存します。

AUTH_GITHUB_ID=xxx
AUTH_GITHUB_SECRET=xxx

この状態でログインしてみましょう。

すると、認証を求められるため、こちらを許可します。

すると、このようにログインすることができます。

ローカル環境での実行方法

最後に、実際に追加開発を行う場合、ローカルでの環境構築は必須になってくるため、Azure ChatGPTを「ローカル環境で実行する方法」を解説します。

まずGitHubのリポジトリをローカルにクローンします。

% git clone https://github.com/{USER_NAME}/azurechatgpt

そして、VS Codeで開きます。

クローンが完了したら、.env.exampleを複製して、.env.localに名前を変更します。

そして、中の情報を埋めていきます。

まずAzure App Serviceの中に格納されているAZURE_OPENAI_APIとAZURE_COSMOSDBの環境変数をこちらに貼り付けます。

そして、開発者向けのAzure ADのアプリとGitHubのOAuthを作成します。

まずAzure ADに関しては、Azure Active Directoryにアクセスして、「アプリの登録」から「新規登録」を行います。

アプリケーション名は、Azure ChatGPT DEV Environmentとして、「この組織ディレクトリのみに含まれるアカウント (既定のディレクトリ のみ - シングル テナント)」を選択します。

そして、リダイレクト URIでは、Webを選択して、「http://localhost:3000/api/auth/callback/azure-ad」と入力して、登録します。

そして、その後に表示されるアプリ画面の中の「アプリケーション（クライアント）ID」と「ディレクトリ（テナント）ID」をコピーして、環境変数として格納します。

そして、「証明書とシークレット」から「新しいクライアントシークレット」をクリックして、新しい証明書を発行します。

ここで、表示された「値」という部分をコピーして、環境変数に格納します。

次に、GitHubのによる認証を登録します。

GitHubの設定画面の中の「Developer Settings」の中の「OAuth Apps」を選択します。

そして、「Register a new application」をクリックします。

そこで、次のようにアプリケーション名・ホームページURL・コールバックURLを登録します。

Application name: Azure ChatGPT DEV Environment
Homepage URL: http://localhost:3000
Authorization callback URL: http://localhost:3000/api/auth/callback/github

そして、「Generate a new client secret」をクリックして、「Client secret」を保存します。

そして、Client IDも併せて、保存しておきます。

そして、Azure Web Appの「構成」の「New application setting」より先ほど保存した二つのkeyを保存します。

これで、すべての環境変数の登録は完了です。

.env.local

# Update your Azure OpenAI details
# AZURE_OPENAI_API_INSTANCE_NAME should be just the name of azure openai resource and not the full url;
# AZURE_OPENAI_API_DEPLOYMENT_NAME should be deployment name from your azure openai studio and not the model name.
# AZURE_OPENAI_API_VERSION should be Supported versions checkout docs https://learn.microsoft.com/en-us/azure/ai-services/openai/reference
AZURE_OPENAI_API_KEY=xxx
AZURE_OPENAI_API_INSTANCE_NAME=xxx
AZURE_OPENAI_API_DEPLOYMENT_NAME=xxx
AZURE_OPENAI_API_VERSION=2023-03-15-preview

# You must have atleast one of the following auth providers configured
AUTH_GITHUB_ID=xxx
AUTH_GITHUB_SECRET=xxx

AZURE_AD_CLIENT_ID=xxx
AZURE_AD_CLIENT_SECRET=xxx
AZURE_AD_TENANT_ID=xxx

# Update your production URL in NEXTAUTH_URL
NEXTAUTH_SECRET=AZURE-OPENIAI-CHATGPT-NEXTAUTH-OWNKEY@1
NEXTAUTH_URL=http://localhost:3000

# Update your Cosmos Environment details here
AZURE_COSMOSDB_URI=xxx
AZURE_COSMOSDB_KEY=xxx

# Update your Cosmos DB_NAME and CONTAINER_NAME if you want to overwrite the default values
AZURE_COSMOSDB_DB_NAME=chat
AZURE_COSMOSDB_CONTAINER_NAME=history

この状態でログインしてみましょう。

Terminalを開き、srcフォルダへ移動して、次のように実行しましょう。

shell

% cd src
% npm install
% npm run dev

そして、http://localhost:3000にアクセスします。

すると、次のようにログイン画面が表示されて、アプリケーションを使用することができます。

チャット履歴の閲覧方法

チャットはすべてAzure Cosmos DBというNoSQL DBに格納されています。

そのため、Azure PortalからAzure Cosmos DBを検索して、「データエクスプローラー」を開きます。

そして、chatの中のhistoryの中のItemsを選択し、任意のidをクリックすると、このようにチャットの履歴を確認できます。

ここでは、typeの中にデータの種類が入っており、一つ目のデータは、CHAT_THREADというチャットのタイトルを示します。そして、nameの中にチャットのタイトルが格納されています。

その他にも「モデル名・使用ユーザー名・作成日時・削除フラグ」が格納されています。

そして、二つ目のデータには、typeがCHAT_MESSAGEのデータが格納されています。そして、roleを見ると、userとなっており、ユーザーによって入力されたプロンプトであることがわかります。実際のチャット本文はcontentに格納されており、threadIdから対応するスレッドも特定できます。

最後に、次のようにroleがassistantのデータがAIによるレスポンスの入ったデータになります。

FAQ

「No reply address is registered for the application.」というエラーが出た時

もしも、reply addressがありませんと表示された場合は、Redirect URIが正しく設定されていないため、Azure Active Directoryよりご登録してください。

shell

申し訳ありませんが、サインイン中に問題が発生しました。

AADSTS500113: No reply address is registered for the application.

最後に

最後まで読んでくださり、ありがとうございました！
この記事を通して、少しでもあなたの学びに役立てば幸いです！

【📩 仕事の相談はこちら 📩】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。
https://forms.gle/G5g1SJ7BBZw7oXYA7

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AIの社内ガイドライン」PDFを『公式LINE』で配布中 🎁
「LINEで相談したい方」や「お問い合わせを検討中の方」は、公式LINEでご連絡いただけますと幸いです。
（期間限定で配信中なため、ご興味ある方は、今のうちに受け取りいただけたらと思います^^）
https://lin.ee/3zRuqKe

おまけ①：生成AIアカデミー

より専門的な「生成AIエンジニア人材」を目指しませんか？

そんな方々に向けて、「生成AIアカデミー（旧：生成AIエンジニア塾）」というプログラムを始めました🎉

最終的なゴールとして、『エンタープライズ向けの生成AIシステムを構築するためのスキルを習得し、大手案件で活躍できる人材』を目標とします。

また、一人一人にしっかりと向き合って、メンタリングをできるようにするため、現在メンバーの人数制限をしております。本気度やスキルレベルの高い人から、順番にご案内しております。

▼ 登録はこちらから ▼
https://bit.ly/generative_ai_engineer_school_by_zenn

おまけ②：AI Newsletter for Biz

最新のAIニュースの情報を収集しませんか？

AI Newsltter for Bizは、ビジネスパーソン向けに「AIニュース」を定期配信する完全無料のニュースレターです📩

一人でも多くの方にとって、「AI人材としてのスキルアップ」につながれば幸いです^^

また、現在、登録者限定で「明日から使える 無料AIサービス3選」のPDFを配布中です 🎁
※ ご登録完了のメールに、PDFリンクを添付いたします。

期間限定のプレゼントとなりますので、ぜひ、お早めにご登録ください！

▼ 登録はこちらから ▼
https://bit.ly/ai_newsletter_for_biz_zenn

参考文献

https://github.com/microsoft/azurechatgpt

https://youtu.be/jlHu9-Ki-LQ

https://zenn.dev/umi_mori/books/chatbot-chatgpt

https://zenn.dev/umi_mori/books/prompt-engineer

https://www.youtube.com/playlist?list=PLakzeSUr4kaL32nyYvr067UgGMjCeRFjP

https://www.youtube.com/playlist?list=PLakzeSUr4kaItFFLVi5DnqFu5gmvZSkcN

https://www.youtube.com/playlist?list=PLakzeSUr4kaIiamwsc0NUo8dV4xAIIq93