Microsoft - AzureChatGPTをCloneしてオリジナルChatgptを作っちゃおう - ③Azureに公開してローンチしちゃおう（成功編）

# はじめに
皆さんこんにちは。
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

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

今日は、azurechatgptのgithubにある「公開」というところを実践しながら、この記事を書いていこうと思います。
今手元には、②で作った環境があるものとします。
実質作ったのは「.env.local」のみ。後は、Azure上のリソースだけですね👌
各種前提事項などは、①および②の記事を参照してから戻ってきてください。

# やっていく
②では「Clone」でやってしまいましたが、Git連携が必要なので、フォークからやり直します。

## Github でフォーク
azurechatgptのリポジトリでフォークしていきましょう。
自分のGithubアカウントにはログイン済みの状態で、画面右上の「Fork」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/bf89d0e0-1bce-c4b4-005e-e7ee8947c4a5.png)

以下のように、Forkの画面が出るので、特に設定を変えずに、Create Forkしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/a424c3e0-f69a-c969-a306-6abbebbfe9e1.png)

完了したら、「自分のアカウントの下に、azurechatgptのリポジトリ」ができていることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/fb8ce9ce-6295-12eb-b5ee-22def4306974.png)

ここを間違えて作業をすると、もちろん勝手なCommitはブロックしてくれていると思いますが、
ごくまれにpublicプロジェクトで、commitブロックしておらずで、pushを外部の人がしちゃった・・・とか、
無駄なpull requestを発行しちゃって恥をかいた。。。とかありますので、
必ず自分用のリポジトリに対して作業をしましょう。
なお、このフォークしたプロジェクトは、アップストリームとは基本同期しないので、
これから、microsoft/azurechatgptのほうで更新があったものを自動では取り込みません。

適宜アップストリーム側との差分確認などをして最新を取得することをお勧めです。
（確実にまだまだ過渡期なので更新は頻繁にあるかと）

## Azure App Serviceを含むリソースグループに対する、サービスプリンシパルの作成
まずは、Azure に ログインしていきます。

```bash
az login
```
これで、ブラウザにて、Azureへのログインを要求されますので、自分のアカウントでログイン。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/6594bedd-5cbe-3b9c-0a99-30291915b944.png)

##### ※複数持っている場合は、ログインアカウントに注意です。ここを間違えると後発の処理が全部失敗します。

ログインができたら、以下を参考に、サービスプリンシパル（SP）を作成していきます。

```bash
az ad sp create-for-rbac --name <NAME OF THE CREDENTIAL> --role contributor --scopes /subscriptions/<SUBSCRIPTION ID>/resourceGroups/<RESOURCE GROUP> --sdk-auth --output json
```
＜NAME OF THE CREDENTIAL＞：サービスプリンシパルに割り当てる任意の名前（e.g.: azurechatgptsp)
＜SUBSCRIPTION ID＞：App Serviceのあるリソースグループの概要欄のサブスクリプションIDの値
＜RESOURCE GROUP＞：App Serviceのあるリソースグループ名（この例だと「ai-conversation」）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/8de5ceb2-b6da-ee7f-c603-a0bc0bc4c3da.png)

上記コマンドを実行すると、すぐにSPが出来上がるので、コマンドラインの出力結果をメモする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/a5ea2e62-5b96-4931-2a18-adeb91714212.png)

## シークレットの設定
Githubの自分のazurechatgptリポジトリに戻って、Settingsを開く。
[Secrets and variables] > [Actions]を開く。
画面の「New repository secret」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/ae52dc45-8dc8-efc1-88c0-9938b42aa1db.png)

Nameに「AZURE_CREDENTIALS」と入れ、
Secretに、出力されたJsonをそのまま貼り付け、Add Secretをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/72f56e6a-015c-a358-087b-65ecefc3c848.png)

次いで、「AZURE_APP_SERVICE_NAME」のシークレットも入れていく。
シークレット値は、自分で決めた任意のアプリ名でＯＫ。
例として「my-azurechatgpt」という値のシークレットを作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/c4109214-f35c-3a30-4ead-b0f9a5300c8b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/da62b644-53d6-96e6-3602-4d85a873272a.png)

## github フローの実行
ガイドには、シークレットを入れたらワークフローが動くとありますが、設定順序が逆転していて動きません。
ので、自分で、Actionsを開いて「Build & deploy~~~~」を開き、run workflowをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/e13d32df-4173-435f-d64f-955e4a5bf4e8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/1df3a608-7009-b93f-2bd4-cb29933cb0e1.png)

実行して、「All workflows」に戻ると、以下のように実行中になるので待ちます。
完了まで待ちましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/dea4a933-169f-96f7-425e-5137060cab93.png)

待機。。。
むむ。。。失敗したっぽい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/200cfe84-8b8b-b9c4-0aa8-16e60b177992.png)

Githubのガイドに戻る。
特に漏れはなさそうで、エラーメッセージを見ると「リソースが見つからない」ということなので、
Github actionのワークフローを確認。

エラーが発生しているのは、「actions/download-artifact@v3」でダウンロードした後に、
「azure/webapps-deploy@v2」でリソースが見つからないとのことなので、
「Nextjs-site.zip」か、シークレット、またはAzure側のリソースが見つからないと判断できる。

ここでわかるのが、実行しているのは、azure/webapps-deployなので、おそらくAzureのリソースがないと言っているのでしょう。

ということで、Azureのリソースがある前提なのだと判断し、以下の手順で、
Azure側のリソースだけ用意しちゃいます。

