Azure Web Apps に Gradio を LocalGit でデプロイする

Azure Web Apps で Gradio を動かす手順の紹介です。
Docker を使った方法などは紹介されているので、そちらの方が楽かもしれないです。
streamlit についてもスタートアップコマンドを変更すれば同じ方法で起動出来ると思います。（未確認）

環境

azd コマンドをあらかじめインストールしておきます。
azd のインストール

言語など	バージョンなど
Python	3.10.11
Gradio	4.4.1
Azure Web Appsプラン	F1（無料）

手順1 Azure Web Apps のサービスを作成

「App Service」→「作成」→「Web アプリ」
それぞれ入力します。
- プロジェクトの詳細
  - 「サブスクリプション」は特に変更していません。
  - 「リソースグループ」は「rg-rrr」を新規作成しました。
- インスタンスの詳細
  - 「名前」は「webapp-rrr」にしました。
  - 「公開」は「コード」、
    「ランタイムスタック」は「Python 3.10」、
    「地域」は「Japan East」を選択しました。
- 価格プラン
  - 「Linux プラン」は特に変更していません。
  - 「価格プラン」は「Free F1」を選択しました。
「データベース」「デプロイ」「ネットワーク」「監視」「タグ」は特に変更しないのでスキップします。
「作成」します。
「リソースグループ（rg-rrr）」に Azure Web Apps 「webapp-rrr」が作成されている事を確認出来ます。
作成した Azure Web Apps にタグを設定しておきます。
デプロイする際の目印になるものです。
azd-service-name: web

手順2 Azure Web Apps に「ローカル Git」を作成してローカルに clone

作成した Azure Web Apps を開く。
「デプロイセンター」→「設定」→「ソース」→「ローカル Git」を選択して「保存」する。

「保存」後に「Git Clone URI」が表示されるのでコピーしておく。
「ローカルGitまたはFTPSの資格情報」で「ユーザー名」「パスワード」を入力して「保存」する。
先ほどの「Git Clone URI」を使ってローカルに git clone する。
その際に「ユーザー名」「パスワード」を聞かれるので、「ローカルGitまたはFTPSの資格情報」で保存した値を入力する。
自身のローカル環境に空の git リポジトリが clone されます。

手順3 Azure Web Apps にデプロイする準備（azd provision, deploy の実行直前まで）

azd init を実行する。
（もしかしたら azd auth login をしておく必要があるかもしれない。）

「.azure\rrr.env」に「environment name」が登録されます。
プロジェクトフォルダに「infra」フォルダを作成して「main.bicep」「main.parameters.json」ファイルを作成する。
- 「azd provision」を実行した際に上記ファイルがないとエラーになって進まないので作成します。
- 「main.bicep」は空ファイルで良いです。
  - このファイルを設定しておく事で各 Azure サービスの作成まで自動化出来ますがここでは詳細は省略しています。
- 「main.parameters.json」は以下の値を設定しておきます。
  main.parameters.json
```
{
    "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
        "environmentName": {
            "value": "${AZURE_ENV_NAME}"
        }
    }
}
```

デプロイする Gradio アプリを作成します。

今回は「web」フォルダの中に「app.py」「requirements.txt」「start.sh」を作成しました。
「start.sh」は Azure Web Apps のスタートアップコマンドで実行するものです。
demo.launch(server_port=8000, server_name='0.0.0.0') の
server_port、server_name の設定を忘れずにして下さい。

app.py

import gradio as gr

def main():
    images = ["https://th.bing.com/th?id=ORMS.5a4b9e59fc9f308d4774524f3b204333&pid=Wdp&w=240&h=129&qlt=90&c=1&rs=1&dpr=1&p=0",
            "https://www.bing.com/th?id=OAIP.acf748777338864b33a2b246ee848bdc&pid=AdsNative&c=3&w=300&h=157&dynsize=1&qlt=90"]

    def on_select(evt: gr.SelectData):  # SelectData is a subclass of EventData
        return f"You selected {evt.value} at {evt.index} from {evt.target}"

    with gr.Blocks() as demo:
        with gr.Row():
            gallery = gr.Gallery(value=images,
                                columns=4,
                                show_download_button=False,
                                allow_preview=False)
            
        text = gr.Textbox(interactive=True)
        gallery.select(fn=on_select, inputs=None, outputs=text)
    demo.launch(server_port=8000, server_name='0.0.0.0')

if __name__ == "__main__":
    main()

requirements.txt

gradio==4.4.1

start.sh

pip install -r requirements.txt
python app.py

azure.yaml でデプロイの設定をする。
Azure Developer CLI の azure.yaml スキーマ

azure.yaml

# yaml-language-server: $schema=https://raw.githubusercontent.com/Azure/azure-dev/main/schemas/v1.0/azure.yaml.json

name: webapp-rrr
metadata:
  template: webapp-rrr@0.0.1
services:
  web: # タグ azd-service-name で設定した値
    project: ./web # デプロイするディレクトリ
    language: py
    host: appservice

手順4 ウェブアプリの設定

「構成」→「アプリケーション設定」→「新しいアプリケーション設定」を開く。
「名前」に「WEBSITES_PORT」、「値」に Gradio アプリで設定した server_port（今回は 8000）と同じ値を入力して「OK」を選択→「保存」する。
「構成」→「全般設定」を開く。
「スタートアップコマンド」に以下のコマンドを登録する。
```
start.sh
```