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

このチュートリアルでは、Azure OpenAI と Python Web アプリケーションを統合してインテリジェントな AI アプリケーションを構築し、Azure App Service にデプロイします。 Azure OpenAI のモデルにチャット完了要求を送信し、マネージド ID を使用してサービスに接続する Flask アプリを作成します。

あなたは次のことを学びます：

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

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

Prerequisites

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

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

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

GitHub アカウントを使用して GitHub Codespaces にサインインします。
[このテンプレートを使用] を空白タイルで選択して、新しい空白のコードスペースを作成します。
Codespace ターミナルで、Azure CLI をインストールします。
```
curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
```
Azure アカウントへサインインします。
```
az login
```
ターミナルの指示に従って認証します。
リソースグループと Azure OpenAI サービスの名前を指定し、適切な Azure リージョンを自分の場所として設定することで、環境変数を設定します。
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="<azure-region>"
```
Important

場所は、選択したモデルのリージョンの可用性に関連付けられています。モデルとデプロイの種類の可用性は、Azure リージョンと課金レベルによって異なります。このチュートリアルでは、 gpt-4o-miniを使用します。これは、Standard デプロイの種類の下の複数のリージョンで使用できます。

場所を選択する前に、モデルの概要とリージョンの可用性テーブルを参照して、希望するリージョンでのモデルのサポートを確認してください。

カスタムドメインを使用してリソースグループと 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 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

ワークスペースルートで、Azure OpenAI を使用した簡単なチャット完了呼び出し用の次のコードを含む app.py という名前のファイルを作成します。

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

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

よく寄せられる質問

Azure OpenAI の代わりに OpenAI に接続するにはどうすればよいですか?
マネージド ID の代わりに API キーを使用して Azure OpenAI に接続できますか?
DefaultAzureCredential のしくみ

Azure OpenAI の代わりに OpenAI に接続するにはどうすればよいですか?

Azure OpenAI ではなく OpenAI に接続するには、次のコードを使用します。

from openai import OpenAI

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

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

Important

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

マネージド ID の代わりに API キーを使用して Azure OpenAI に接続できますか?

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

セマンティックカーネルでの API キーの使用の詳細については、「セマンティックカーネルの概要」を参照してください。
Azure OpenAI クライアントライブラリで API キーを使用する方法の詳細については、「 Azure OpenAI Responses API の使用」を参照してください。

Important

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

DefaultAzureCredential のしくみ

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

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

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

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-03-24