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

このチュートリアルでは、Azure OpenAI と Node.js Web アプリケーションを統合してインテリジェントな AI アプリケーションを構築し、Azure App Service にデプロイします。

ビューと、Azure OpenAI のモデルにチャット完了要求を送信するコントローラーを含む Express アプリを作成します。マネージド ID を使用して Azure のアプリに接続します。

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

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

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

[前提条件]

アクティブなサブスクリプションを持つ 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>"
```
Von Bedeutung

場所は、選択したモデルのリージョンの可用性に関連付けられています。モデルとデプロイの種類の可用性は、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. Express.js Web アプリを作成して設定する

codespace ターミナルで、ワークスペースに Express.js テンプレートを作成して実行します。
```
npx express-generator . --view ejs
npm audit fix --force
npm install && npm start
```
GitHub Codespaces に、アプリが特定のポートで使用できるという通知が表示されます。 [ ブラウザーで開く ] を選択して、新しいブラウザータブでアプリを起動します。
codespace ターミナルで、Ctrl + C キーを押してアプリを停止します。
Azure OpenAI を操作するための NPM 依存関係をインストールします。
```
npm install openai @azure/openai @azure/identity
```

ファイルツリーで 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>

ルート/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;

ターミナルで、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> npm start
```
[ ブラウザーで開く ] を選択して、新しいブラウザータブでアプリを起動します。質問を送信して、応答メッセージを表示します。

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 に接続するには、次のコードを使用します。

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

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

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

Von Bedeutung

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

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

はい。マネージド ID ではなく API キーを使用して Azure OpenAI に接続できます。詳細については、「 Azure OpenAI Responses API の使用」を参照してください。

Von Bedeutung

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

DefaultAzureCredential のしくみ

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

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

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

フィードバック

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

Last updated on 2026-03-27