通过

你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

教程：使用 Azure 应用服务和 Azure OpenAI 构建聊天机器人（Express.js）

在本教程中，你将通过将 Azure OpenAI 与 Node.js 应用程序集成并将其部署到 Azure 应用服务来构建智能 AI 应用程序。 你将创建一个 Express 应用，其中包含一个视图和一个控制器，用于向 Azure OpneAI 中的模型发送聊天完成请求。

显示 Azure 应用服务中运行的聊天机器人的屏幕截图。

本教程中，您将学习如何：

  • 创建 Azure OpenAI 资源并部署语言模型。
  • 生成连接到 Azure OpenAI 的 Express.js 应用程序。
  • 将应用程序部署到 Azure 应用服务。
  • 在开发环境和 Azure 中实现无密码安全身份验证。

先决条件

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"

    重要

    该区域至关重要，因为它与所选模型的区域可用性相关联。 模型可用性和 部署类型可用性 因区域而异。 本教程使用的 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. 打开 视图/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. 请打开 “routes/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. 再次运行应用，并在其中添加 AZURE_OPENAI_ENDPOINT 及其在 CLI 输出中的值：

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

  8. 选择“ 在浏览器中打开 ”以在新浏览器选项卡中启动应用。提交问题并查看是否收到回复消息。

3.部署到 Azure 应用服务并配置 OpenAI 连接

应用在本地工作后，让我们将其部署到 Azure 应用服务，并使用托管标识设置到 Azure OpenAI 的服务连接。

  1. 首先，使用 Azure CLI 命令 az webapp up将应用部署到 Azure 应用服务。 此命令将创建新的 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. 部署应用后，使用托管标识在 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 应用生成系统分配的托管标识。
    • 将认知服务 OpenAI 参与者角色添加到 Azure OpenAI 资源的托管标识。
    • 将 AZURE_OPENAI_ENDPOINT 应用设置添加到 Web 应用。

  3. 在浏览器中打开已部署的 Web 应用。 在终端输出中查找已部署的 Web 应用的 URL。 打开 Web 浏览器并导航到它。

    az webapp browse

  4. 在文本框中键入一条消息，然后选择“发送”，并为应用提供几秒钟以使用 Azure OpenAI 的消息进行答复。

    显示 Azure 应用服务中运行的聊天机器人的屏幕截图。

应用现已部署并连接到具有托管标识的 Azure OpenAI。

常见问题

如果想要连接到 OpenAI 而不是 Azure OpenAI，该怎么办？

若要改为连接到 OpenAI，请使用以下代码：

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

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

有关详细信息，请参阅 OpenAI API 身份验证。

在应用服务中使用连接机密时，应使用 Key Vault 引用 ，而不是直接在代码库中存储机密。 这可确保敏感信息保持安全，并集中管理。

是否可以改为使用 API 密钥连接到 Azure OpenAI？

是的，可以使用 API 密钥而不是托管标识连接到 Azure OpenAI。 有关详细信息，请参阅 Azure OpenAI JavaScript 快速入门。

在应用服务中使用连接机密时，应使用 Key Vault 引用 ，而不是直接在代码库中存储机密。 这可确保敏感信息保持安全，并集中管理。

DefaultAzureCredential 如何在本教程中工作？

通过 DefaultAzureCredential 自动选择最佳可用身份验证方法来简化身份验证：

  • 在本地开发期间：运行 az login后，它将使用本地 Azure CLI 凭据。
  • 部署到 Azure 应用服务时：它使用应用的托管标识进行安全、无密码身份验证。

此方法允许代码在本地和云环境中安全无缝地运行，而无需修改。

后续步骤