チュートリアル: Azure App Service と Azure OpenAI (Flask) を使用してチャットボットを構築する

2025-05-20

このチュートリアルでは、Azure OpenAI と Python Web アプリケーションを統合し、それを Azure App Service にデプロイすることで、インテリジェントな AI アプリケーションを構築します。 Azure OpneAI のモデルにチャット完了要求を送信する Flask アプリを作成します。

Azure App Service で実行されているチャットボットを示すスクリーンショット。

このチュートリアルでは、以下の内容を学習します。

Azure OpenAI リソースを作成し、言語モデルをデプロイします。
Azure OpenAI に接続する Flask アプリケーションを構築します。
アプリケーションを Azure App Service にデプロイします。
開発環境と Azure の両方で、パスワードレスのセキュリティで保護された認証を実装します。

[前提条件]

アクティブなサブスクリプションを持つ Azure アカウント
GitHub Codespaces を使用するための GitHub アカウント

1. Azure OpenAI リソースを作成する

このセクションでは、GitHub Codespaces を使用して、Azure CLI を使用して Azure OpenAI リソースを作成します。

GitHub Codespaces に移動し、GitHub アカウントでサインインします。
GitHub で空のテンプレートを見つけて、[ このテンプレートを使用して 新しい空の Codespace を作成する] を選択します。
Codespace ターミナルで、Azure CLI をインストールします。
```
curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
```
Azure アカウントにサインインします。
```
az login
```
ターミナルの指示に従って認証します。
リソースグループ名、Azure OpenAI サービス名、および場所の環境変数を設定します。
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="eastus2"
```
Von Bedeutung

リージョンは、選択したモデルのリージョンの可用性に関連付けられているため、重要です。モデルの可用性とデプロイの種類の可用性は、リージョンによって異なります。このチュートリアルでは、 gpt-4o-miniを使用します。これは、標準の展開の種類の eastus2 で使用できます。別のリージョンにデプロイする場合、このモデルは使用できないか、別のレベルが必要な場合があります。リージョンを変更する前に、モデルの概要テーブルとリージョンの可用性を参照して、希望するリージョンでのモデルのサポートを確認してください。

カスタムドメインを使用してリソースグループと Azure OpenAI リソースを作成し、gpt-4o-mini モデルを追加します。

# Resource group
az group create --name $RESOURCE_GROUP --location $LOCATION
# Azure OpenAI resource
az cognitiveservices account create \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --custom-domain $OPENAI_SERVICE_NAME \
  --kind OpenAI \
  --sku s0
# gpt-4o-mini model
az cognitiveservices account deployment create \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --deployment-name gpt-4o-mini \
  --model-name gpt-4o-mini \
  --model-version 2024-07-18 \
  --model-format OpenAI \
  --sku-name Standard \
  --sku-capacity 1
# Cognitive Services OpenAI User role that lets the signed in Azure user to read models from Azure OpenAI
az role assignment create \
  --assignee $(az ad signed-in-user show --query id -o tsv) \
  --role "Cognitive Services OpenAI User" \
  --scope /subscriptions/$(az account show --query id -o tsv)/resourceGroups/$RESOURCE_GROUP/providers/Microsoft.CognitiveServices/accounts/$OPENAI_SERVICE_NAME

Azure OpenAI リソースが作成されたので、それを操作する Web アプリケーションを作成します。

2. Flask アプリを作成して設定する

codespace ターミナルで、仮想環境を作成し、必要な PIP パッケージをインストールします。

python3 -m venv .venv
source .venv/bin/activate
pip install flask openai azure.identity dotenv
pip freeze > requirements.txt

ワークスペースルートで 、app.py を作成し、次のコードをコピーして、Azure OpenAI を使用した簡単なチャット完了呼び出しを行います。

import os
from flask import Flask, render_template, request
from azure.identity import DefaultAzureCredential, get_bearer_token_provider
from openai import AzureOpenAI

app = Flask(__name__)

# Initialize the Azure OpenAI client with Microsoft Entra authentication
token_provider = get_bearer_token_provider(
    DefaultAzureCredential(), "https://cognitiveservices.azure.com/.default"
)
client = AzureOpenAI(
    api_version="2024-10-21",
    azure_endpoint=os.getenv("AZURE_OPENAI_ENDPOINT"),
    azure_ad_token_provider=token_provider,
)

@app.route('/', methods=['GET', 'POST'])
def index():
    response = None
    if request.method == 'POST': # Handle form submission
        user_message = request.form.get('message')
        if user_message:
            try:
                # Call the Azure OpenAI API with the user's message
                completion = client.chat.completions.create(
                    model="gpt-4o-mini",
                    messages=[{"role": "user", "content": user_message}]
                )
                ai_message = completion.choices[0].message.content
                response = ai_message
            except Exception as e:
                response = f"Error: {e}"
    return render_template('index.html', response=response)

if __name__ == '__main__':
    app.run()

テンプレート ディレクトリとその中にindex.html ファイルを作成します。単純なチャットインターフェイス用に次のコードをコピーします。

<!doctype html>
<html>
<head>
    <title>Azure OpenAI Chat</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <main class="container py-4">
        <h1 class="mb-4 text-primary">Azure OpenAI Chat</h1>
        <form method="post" action="/" class="mb-3">
            <div class="input-group">
                <input type="text" name="message" class="form-control" placeholder="Type your message..." required>
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </form>
        <div class="card p-3">
            {% if response %}
                <div class="alert alert-info mt-3">{{ response }}</div>
            {% endif %}
        </div>
    </main>
</body>
</html>

ターミナルで、OpenAI エンドポイントを取得します。

az cognitiveservices account show \
  --name $OPENAI_SERVICE_NAME \
  --resource-group $RESOURCE_GROUP \
  --query properties.endpoint \
  --output tsv

CLI 出力からその値を持つ AZURE_OPENAI_ENDPOINT を追加して、アプリを実行します。
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> flask run
```
[ ブラウザーで開く ] を選択して、新しいブラウザータブでアプリを起動します。質問を送信し、応答メッセージが表示されるかどうかを確認します。

