次の方法で共有

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

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

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

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

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

[前提条件]

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

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

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

  1. GitHub Codespaces に移動し、GitHub アカウントでサインインします。

  2. GitHub で 空 のテンプレートを見つけて、[ このテンプレートを使用して 新しい空の Codespace を作成する] を選択します。

  3. Codespace ターミナルで、Azure CLI をインストールします。

    curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash

  4. Azure アカウントにサインインします。

    az login

    ターミナルの指示に従って認証します。

  5. リソース グループ名、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 で使用できます。 別のリージョンにデプロイする場合、このモデルは使用できないか、別のレベルが必要な場合があります。 リージョンを変更する前に、 モデルの概要テーブルとリージョンの可用性 を参照して、希望するリージョンでのモデルのサポートを確認してください。

  6. カスタム ドメインを使用してリソース グループと 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. Express.js Web アプリを作成して設定する

  1. Codespace ターミナルで、ワークスペースに Express.js テンプレートを作成し、初めて実行してみてください。

    npx express-generator . --view ejs
npm audit fix --force
npm install && npm start

    GitHub Codespaces に、アプリが特定のポートで使用可能であることを示す通知が表示されます。 [ ブラウザーで開く ] を選択して、新しいブラウザー タブでアプリを起動します。

  2. Codespace ターミナルに戻り、Ctrl + C キーを押してアプリを停止します。

  3. Azure OpenAI を操作するための NPM 依存関係をインストールします。

    npm install openai @azure/openai @azure/identity

  4. views/index.ejs を開き、単純なチャット インターフェイス用に次のコードに置き換えます。

    <!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body class="bg-light">
    <div class="container py-4">
      <h1 class="mb-4"><%= title %></h1>
      <div class="card mb-3">
        <div class="card-body" style="min-height: 80px;">
          <form action="/chat" method="POST" class="d-flex gap-2 mb-3">
            <input type="text" name="message" class="form-control" placeholder="Type your message..." autocomplete="off" required />
            <button type="submit" class="btn btn-primary">Send</button>
          </form>
          <% if (aiMessage) { %>
            <div class="mb-2">
              <span class="fw-bold text-success">AI:</span>
              <span class="ms-2"><%= aiMessage %></span>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  </body>
</html>

  5. ルート/index.js を開き、その内容を次のコードに置き換えて、Azure OpenAI を使用した簡単なチャット完了呼び出しを行います。

    var express = require('express');
var router = express.Router();
const { AzureOpenAI } = require('openai');
const { getBearerTokenProvider, DefaultAzureCredential } = require('@azure/identity');

const endpoint = process.env.AZURE_OPENAI_ENDPOINT;
const deployment = 'gpt-4o-mini';
const apiVersion = '2024-10-21';

const credential = new DefaultAzureCredential();
const scope = 'https://cognitiveservices.azure.com/.default';
const azureADTokenProvider = getBearerTokenProvider(credential, scope);

// Initialize Azure OpenAI client using Microsoft Entra authentication
const openai = new AzureOpenAI({ endpoint, azureADTokenProvider, deployment, apiVersion });

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express Chat', aiMessage: null });
});

router.post('/chat', async function(req, res, next) {
  const userMessage = req.body.message;
  if (!userMessage) {
    return res.redirect('/');
  }
  let aiMessage = '';
  try {
    // Call Azure OpenAI chat completion
    const result = await openai.chat.completions.create({
      model: deployment,
      messages: [
        { role: 'system', content: 'You are a helpful assistant.' },
        { role: 'user', content: userMessage }
      ],
    });
    aiMessage = result.choices[0]?.message?.content || '';
  } catch (err) {
    aiMessage = 'Error: Unable to get response from Azure OpenAI.';
  }
  res.render('index', { title: 'Express Chat', aiMessage });
});

module.exports = router;

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

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

  7. CLI 出力から値を含む AZURE_OPENAI_ENDPOINT を追加して、アプリをもう一度実行します。

    AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> npm start

  8. [ ブラウザーで開く ] を選択して、新しいブラウザー タブでアプリを起動します。質問を送信し、応答メッセージが表示されるかどうかを確認します。

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

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

  1. まず、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 アプリが作成されます。

  2. アプリがデプロイされたら、マネージド 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 アプリに追加する。

  3. デプロイされた Web アプリをブラウザーで開きます。 ターミナル出力で、デプロイされた Web アプリの URL を見つけます。 Web ブラウザーを開き、目指すウェブページに移動します。

    az webapp browse

  4. テキスト ボックスにメッセージを入力し、[送信] を選択し、アプリに数秒待って Azure OpenAI からのメッセージに返信します。

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

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

よく寄せられる質問

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

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

const { OpenAI } = require('openai');

const client = new OpenAI({
  apiKey: "<openai-api-key>",
});

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

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

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

はい。マネージド ID ではなく API キーを使用して Azure OpenAI に接続できます。 詳細については、 Azure OpenAI JavaScript のクイック スタートを参照してください。

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

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

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

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

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

次のステップ