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

2025-05-20

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

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

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

Azure OpenAI リソースを作成し、言語モデルをデプロイする
Azure OpenAI を使用して Blazor アプリケーションを構築する
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. Blazor Web アプリを作成して設定する

このセクションでは、.NET CLI を使用して新しい Blazor Web アプリケーションを作成します。

Codespace ターミナルで、新しい Blazor アプリを作成し、初めて実行してみてください。
```
dotnet new blazor -o .
dotnet run
```
GitHub Codespaces に、アプリが特定のポートで使用可能であることを示す通知が表示されます。 [ ブラウザーで開く ] を選択して、新しいブラウザータブでアプリを起動します。
Codespace ターミナルに戻り、Ctrl + C キーを押してアプリを停止します。
Azure OpenAI を操作するために必要な NuGet パッケージをインストールします。
```
dotnet add package Azure.AI.OpenAI
dotnet add package Azure.Identity
```

Components/Pages/Home.razorを開き、その内容を次のコードに置き換えて、Azure OpenAI を使用した簡単なチャット完了ストリーム呼び出しを行います。

@page "/"
@rendermode InteractiveServer
@using Azure.AI.OpenAI
@using Azure.Identity
@using OpenAI.Chat
@inject Microsoft.Extensions.Configuration.IConfiguration _config

<h3>Azure OpenAI Chat</h3>
<div class="mb-3 d-flex align-items-center" style="margin:auto;">
    <input class="form-control me-2" @bind="userMessage" placeholder="Type your message..." />
    <button class="btn btn-primary" @onclick="SendMessage">Send</button>
</div>
<div class="card p-3" style="margin:auto;">
    @if (!string.IsNullOrEmpty(aiResponse))
    {
        <div class="alert alert-info mt-3 mb-0">@aiResponse</div>
    }
</div>

@code {
    private string? userMessage;
    private string? aiResponse;

    private async Task SendMessage()
    {
        if (string.IsNullOrWhiteSpace(userMessage)) return;

        // Initialize the Azure OpenAI client
        var endpoint = new Uri(_config["AZURE_OPENAI_ENDPOINT"]!);
        var client = new AzureOpenAIClient(endpoint, new DefaultAzureCredential());
        var chatClient = client.GetChatClient("gpt-4o-mini");

        aiResponse = string.Empty;
        StateHasChanged();

        // Create a chat completion streaming request
        var chatUpdates = chatClient.CompleteChatStreamingAsync(
            [
                new UserChatMessage(userMessage)
            ]);

            await foreach(var chatUpdate in chatUpdates)
            {
                // Update the UI with the streaming response
                foreach(var contentPart in chatUpdate.ContentUpdate)
            {
                aiResponse += contentPart.Text;
                StateHasChanged();
            }
        }
    }
}

ターミナルで、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> dotnet run
```
[ ブラウザーで開く ] を選択して、新しいブラウザータブでアプリを起動します。
テキストボックスにメッセージを入力し、[送信] を選択し、アプリに数秒待って Azure OpenAI からのメッセージに返信します。

アプリケーションは DefaultAzureCredential を使用します。このアプリケーションでは、トークン認証に Azure CLI サインインユーザーが自動的に使用されます。このチュートリアルの後半では、Blazor アプリを Azure App Service にデプロイし、マネージド ID を使用して Azure OpenAI リソースに安全に接続するように構成します。コード内の同じ DefaultAzureCredential がマネージド ID を検出し、認証に使用できます。追加のコードは必要ありません。

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 アプリに追加する。
これで、アプリがデプロイされ、マネージド ID を使用して Azure OpenAI に接続されました。 AZURE_OPENAI_ENDPOINT インジェクションを使用して、アプリの設定を読み取ります。
デプロイされた Web アプリをブラウザーで開きます。ターミナル出力で、デプロイされた Web アプリの URL を見つけます。 Web ブラウザーを開き、目指すウェブページに移動します。
```
az webapp browse
```
テキストボックスにメッセージを入力し、[送信] を選択し、アプリに数秒待って Azure OpenAI からのメッセージに返信します。

よく寄せられる質問

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

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

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

@using OpenAI.Client

var client = new OpenAIClient("<openai-api-key>");

詳細については、「 OpenAI API 認証」を参照してください。

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

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

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

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

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

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

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

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