3. Azure App Service にデプロイし、OpenAI 接続を構成する

アプリがローカルで動作したので、それを Azure App Service にデプロイし、マネージド ID を使用して Azure OpenAI へのサービス接続を設定しましょう。

まず、Azure CLI コマンド az webapp upを使用して、アプリを Azure App Service にデプロイします。このコマンドを実行すると、新しい Web アプリが作成され、コードがデプロイされます。
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
このコマンドは、完了するまで数分かかることがあります。 OpenAI リソースと同じリソースグループに新しい Web アプリが作成されます。
アプリがデプロイされたら、マネージド ID を使用して、Web アプリと Azure OpenAI リソースの間にサービス接続を作成します。
```
az webapp connection create cognitiveservices \
  --resource-group $RESOURCE_GROUP \
  --name $APPSERVICE_NAME \
  --target-resource-group $RESOURCE_GROUP \
  --account $OPENAI_SERVICE_NAME \
  --connection azure-openai \
  --system-identity
```
このコマンドは、次の方法で Web アプリと Azure OpenAI リソース間の接続を作成します。
- Web アプリのシステム割り当てマネージド ID の生成。
- Azure OpenAI リソースのマネージド ID に Cognitive Services OpenAI 共同作成者ロールを追加します。
- AZURE_OPENAI_ENDPOINT アプリ設定を Web アプリに追加する。
デプロイされた Web アプリをブラウザーで開きます。ターミナル出力で、デプロイされた Web アプリの URL を見つけます。 Web ブラウザーを開き、目指すウェブページに移動します。
```
az webapp browse
```
テキストボックスにメッセージを入力し、[送信] を選択し、アプリに数秒待って Azure OpenAI からのメッセージに返信します。

これで、アプリがデプロイされ、マネージド ID を使用して Azure OpenAI に接続されました。

よく寄せられる質問

Azure OpenAI ではなく OpenAI に接続する場合はどうすればよいですか?
代わりに API キーを使用して Azure OpenAI に接続できますか?
このチュートリアルでは DefaultAzureCredential はどのように機能しますか?

Azure OpenAI ではなく OpenAI に接続する場合はどうすればよいですか?

代わりに OpenAI に接続するには、次のコードを使用します。

from openai import OpenAI

client = OpenAI(
    api_key="<openai-api-key>"
)

詳細については、「Python を使用して OpenAI エンドポイントと Azure OpenAI エンドポイントを切り替える方法」を参照してください。

App Service で接続シークレットを操作する場合は、コードベースにシークレットを直接格納するのではなく、 Key Vault 参照を使用する必要があります。これにより、機密情報は安全なままであり、一元的に管理されます。

代わりに API キーを使用して Azure OpenAI に接続できますか?

はい。マネージド ID ではなく API キーを使用して Azure OpenAI に接続できます。このアプローチは、Azure OpenAI SDK とセマンティックカーネルでサポートされています。

セマンティックカーネルでの API キーの使用の詳細については、セマンティックカーネルの C# クイックスタートを参照してください。
Azure OpenAI クライアントライブラリで API キーを使用する方法の詳細については、「クイックスタート: Azure OpenAI Service でのチャット入力候補の使用を開始する」を参照してください。

このチュートリアルでは DefaultAzureCredential はどのように機能しますか?

DefaultAzureCredentialは、使用可能な最適な認証方法を自動的に選択することで認証を簡略化します。

ローカル開発中: az loginを実行すると、ローカルの Azure CLI 資格情報が使用されます。
Azure App Service にデプロイする場合: アプリのマネージド ID を使用して、セキュリティで保護されたパスワードレス認証を行います。

この方法により、ローカル環境とクラウド環境の両方でコードを変更することなく、安全かつシームレスに実行できます。