Lernprogramm: Erstellen eines Chatbots mit Azure App Service und Azure OpenAI (Express.js)

2025-05-20

In diesem Lernprogramm erstellen Sie eine intelligente KI-Anwendung, indem Sie Azure OpenAI in eine Node.js-Anwendung integrieren und in Azure App Service bereitstellen. Sie erstellen eine Express-App mit einer Ansicht und einem Controller, der Chatabschlussanforderungen an ein Modell in Azure OpneAI sendet.

Screenshot des Chatbots, der in Azure App Service ausgeführt wird.

In diesem Tutorial lernen Sie Folgendes:

Erstellen Sie eine Azure OpenAI-Ressource, und stellen Sie ein Sprachmodell bereit.
Erstellen Sie eine Express.js Anwendung, die eine Verbindung mit Azure OpenAI herstellt.
Stellen Sie die Anwendung in Azure App Service bereit.
Implementieren Sie die kennwortlose sichere Authentifizierung sowohl in der Entwicklungsumgebung als auch in Azure.

Voraussetzungen

Ein Azure-Konto mit einem aktiven Abonnement
Ein GitHub-Konto für die Verwendung von GitHub Codespaces

1. Erstellen einer Azure OpenAI-Ressource

In diesem Abschnitt verwenden Sie GitHub Codespaces, um eine Azure OpenAI-Ressource mit der Azure CLI zu erstellen.

Wechseln Sie zu GitHub Codespaces , und melden Sie sich mit Ihrem GitHub-Konto an.
Suchen Sie die leere Vorlage von GitHub, und wählen Sie "Diese Vorlage verwenden " aus, um einen neuen leeren Codespace zu erstellen.

Installieren Sie im Codespace-Terminal die Azure CLI:

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

Melden Sie sich bei Ihrem Azure-Konto an:
```
az login
```
Folgen Sie den Anweisungen im Terminal, um sich zu authentifizieren.
Legen Sie Umgebungsvariablen für den Namen der Ressourcengruppe, den Namen des Azure OpenAI-Dienstes und den Speicherort fest.
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="eastus2"
```
Von Bedeutung

Die Region ist kritisch, da sie an die regionale Verfügbarkeit des ausgewählten Modells gebunden ist. Die Modellverfügbarkeit und die Verfügbarkeit des Bereitstellungstyps variieren von Region zu Region. Dieses Tutorial verwendet gpt-4o-mini, das im Standardbereitstellungstyp unter eastus2 verfügbar ist. Wenn Sie eine Bereitstellung in einer anderen Region ausführen, ist dieses Modell möglicherweise nicht verfügbar oder erfordert eine andere Ebene. Überprüfen Sie, bevor Sie Regionen ändern, die Modellzusammenfassungstabelle und die Regionsverfügbarkeit, um die Unterstützung des Modells in Ihrer bevorzugten Region zu überprüfen.

Erstellen Sie eine Ressourcengruppe und eine Azure OpenAI-Ressource mit einer benutzerdefinierten Domäne, und fügen Sie dann ein gpt-4o-mini-Modell hinzu:

# 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

Nachdem Sie nun über eine Azure OpenAI-Ressource verfügen, erstellen Sie eine Webanwendung für die Interaktion damit.

2. Erstellen und Einrichten einer Express.js Web-App

Erstellen Sie in Ihrem Codespace-Terminal eine Express.js-Vorlage im Arbeitsbereich und führen Sie sie zum ersten Mal aus.
```
npx express-generator . --view ejs
npm audit fix --force
npm install && npm start
```
In GitHub Codespaces sollte eine Benachrichtigung angezeigt werden, die angibt, dass die App an einem bestimmten Port verfügbar ist. Wählen Sie "Im Browser öffnen " aus, um die App auf einer neuen Browserregisterkarte zu starten.
Beenden Sie die App wieder im Codespace-Terminal mit STRG+C.
Installieren Sie die NPM-Abhängigkeiten für die Arbeit mit Azure OpenAI:
```
npm install openai @azure/openai @azure/identity
```

Öffnen Sie Ansichten/index.ejs , und ersetzen Sie sie durch den folgenden Code für eine einfache Chatschnittstelle.

<!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>

Öffnen Sie Routen/index.js, und ersetzen Sie deren Inhalt durch den folgenden Code, für einen einfachen Chatabschlussanruf mit 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;

Rufen Sie im Terminal Ihren OpenAI-Endpunkt ab:

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

Führen Sie die App erneut aus, indem Sie AZURE_OPENAI_ENDPOINT mit seinem Wert aus der CLI-Ausgabe hinzufügen.
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> npm start
```
Wählen Sie "Im Browser öffnen " aus, um die App auf einer neuen Browserregisterkarte zu starten. Senden Sie eine Frage, und überprüfen Sie, ob Sie eine Antwortnachricht erhalten.

