Microsoft - AzureChatGPTをCloneしてオリジナルChatgptを作っちゃおう - ②ローカルでの動作確認（成功編）

はじめに

皆さんこんにちは。
Kazuyaです。
Microsoftから、github にて、chatgptの内部構成までを公開するような形で公開されました。
https://github.com/microsoft/azurechatgpt

---

この投稿は、以下の連載です。

①でDevOpsを用いて楽に環境をと思ったところ、Pipelineにミスがあるようで（多分Envilonment系）、デプロイ後に動確すると、AppServiceのURLをたたいてもエラー。
②では、ローカルで実行するとうまくいきました👌

【連載】

---

以下の記事で、DevOpsを用いて楽にデプロイして触ってみようとしましたが、残念ながら今のバージョンでは正常に動かない様子。

ここで、今回はローカル環境からのデプロイ手順が別途公開されているので、そちらを進めていきたいと思います。
全逓などを含む、環境の情報は、上記のページにて記載している内容を流用するので、
ところどころ、「①の作業で作成した」や「①のページ」という表現をしますので参照してください。
ちなみに、①の時と同じように、作りながら書いていきますので、結局「ダメだった」ネタになるかもしれません。
（この時はまだわからずに書いているけど、あとのための備忘のために記載）

やってみる

まずは、コードのクローン

Githubのコードをクローンする。
https://github.com/microsoft/azurechatgpt

git clone https://github.com/microsoft/azurechatgpt
cd azurechatgpt

これでOK。

.env.localを作成

今回は、VSCodeを使ってやっていきます。
srcフォルダに、「.env.local」を作成し、githubのページにある、.env.localのサンプルを貼り付けます。

src/.env.local

# Azure OpenAI configuration
AZURE_OPENAI_API_KEY=
AZURE_OPENAI_API_INSTANCE_NAME=
AZURE_OPENAI_API_DEPLOYMENT_NAME=
AZURE_OPENAI_API_VERSION=

# GitHub OAuth app configuration
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

# Azure AD OAuth app configuration
AZURE_AD_CLIENT_ID=
AZURE_AD_CLIENT_SECRET=
AZURE_AD_TENANT_ID=

# When deploying to production,
# set the NEXTAUTH_URL environment variable to the canonical URL of your site.
# More information: https://next-auth.js.org/configuration/options

NEXTAUTH_SECRET=
NEXTAUTH_URL=http://localhost:3000

AZURE_COSMOSDB_URI=
AZURE_COSMOSDB_KEY=

起動チェック

手順にある通り、ターミナルで、srcフォルダに移動して、npm installを実行した後、npm run devを実行してみます。

cd src
npm install
npm run dev

localhost:3000で起動するので、開いてみると以下のような画面が表示されます。

当然ながらこの状態で、いずれかのAuthを実行しても以下のようにエラーになります。
設定していないからですね。

では、「①のページのほうで各種取得済みの情報」を、先ほど作成した「.env.local」の各種パラメータに設定していきます。

今回はAzureADで行きたいと思います。

AzureADの設定

以下のページをクリックしてAzureADのアプリを作成していきます。
【https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/CreateApplicationBlade/quickStartType~/null/isMSAApp~/false】

設定は以下に倣って作成します。

ざっとこんな感じです。登録を押します。

登録を押した後、ポータルトップに戻るので、今登録したアプリ名でリソースを検索します。
アプリケーションが見つかるので開きます。

以下を参考に各種情報をメモします。
・クライアントID（AZURE_AD_CLIENT_ID）：
　概要ページのアプリケーション（クライアント）ID

・テナントID（AZURE_AD_TENANT_ID）：
　概要ページのディレクトリ（テナント）ID

・シークレットキー（AZURE_AD_CLIENT_SECRET）：
　証明書とシークレットのページを開いて、クライアントシークレットを新しく作成してできる「値」

・AzureOpenAI関連の情報は、「①のページ」で実施済みなのでそちらを参照してください。

完成した「.env.local」はこんな感じになりました。

CosmosDBの手動デプロイ

サラッと書いてありましたが、CosmosDBを用意する必要があります。
任意のリソースグループにCosmosDBを作成します。

とりあえず「コア」を選んで作っていきます。
ザックリこんな感じにしました。

迷わず、確認+作成で作成を完了させます。デプロイ完了まで少し待機....。

デプロイが完了したら、作ったCosmooDBのページを開きます。
開いたら、以下の情報を取得して、.env.localに反映します。

・AZURE_COSMOSDB_URI=CosmosDBの概要ページの、「URI」
・AZURE_COSMOSDB_KEY=CosmosDBのキーページの、「PRIMARY KEY」

さて、これでできました。

動かしてみる

npm run devをsrcディレクトリで実行した後、localhost:3000を表示。
以下のような画面が出るので、今回は、Microsoft365を選択。

以下のような画面が出た。

そして、Sign inをクリックすると！！！！！

おぉぉぉ！！開いた！！！！
New Chatを押してみる。
やばい。。。ほぼChatgptですやん。。。

そして、、、、

◇実際の動き（gifなので画質粗め。。。

こんな感じで、Chatgptさながらのチャットができると。
もちろん自分でカスタマイズもできるので便利🔥🔥

MyChatgptを作るベースとして、認証もくっついていて、セキュアなものがカスタマイズしながら作れるのは最強ですね！！！

次回は3⃣として、これをAzure App Serviceにアップしていきます🔥🔥🔥

それでは皆様、また会いましょう！！

免責事項

本記事は、著者が独自で調査・検証を行った内容で、所属企業やいずれかの企業の公式見解に基づきません。
また、本記事を参考にして行った作業に関して発生するすべての損害、問題、課題について、当方では一切の責任を負えませんのであらかじめご了承ください。