Azure Web Apps に Gradio をローカル Git でデプロイする方法

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

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

## 環境

* azd コマンドをあらかじめインストールしておきます。
[azd のインストール](https://learn.microsoft.com/ja-jp/azure/developer/azure-developer-cli/install-azd?tabs=winget-windows%2Cbrew-mac%2Cscript-linux&pivots=os-windows#install-azd)

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

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

1. 「App Service」→「作成」→「Web アプリ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/d6b428b7-60ae-e790-74f2-ffb88ae2331b.png)
2. それぞれ入力します。
    * プロジェクトの詳細
        * 「サブスクリプション」は特に変更していません。
        * 「リソースグループ」は「rg-rrr」を新規作成しました。
    * インスタンスの詳細
        * 「名前」は「webapp-rrr」にしました。
        * 「公開」は「コード」、
    「ランタイムスタック」は「Python 3.10」、
    「地域」は「Japan East」を選択しました。
    * 価格プラン
        * 「Linux プラン」は特に変更していません。
        * 「価格プラン」は「Free F1」を選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/388d41a3-5554-002f-44a2-5016eaff9f41.png)
3. 「データベース」「デプロイ」「ネットワーク」「監視」「タグ」は特に変更しないのでスキップします。
4. 「作成」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/ec06c445-f2d6-3951-624c-9302c8ccda5d.png)
5. 「リソースグループ（rg-rrr）」に Azure Web Apps 「webapp-rrr」が作成されている事を確認出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/8c94eef7-c371-68e7-372b-922d57ac272a.png)
6. 作成した Azure Web Apps にタグを設定しておきます。
デプロイする際の目印になるものです。
azd-service-name: web
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/7e1647c7-ecc4-469d-6a6c-a78ad24f960c.png)


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

1. 作成した Azure Web Apps を開く。
「デプロイ センター」→「設定」→「ソース」→「ローカル Git」を選択して「保存」する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/d837934e-71b6-5305-1a9b-c395f04e4a39.png)
「保存」後に「Git Clone URI」が表示されるのでコピーしておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/af4af416-ebdb-27dc-e1c3-4835daf16b8b.png)
2. 「ローカルGitまたはFTPSの資格情報」で「ユーザー名」「パスワード」を入力して「保存」する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/c1949f1d-5ecf-75ae-9ce1-36f28308e611.png)
3. 先ほどの「Git Clone URI」を使ってローカルに git clone する。
その際に「ユーザー名」「パスワード」を聞かれるので、「ローカルGitまたはFTPSの資格情報」で保存した値を入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/5941a4af-5433-d6f3-1236-ed9d4ab03bdf.png)
4. 自身のローカル環境に空の git リポジトリが clone されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/5d6e7c76-52eb-864a-04e8-0bffa08bbfa2.png)
5. 適当なフォルダ・ファイルを作成する。
下記はプロジェクト直下に「webapp」フォルダと  
「app.py」「requirements.txt」「start.sh」を作成した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/586ad1b2-5b15-b27c-9f34-b59fbb277cf9.png)

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

1. プロジェクトフォルダで azd init を実行して、  
Use code in the current directory を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/7cf69c48-e8f5-6762-c291-c14977da792c.png)
Confirm and continue initializing my app を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/25ac4786-e5ce-b180-21ae-6cb2952b2f9b.png)
environment name を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/6ab0cba4-306a-d82e-c18c-b2a8413be037.png)
「.azure」「infra」「.gitignore」「azure.yaml」「next-steps.md」が作成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/d1bfb91a-ab93-1a0f-d50b-73f06ac8fe70.png)

2. main.bicep をすべてコメントアウトする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/200414b8-cbf4-8d32-fecd-2af8900fd800.png)

3. デプロイするアプリを作成します。
    * 「webapp」フォルダの中に作った「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.36.1
    ```
    ```start.sh
    #!/bin/sh
    # TZ の変更
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtaime
    echo '仮想環境の作成'
    python -m venv venv
    echo 'ライブラリのインストール'
    ./venv/bin/python -m pip install -r requirements.txt
    echo 'アプリの実行'
    ./venv/bin/python app.py
    ```
4. azure.yaml でデプロイの設定をする
azd init で作成されたものを編集する
変更箇所は「host: containerapp」→「host: appservice」
[Azure Developer CLI の azure.yaml スキーマ](https://learn.microsoft.com/ja-jp/azure/developer/azure-developer-cli/azd-schema)
    ```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: azd-init@1.9.3
    services:
        web:
            project: webapp
            host: appservice
            language: python
    ```

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

1. 「構成」→「全般設定」を開く。
「スタートアップコマンド」に以下のコマンドを登録する。
    ```sh
    start.sh
    ```
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/705f5133-f0a9-9348-6cec-c6956cdf9b8a.png)

## 手順5 azd provision, azd deploy を実行してデプロイ
（以下の provision, deploy をまとめて実行してくれる azd up コマンドもあります。）
1. azd auth login を実行する。
1. azd provision を実行する。
    * 「サブスクリプション」「ロケーション」「リソースグループ」を問われるので全て選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/b7db871a-2b77-abf2-92c2-fb7d879fc279.png)

2. azd deploy を実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/20acd17f-0e67-2b8c-78c7-a16f8638bdd1.png)

## 手順6 ウェブサイトの確認
* 「概要」→「既定のドメイン」の URL を参照するとデプロイした Gradio アプリを確認する事が出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/a03c6b2d-29aa-2072-da4a-327e6fa455b1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/0d5a447e-3bed-a7c0-43c0-b77a5766952e.png)

## その他

* パブリックアクセスが有効になっている場合、
Azure Web Apps の「ネットワーク」→「アクセス制限」から任意のアクセス制限をかけて下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424166/a4441a43-427c-99eb-36a7-efc11c7aef55.png)