3. Bereitstellen für Azure App Service und Konfigurieren der OpenAI-Verbindung

Nachdem Ihre App lokal funktioniert, stellen wir sie in Azure App Service bereit und richten eine Dienstverbindung mit Azure OpenAI mithilfe der verwalteten Identität ein.

Stellen Sie zunächst Ihre App mit dem Azure CLI-Befehl in Azure App Service bereit az webapp up. Mit diesem Befehl wird eine neue Web-App erstellt und Ihr Code darauf bereitgestellt:
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
Die Ausführung dieses Befehls kann einige Minuten dauern. Sie erstellt eine neue Web-App in derselben Ressourcengruppe wie Ihre OpenAI-Ressource.
Erstellen Sie nach der Bereitstellung der App eine Dienstverbindung zwischen Ihrer Web-App und der Azure OpenAI-Ressource mit verwalteter Identität:
```
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
```
Dieser Befehl erstellt eine Verbindung zwischen Ihrer Web-App und der Azure OpenAI-Ressource durch:
- Generieren der vom System zugewiesenen verwalteten Identität für die Web-App.
- Hinzufügen der Rolle "Cognitive Services OpenAI-Mitwirkender" zur verwalteten Identität für die Azure OpenAI-Ressource.
- Hinzufügen der AZURE_OPENAI_ENDPOINT App-Einstellung zu Ihrer Web-App.
Öffnen Sie die bereitgestellte Web-App im Browser. Suchen Sie die URL der bereitgestellten Web-App in der Terminalausgabe. Öffnen Sie Ihren Webbrowser, und navigieren Sie dorthin.
```
az webapp browse
```
Geben Sie eine Nachricht in das Textfeld ein, und wählen Sie "Senden" aus, und geben Sie der App ein paar Sekunden, um mit der Nachricht von Azure OpenAI zu antworten.

Ihre App wird jetzt bereitgestellt und mit Azure OpenAI mit verwalteter Identität verbunden.

Häufig gestellte Fragen

Was geschieht, wenn ich anstelle von Azure OpenAI eine Verbindung mit OpenAI herstellen möchte?
Kann ich stattdessen eine Verbindung mit Azure OpenAI mit einem API-Schlüssel herstellen?
Wie funktioniert DefaultAzureCredential in diesem Lernprogramm?

Was geschieht, wenn ich anstelle von Azure OpenAI eine Verbindung mit OpenAI herstellen möchte?

Um stattdessen eine Verbindung mit OpenAI herzustellen, verwenden Sie den folgenden Code:

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

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

Weitere Informationen finden Sie unter OpenAI-API-Authentifizierung.

Wenn Sie mit Verbindungsschlüsseln in App Service arbeiten, sollten Sie Key Vault-Verweise verwenden, anstatt geheime Schlüssel direkt in Ihrer Codebasis zu speichern. Dadurch wird sichergestellt, dass vertrauliche Informationen sicher bleiben und zentral verwaltet werden.

Kann ich stattdessen eine Verbindung mit Azure OpenAI mit einem API-Schlüssel herstellen?

Ja, Sie können eine Verbindung mit Azure OpenAI mithilfe eines API-Schlüssels anstelle der verwalteten Identität herstellen. Weitere Informationen finden Sie in der Azure OpenAI JavaScript-Schnellstartanleitung.

Wie funktioniert DefaultAzureCredential in diesem Lernprogramm?

Die DefaultAzureCredential Authentifizierung wird vereinfacht, indem automatisch die beste verfügbare Authentifizierungsmethode ausgewählt wird:

Während der lokalen Entwicklung: Nach der Ausführung az loginwerden Ihre lokalen Azure CLI-Anmeldeinformationen verwendet.
Wenn sie in Azure App Service bereitgestellt wird: Sie verwendet die verwaltete Identität der App für sichere, kennwortlose Authentifizierung.

Mit diesem Ansatz kann Ihr Code ohne Änderungen sicher und nahtlos in lokalen und Cloudumgebungen ausgeführt werden.

Freigeben über