はじめに
皆さんこんにちは。
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のサンプルを貼り付けます。
# 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にアップしていきます🔥🔥🔥
それでは皆様、また会いましょう！！
免責事項
本記事は、著者が独自で調査・検証を行った内容で、所属企業やいずれかの企業の公式見解に基づきません。
また、本記事を参考にして行った作業に関して発生するすべての損害、問題、課題について、当方では一切の責任を負えませんのであらかじめご了承ください。