### Azure側のソースの準備方法
以下のgithubページに「楽してデプロイ」の機能が実装されているのでそちらを使っていきます。
Githubアクションをするときもこの手順が必要だったのか？というのは、ぶっちゃけGithubからは読み取れませんが、
「azure/webapps-deploy@v2」は存在しないときに、Planも含めて作ってくれるわけではないと思われたので、
作っておくのが回避策になりそうと考えます。

https://github.com/microsoft/azurechatgpt

以下のボタンを押した後の手順は、①のページで同じことをしていますので、そちらを参考にして作ったら戻ってきてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/af313744-9d79-6c25-80a1-5f53c98474c3.png)

①のページ：

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

戻ってきたら、Azure上に作成された後の「AppService」の名前をメモしてください。
その「AppService」の名前を、GithubのActionsのシークレットとして設定した「AZURE_APP_SERVICE_NAME」の値に上書きで設定してください。

これでgithub actionのワークフローを再度実行します。

そうすると・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/f43cafa8-ffac-9c69-3c02-d00b61070cd1.png)

ＯＫ！できました👌

では、ここからが肝になってきます。
まず、AppServiceとしてデプロイされているので、AppServiceの概要ページから、URIを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/77a80394-97e0-c791-6233-77a772982031.png)

①のページの時はうまくいかなかったページ表示がうまくいっています🔥🔥
おそらく①のページの時に「楽して開始！」みたいなことをやりましたが、
どうやら、ボタンを押して「Azureのリソースをデプロイ」した後に、内部で動くアプリのリリースは別途やらなければ動かないのかな？？という気がします。
中身までは追っていませんが、いったんはこの理解にしておきます🔥🔥

## ここから環境設定

今の状態では、②のページでやった通り、.env.localへの設定同様、環境変数が入っていませんので、それを入れていく必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/36730836-f7e9-6e83-f67b-d8566075e1de.png)


②のページはこちら

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

で、この②のページで作った「.env.local」の値を見ながら、App Serviceの、環境変数値を埋めていきます。

### App Serviceの環境変数値設定
対象のAzure App Serviceを開いたら、構成を開きます。

以下のように、デフォルトではなっているのですが、おそらくこれが不足や誤りがありそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/9ffa7b87-9d17-868a-787a-3d95f780a83c.png)

なのでここを変えていきます。
②のページを実施済みで、CosmosDBや、OpenAIの情報はすでに.env.localにあるので、
.env.localと同じ変数宣言になるように更新していきます。
#### ただし、「NEXTAUTH_SECRET」は書き換え禁止です。勝手に設定されているので書き換えずに行きます。
#### 「NEXTAUTH_URL」の値が間違えています。「https://＜App ServiceのURI＞」に更新する必要があります。
#### COSMOSDBのKEYとURIについては、デプロイボタンを押すと新たなCosmosDBが出来上がりました。②のページで手動で作りましたが、自動で作った一式を使うのが正しいのかと思うので、こちらも書き換えずに行きます。
（ただし、パラメータ名が、デフォルトで入っているのが、「COMOSEDB」になっているので、ここは直す必要があります。）

最終的にはこのような形になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/a402b5ce-1d83-5819-2cef-79544261fefe.png)


この状態で、再度、App ServiceのURLを開いていきます。

Microsoft 365をクリック(Azure ADにしているので）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/b7c94e0a-ac6c-f471-2617-6a5734cb36e2.png)

AD認証画面に来ました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/0c87178d-77d5-2867-699c-c93daae76671.png)

ADに参加できる権限のアカウントをここで選びます。
ログインできるか・・・・

残念！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/9c9d304d-2ecc-201b-ae11-0da77f997a31.png)

ここはすごく簡単な話しでした。
Azure ADにアプリを登録したときに、リダイレクト先を指定していると思うのですが、
これが、「localhost」のままになってしまっていて、リダイレクトできない状況になっていると思われます。

環境変数「AZURE_AD_CLIENT_ID」の値をAzureのキーワード欄に入れて、ActiveDirectoryから、アプリを調べます。
認証ページを開くと、リダイレクトURIが、localhostだけになっているので、ここに、AppServiceのURIを追加していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/c83a3a87-c3c1-2742-a57b-5418424f3f2c.png)

形式はこんな感じで新たなURIを、URIの追加リンクを押して追加します。

形式：
https://＜App ServiceのURI＞/api/auth/callback/azure-ad

これで保存します。

さぁ、いよいよ・・・！！！！
再度、App ServiceのURIを開いていきます。
Microsft365をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/3f55b24d-feb3-b4e9-4527-3d174fa39c5a.png)

アカウント選択画面でアカウントを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/7a71e971-82f7-4842-747d-c60cd2165921.png)

おぉ！！ADサインインの画面が出た！
ADサインインを再度クリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/440fdcf3-f9d7-bfd2-a00e-2f223a69fbbf.png)

アカウントを再度選ぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/b563d84c-c386-8706-a2b4-751366cd0040.png)

で、、、、出来た！！！
苦節４６年。。。（嘘
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2242133/0ddfbc2f-ab69-9cb5-17ba-dba514f28c30.png)

ということで、これで公開するところまでが無事できました。


いろいろと、GithubのREADMEは「バージョン」や、著者の思いのたけで書いていて「前提」が不足しがちなので、はまりやすいですが、この記事で、失敗を経て無事リリース出来ましたので、ぜひ参考にしてくださいませ🔥

それではまた会いましょう🔥🔥🔥


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