共用方式為

教學課程：使用 Azure App Service 和 Azure OpenAI 建置聊天機器人 （Express.js）

在本教學課程中，您將透過整合 Azure OpenAI 與 Node.js 應用程式，並將其部署到 Azure App Service，以建置智慧型 AI 應用程式。 您將使用檢視和控制器建立 Express 應用程式，以將聊天完成要求傳送至 Azure OpneAI 中的模型。

顯示在 Azure App Service 中執行的聊天機器人螢幕快照。

在本教學課程中，您將瞭解如何：

  • 建立 Azure OpenAI 資源並部署語言模型。
  • 建置連線至 Azure OpenAI 的 Express.js 應用程式。
  • 將應用程式部署至 Azure App Service。
  • 在開發環境和 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. 安裝 NPM 相依性以使用 Azure OpenAI：

    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，並使用受控識別設定 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. 部署應用程式之後，請使用受控識別，在 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。 開啟網頁瀏覽器並流覽至它。

    az webapp browse

  4. 在文本框中輸入訊息，然後選取 [傳送]，然後為應用程式提供幾秒鐘的時間，以回復來自 Azure OpenAI 的訊息。

    顯示在 Azure App Service 中執行的聊天機器人螢幕快照。

您的應用程式現在已部署並連線至具有受控識別的 Azure OpenAI。

常見問題

如果我想要連線到 OpenAI 而不是 Azure OpenAI，該怎麼辦？

若要改為連線到 OpenAI，請使用下列程式代碼：

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

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

如需詳細資訊，請參閱 OpenAI API 驗證。

在 App Service 中使用連線密碼時，您應該使用 Key Vault 參考 ，而不是將秘密直接儲存在程式碼基底中。 這可確保敏感性資訊保持安全且集中管理。

我可以改為使用 API 金鑰連線到 Azure OpenAI 嗎？

是，您可以使用 API 金鑰來連線到 Azure OpenAI，而不是受控識別。 如需詳細資訊，請參閱 Azure OpenAI JavaScript 快速入門。

在 App Service 中使用連線密碼時，您應該使用 Key Vault 參考 ，而不是將秘密直接儲存在程式碼基底中。 這可確保敏感性資訊保持安全且集中管理。

DefaultAzureCredential 如何在本教學課程中運作？

藉 DefaultAzureCredential 由自動選取最佳的可用驗證方法，簡化驗證：

  • 在本機開發期間：執行 az login之後，它會使用本機 Azure CLI 認證。
  • 部署至 Azure App Service 時：它會使用應用程式的受控識別進行安全、無密碼的驗證。

這種方法可讓您的程式代碼在本機和雲端環境中安全地順暢地執行，而不需要修改。

後續步驟