はじめに
皆さんこんにちは。
Kazuyaです。
Microsoftから、github にて、chatgptの内部構成までを公開するような形で公開されました。
https://github.com/microsoft/azurechatgpt
この投稿は、以下の連載です。
①でDevOpsを用いて楽に環境をと思ったところ、Pipelineにミスがあるようで（多分Envilonment系）、デプロイ後に動確すると、AppServiceのURLをたたいてもエラー。
②では、ローカルで実行するとうまくいきました👌
【連載】
今日は、azurechatgptのgithubにある「公開」というところを実践しながら、この記事を書いていこうと思います。
今手元には、②で作った環境があるものとします。
実質作ったのは「.env.local」のみ。後は、Azure上のリソースだけですね👌
各種前提事項などは、①および②の記事を参照してから戻ってきてください。
やっていく
②では「Clone」でやってしまいましたが、Git連携が必要なので、フォークからやり直します。
Github でフォーク
azurechatgptのリポジトリでフォークしていきましょう。
自分のGithubアカウントにはログイン済みの状態で、画面右上の「Fork」をクリックします。
以下のように、Forkの画面が出るので、特に設定を変えずに、Create Forkしましょう。
完了したら、「自分のアカウントの下に、azurechatgptのリポジトリ」ができていることを確認。
ここを間違えて作業をすると、もちろん勝手なCommitはブロックしてくれていると思いますが、
ごくまれにpublicプロジェクトで、commitブロックしておらずで、pushを外部の人がしちゃった・・・とか、
無駄なpull requestを発行しちゃって恥をかいた。。。とかありますので、
必ず自分用のリポジトリに対して作業をしましょう。
なお、このフォークしたプロジェクトは、アップストリームとは基本同期しないので、
これから、microsoft/azurechatgptのほうで更新があったものを自動では取り込みません。
適宜アップストリーム側との差分確認などをして最新を取得することをお勧めです。
（確実にまだまだ過渡期なので更新は頻繁にあるかと）
Azure App Serviceを含むリソースグループに対する、サービスプリンシパルの作成
まずは、Azure に ログインしていきます。
az login
これで、ブラウザにて、Azureへのログインを要求されますので、自分のアカウントでログイン。
※複数持っている場合は、ログインアカウントに注意です。ここを間違えると後発の処理が全部失敗します。
ログインができたら、以下を参考に、サービスプリンシパル（SP）を作成していきます。
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」）
上記コマンドを実行すると、すぐにSPが出来上がるので、コマンドラインの出力結果をメモする。
シークレットの設定
Githubの自分のazurechatgptリポジトリに戻って、Settingsを開く。
[Secrets and variables] > [Actions]を開く。
画面の「New repository secret」をクリックする。
Nameに「AZURE_CREDENTIALS」と入れ、
Secretに、出力されたJsonをそのまま貼り付け、Add Secretをクリック。
次いで、「AZURE_APP_SERVICE_NAME」のシークレットも入れていく。
シークレット値は、自分で決めた任意のアプリ名でＯＫ。
例として「my-azurechatgpt」という値のシークレットを作成。
github フローの実行
ガイドには、シークレットを入れたらワークフローが動くとありますが、設定順序が逆転していて動きません。
ので、自分で、Actionsを開いて「Build & deploy~~~~」を開き、run workflowをクリック。
実行して、「All workflows」に戻ると、以下のように実行中になるので待ちます。
完了まで待ちましょう。
待機。。。
むむ。。。失敗したっぽい。
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も含めて作ってくれるわけではないと思われたので、
作っておくのが回避策になりそうと考えます。
以下のボタンを押した後の手順は、①のページで同じことをしていますので、そちらを参考にして作ったら戻ってきてください。
①のページ：
戻ってきたら、Azure上に作成された後の「AppService」の名前をメモしてください。
その「AppService」の名前を、GithubのActionsのシークレットとして設定した「AZURE_APP_SERVICE_NAME」の値に上書きで設定してください。
これでgithub actionのワークフローを再度実行します。
そうすると・・・
ＯＫ！できました👌
では、ここからが肝になってきます。
まず、AppServiceとしてデプロイされているので、AppServiceの概要ページから、URIを確認します。
①のページの時はうまくいかなかったページ表示がうまくいっています🔥🔥
おそらく①のページの時に「楽して開始！」みたいなことをやりましたが、
どうやら、ボタンを押して「Azureのリソースをデプロイ」した後に、内部で動くアプリのリリースは別途やらなければ動かないのかな？？という気がします。
中身までは追っていませんが、いったんはこの理解にしておきます🔥🔥
ここから環境設定
今の状態では、②のページでやった通り、.env.localへの設定同様、環境変数が入っていませんので、それを入れていく必要があります。
②のページはこちら
で、この②のページで作った「.env.local」の値を見ながら、App Serviceの、環境変数値を埋めていきます。
App Serviceの環境変数値設定
対象のAzure App Serviceを開いたら、構成を開きます。
以下のように、デフォルトではなっているのですが、おそらくこれが不足や誤りがありそうです。
なのでここを変えていきます。
②のページを実施済みで、CosmosDBや、OpenAIの情報はすでに.env.localにあるので、
.env.localと同じ変数宣言になるように更新していきます。
ただし、「NEXTAUTH_SECRET」は書き換え禁止です。勝手に設定されているので書き換えずに行きます。
「NEXTAUTH_URL」の値が間違えています。「https://＜App ServiceのURI＞」に更新する必要があります。
COSMOSDBのKEYとURIについては、デプロイボタンを押すと新たなCosmosDBが出来上がりました。②のページで手動で作りましたが、自動で作った一式を使うのが正しいのかと思うので、こちらも書き換えずに行きます。
（ただし、パラメータ名が、デフォルトで入っているのが、「COMOSEDB」になっているので、ここは直す必要があります。）
最終的にはこのような形になりました。
この状態で、再度、App ServiceのURLを開いていきます。
Microsoft 365をクリック(Azure ADにしているので）
AD認証画面に来ました！
ADに参加できる権限のアカウントをここで選びます。
ログインできるか・・・・
残念！！
ここはすごく簡単な話しでした。
Azure ADにアプリを登録したときに、リダイレクト先を指定していると思うのですが、
これが、「localhost」のままになってしまっていて、リダイレクトできない状況になっていると思われます。
環境変数「AZURE_AD_CLIENT_ID」の値をAzureのキーワード欄に入れて、ActiveDirectoryから、アプリを調べます。
認証ページを開くと、リダイレクトURIが、localhostだけになっているので、ここに、AppServiceのURIを追加していきます。
形式はこんな感じで新たなURIを、URIの追加リンクを押して追加します。
形式：
https://＜App ServiceのURI＞/api/auth/callback/azure-ad
これで保存します。
さぁ、いよいよ・・・！！！！
再度、App ServiceのURIを開いていきます。
Microsft365をクリック。
アカウント選択画面でアカウントを選択。
おぉ！！ADサインインの画面が出た！
ADサインインを再度クリック。
アカウントを再度選ぶ。
で、、、、出来た！！！
苦節４６年。。。（嘘
ということで、これで公開するところまでが無事できました。
いろいろと、GithubのREADMEは「バージョン」や、著者の思いのたけで書いていて「前提」が不足しがちなので、はまりやすいですが、この記事で、失敗を経て無事リリース出来ましたので、ぜひ参考にしてくださいませ🔥
それではまた会いましょう🔥🔥🔥
免責事項
本記事は、著者が独自で調査・検証を行った内容で、所属企業やいずれかの企業の公式見解に基づきません。
また、本記事を参考にして行った作業に関して発生するすべての損害、問題、課題について、当方では一切の責任を負えませんのであらかじめご了承ください。