Zenn
🚀

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

2023/08/15に公開
AI
Azure
Microsoft
ChatGPT
Azure OpenAI Service
tech

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

株式会社Galirage（ガリレージ）という「生成AIに特化して、システム開発・アドバイザリー支援・研修支援をしているIT企業」で、代表をしております^^

自己紹介.png

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

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

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

https://youtu.be/fnAWyHylxGU

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）でのログインから選択することができます。

img_01.png

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

img_02.png

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

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

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

img_03.png

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

img_04.png

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

img_05.png

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

img_06.png

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

img_07.png

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

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

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

img_08.png

img_09.png

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

img_10.png

img_11.png

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

img_12.png

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

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

azurechatgpt_architecture.png

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

img_13.png

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

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

img_15.png

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

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

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

img_14.png

img_16.png

ここから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」をクイックします。

img_17.png

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

img_18.png

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

img_19.png

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

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

img_20.png

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

img_21.png

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

まず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

img_22.png

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

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

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

img_23.png

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

img_24.png

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

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

img_25.png

img_26.png

img_27.png

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

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

img_01.png

さらに、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

img_28.png

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

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

img_29.png

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

AUTH_GITHUB_ID=xxx
AUTH_GITHUB_SECRET=xxx

img_30.png

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

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

img_31.png

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

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

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

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

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

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

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

img_32.png

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

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

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

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

img_33.png

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

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

img_34.png

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

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

img_35.png

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

img_36.png

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

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

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

img_37.png

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

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

img_38.png

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

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

img_39.png

そして、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にアクセスします。

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

img_40.png

チャット履歴の閲覧方法

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

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

img_41.png

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

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

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

img_42.png

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

img_43.png

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

img_44.png

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.

最後に

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

おまけ①：Raggle

RAGの精度改善に挑戦しませんか？

Raggleにて、「法務RAGシステムの性能改善ハッカソン」を開催中です！（10月20日に募集締切）

Raggleは、RAGの性能改善技術を競い合い、AIエンジニアのスキルアップを支援するプラットフォームです🥇

優勝者（GOLD🥇）の賞金は、なんと30万円！！！

SILVERは10万円、BRONZEでも5万円の賞金を用意しています！

また、参加賞として、大会終了後に「RAG精度改善ハンドブック」を贈呈予定なため、初学者の方もぜひ挑戦してみてください 🔰

みなさん、奮ってご参加ください🔥

※ 生成AIエンジニアの権利を守るため、投稿されたソースコードの著作権は、投稿者に帰属する規約としているため、その点もご安心ください◎

▼ エントリーはこちら ▼
https://bit.ly/raggle_zenn

おまけ②：書籍出版のお知らせ

ついに『AIとコミュニケーションする技術（インプレス出版）』という書籍の事前予約が始まりました🎉

これからの未来において「変わらない知識」を見極めて、生成AIの業界において、読まれ続ける「バイブル」となる本をまとめ上げました。

かなり自信のある一冊なため、もしもよろしければ、ご一読いただけますと幸いです^^

▼ Amazonの事前予約はこちらから ▼
https://amzn.to/3ME8mLF

おまけ③：生成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

おまけ⑤：生成AIの仕事をしたい仲間を募集中 🤝

弊社Galirageでは常に、40-50件ほどの生成AI案件が走っております。

そして、ほとんどが「生成AIの案件（RAGシステム開発 / 精度改善の研究開発など）」の仕事になります！

かなり人手が不足しており、以下のポジションの仲間を募集しています💪

  • RAGエンジニア（RAG / LangChain / Python）
  • バックエンドエンジニア（Python / FastAPI）
  • フロントエンジニア（Next.js / TypeScript）
  • Azureエンジニア（AOAI / AI Search）
  • UI/UXデザイナー
  • 生成AIリサーチャー（研究開発 / 論文執筆）
  • 生成AIコンサルタント
  • PM / PMO

ご興味がある方は、下記のフォームよりお気軽にご連絡ください！

https://forms.gle/XMd19irZU4Fi7VAQ9

採用基準は下記の通りです。
  • 平日の日中に動ける方だと嬉しいですが、週8時間くらいの副業でもOKです！
  • 開始時期は、直近だと嬉しいですが、遠い未来でもOKです！まずはカジュアルに話しましょう😊
  • 年齢は不問です！現状は、平均年齢は30歳前後の会社です！
  • 「スキルセット」よりも「カルチャーマッチ・仕事への姿勢・ものづくりへのワクワク」を重視します。
    • 10月には新しく10名採用しました。
    • その内、エンジニア経験が3年未満の方は、4名いました。
    • スキルについては、ジョインした後に、必要に応じて、キャッチアップする時間を作ります。
    • 弊社は、正社員7名、業務委託80名の組織で構成されており、業務委託の仲間に支えられているため、正社員と業務委託の間にあまり差をつけていません。
    • 契約形態に関わらず、一緒に働く仲間として受け入れたその日から、大切な仲間です！
    • 新卒や転職の正社員採用もしていますが、業務委託での仕事を通して、お互いにWin-Winだと判断できた方のみを採用しています。
    • 私自身、フリーランスを5年間やっていたため、個人事業主と正社員のメリデメは両方の立場から理解しています。
  • 人手不足ではあるものの、採用基準をかなり厳しくしています。目の前の売上よりも、カルチャーのマッチする人だけを入れることにこだわっています。
  • ちなみに、弊社のリーダーを紹介したプロフィールページはこちらです！
    • Galirageに、本当に素敵な方が多いことは、保証します！

参考文献

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

Discussion