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

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

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

【連載】

https://qiita.com/kazuya-ho2/items/b45054a33c2981b2b79d

https://qiita.com/kazuya-ho2/items/0d03d2fed8fa389faeb7

https://qiita.com/kazuya-ho2/items/78371596a202eda07319

*************************************************************

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

https://qiita.com/kazuya-ho2/items/b45054a33c2981b2b79d

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

# やってみる

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

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

これでOK。

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

```config: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を実行してみます。

```bash
cd src
npm install
npm run dev
```

localhost:3000で起動するので、開いてみると以下のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/2d7dca3f-fc75-bc69-71a1-9cd8c1da441b.png)

当然ながらこの状態で、いずれかのAuthを実行しても以下のようにエラーになります。
設定していないからですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/e3051678-2d46-c4d7-6810-23893e92ae51.png)

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

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

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

設定は以下に倣って作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/950115ca-9f79-c834-a7fc-76dffd460c54.png)

ざっとこんな感じです。登録を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/6989fb44-e33f-40e5-4d44-9598413ab0ee.png)

登録を押した後、ポータルトップに戻るので、今登録したアプリ名でリソースを検索します。
アプリケーションが見つかるので開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/a35119ec-abfb-3fe8-fe71-e56be4caca2b.png)

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

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

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

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

完成した「.env.local」はこんな感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/f9bb5952-1c9a-0657-8611-bfa89c63da41.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/5bedb90a-8012-c6e4-be7f-6bd46924143a.png)
とりあえず「コア」を選んで作っていきます。
ザックリこんな感じにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/28cc35fc-6269-4598-aedc-064abf9364bb.png)
迷わず、確認+作成で作成を完了させます。デプロイ完了まで少し待機....。

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

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

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

# 動かしてみる
npm run devをsrcディレクトリで実行した後、localhost:3000を表示。
以下のような画面が出るので、今回は、Microsoft365を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/c0972165-3f41-8165-b81e-360982b0d1e3.png)

以下のような画面が出た。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/9588e22e-028a-482d-3851-41792c2dcc4d.png)

そして、Sign inをクリックすると！！！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/d1c5ba51-f092-95f9-1b35-9dc86fa726c2.png)

おぉぉぉ！！開いた！！！！
New Chatを押してみる。
やばい。。。ほぼChatgptですやん。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/23729004-ce17-5185-6fea-64d72d984c31.png)

そして、、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/accf7eca-8dac-31ae-f6cb-0120d89c43e3.png)

◇実際の動き（gifなので画質粗め。。。
![無題の動画.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/e0cc6995-4154-5817-0991-2f9f627a6fa0.gif)


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


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

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

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



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