Azureの恩恵を最大限に受けてGradioアプリを高速デプロイ＆安定稼働させる

::: note
こちらの記事は投稿時点の情報です。
最新情報は公式ドキュメントMicrosoft Learnでご確認お願いいたします。
:::

Microsoft Japan - Azure Developer Platform Team の D̷ELL と申します。
本日は Azure App Service で Gradio をホスティングする手順の紹介です。

Azure App Service は、Web アプリケーション、REST API、およびモバイル バックエンドをホストするための HTTP ベースのサービスです。様々なプログラムを、Azure の恩恵を受けつつ、手軽にホスティングすることができます。

生成AI関係のアプリを開発していると、Gradio でアプリを構築することが多いと思います。
今回は、Gradio で構築したアプリを Azure 上で安定稼働させるためのクイックスタートを試してみます。
※ Qiitaの画像添付容量が限界に来てしまったため、画像添付は最低限で失礼します

## 0. リファレンス

https://techcommunity.microsoft.com/t5/ai-azure-ai-services-blog/deploy-a-gradio-web-app-on-azure-with-azure-app-service-a-step/ba-p/4121127

https://medium.com/@dehhmesquita/deploy-a-gradio-app-on-azure-using-a-python-azure-app-service-9ea718390a89

## 1. リポジトリの準備
CI/CDを行うためのプロジェクトを、Visual Studio Code で作成します。
プロジェクトフォルダを作成し、以下のファイルを作成してください。
```console
mkdir my-project
cd my-project
```

仮想環境を構築します。
```
python -m venv myenv
myenv\Scripts\activate
```

依存ライブラリをインストールします。
```
pip install gradio
pip install fastapi
pip install gunicorn
```

app.pyファイルを作成します。
この例では、FastAPI を用いて、Gradioアプリケーションを起動しています。

* app.py
```python
from fastapi import FastAPI
import gradio as gr

app = FastAPI()

with gr.Blocks() as demo:
    gr.Markdown("Hi friends!")

app = gr.mount_gradio_app(app, demo, path="/")
```

## 2. アプリケーションのデバッグ

依存関係をインストールします。

```console
pip install -r .\requirements.txt
```

インストールした依存パッケージを、requirement.txtに出力します。

```console
pip freeze > requirements.txt
```

* requirement.txt

```
aiofiles==23.2.1
altair==5.3.0
annotated-types==0.7.0
anyio==4.4.0
attrs==23.2.0
certifi==2024.6.2
charset-normalizer==3.3.2
click==8.1.7
colorama==0.4.6
contourpy==1.2.1
cycler==0.12.1
dnspython==2.6.1
email_validator==2.2.0
fastapi==0.111.0
fastapi-cli==0.0.4
ffmpy==0.3.2
filelock==3.15.4
fonttools==4.53.0
fsspec==2024.6.1
gradio==4.37.2
gradio_client==1.0.2
gunicorn==22.0.0
h11==0.14.0
httpcore==1.0.5
httptools==0.6.1
httpx==0.27.0
huggingface-hub==0.23.4
idna==3.7
importlib_resources==6.4.0
Jinja2==3.1.4
jsonschema==4.22.0
jsonschema-specifications==2023.12.1
kiwisolver==1.4.5
markdown-it-py==3.0.0
MarkupSafe==2.1.5
matplotlib==3.9.0
mdurl==0.1.2
numpy==2.0.0
orjson==3.10.5
packaging==24.1
pandas==2.2.2
pillow==10.3.0
pydantic==2.7.4
pydantic_core==2.18.4
pydub==0.25.1
Pygments==2.18.0
pyparsing==3.1.2
python-dateutil==2.9.0.post0
python-dotenv==1.0.1
python-multipart==0.0.9
pytz==2024.1
PyYAML==6.0.1
referencing==0.35.1
requests==2.32.3
rich==13.7.1
rpds-py==0.18.1
ruff==0.5.0
semantic-version==2.10.0
shellingham==1.5.4
six==1.16.0
sniffio==1.3.1
starlette==0.37.2
tomlkit==0.12.0
toolz==0.12.1
tqdm==4.66.4
typer==0.12.3
typing_extensions==4.12.2
tzdata==2024.1
ujson==5.10.0
urllib3==2.2.2
uvicorn==0.30.1
watchfiles==0.22.0
websockets==11.0.3
```

アプリケーションをデバッグしてみます。

```console
PS > python -m uvicorn main:app --host 0.0.0.0
INFO:     Started server process [51140]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://0.0.0.0:8000 (Press CTRL+C to quit)
```

Hi friends! と表示されるGradioアプリケーションが起動します。

## 3. Azure App Service の構築

App Service でWebアプリを構築します。詳細な手順は以下をご覧ください。

https://qiita.com/nqdior/items/a100fa616e4076b221d8#2-app-service%E3%81%AE%E4%BD%9C%E6%88%90

## 4. Azure App Service へのデプロイ

Visual Studio Code に Azure 拡張、及びAzure App Service 拡張をインストールします。
その後、Azure 拡張機能でご自身の Azure Subscriptionにログインしてください。

deployフォルダを作成し、以下の2ファイルをコピーします。
* app.py
* requirements.txt

該当フォルダを右クリックし、[Deploy Web App] を選択します。
Select subscriptionで、デプロイ先の App Serviceの存在するサブスクリプションを選択します。

Select resourceで、デプロイ先の App Serviceを選択します。

デプロイが進行し、少し待つと完了します。

## 5. Azure App Service の設定

デプロイ後、Azure Portal から App Serviceに遷移し、[構成] をクリックします。
[スタートアップコマンド] の欄に [python -m uvicorn app:app --host 0.0.0.0] を設定し、保存します。

設定後、デプロイが完了しているか確認し、App Serviceを再起動します。
デプロイが完了していない場合は少しお待ちください。

::: warn
デプロイが失敗したと表示される場合もありますが、構わず再起動してください。
:::

再起動後、[既定のドメイン] にアクセスすると、Gradioアプリケーションが起動していることが確認できます。

## 6. まとめ


このように、Azure App Service では Python アプリを簡単にホストすることが可能です。
FastAPI ＋ Gradio を用いたアプリケーションのホストにも利用できますね。

HuggingFace Spaces でも Gradio アプリは手軽にホスティング可能ですが、パブリックに公開したくない場合は App Service が選択肢に入ってくると思います。ぜひ、ご利用ください。

Qiita の仕様で画像のアップロード制限がかかってしまい、読みづらい記事になり申し訳ありませんでした。7月になったら画像を付けて更新したいと思います。
最後までご覧いただき、ありがとうございました。

## 最後に
＊本稿は、個人の見解に基づいた内容であり、所属する会社の公式見解ではありません。また、いかなる保証を与えるものでもありません。正式な情報は、各製品の販売元にご確認ください。