Zelfstudie: Een chatbot bouwen met Azure App Service en Azure OpenAI (Express.js)

In deze zelfstudie bouwt u een intelligente AI-toepassing door Azure OpenAI te integreren met een Node.js-webtoepassing en deze te implementeren in Azure App Service.

U maakt een Express-app met een weergave en een controller waarmee chatvoltooiingsaanvragen worden verzonden naar een model in Azure OpenAI. U maakt verbinding met de app in Azure met behulp van een beheerde identiteit.

U leert het volgende:

Maak een Azure OpenAI-resource en implementeer een taalmodel.
Bouw een Express.js-toepassing die verbinding maakt met Azure OpenAI.
Implementeer de toepassing in Azure App Service.
Implementeer veilige verificatie zonder wachtwoord in de ontwikkelomgeving en in Azure.

Schermopname van chatbot die wordt uitgevoerd in Azure App Service.

Vereiste voorwaarden

Een Azure-account met een actief abonnement
Een GitHub-account voor het gebruik van GitHub Codespaces

1. Een Azure OpenAI-resource maken

In deze sectie gebruikt u Azure CLI in GitHub Codespaces om een Azure OpenAI-resource te maken.

Meld u aan bij GitHub Codespaces met uw GitHub-account.
Selecteer Gebruik deze sjabloon in de tegel Leeg om een nieuwe lege coderuimte te maken.

Installeer de Azure CLI in de Codespace-terminal.

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

Meld u aan bij uw Azure-account.
```
az login
```
Volg de instructies in de terminal om te verifiëren.
Stel omgevingsvariabelen in door namen op te geven voor uw resourcegroep en De Azure OpenAI-service en een geschikte Azure-regio in te stellen als uw locatie.
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="<azure-region>"
```
Belangrijk

De locatie is gekoppeld aan de regionale beschikbaarheid van het gekozen model. De beschikbaarheid van modellen en implementatietypen verschilt per Azure-regio en factureringslaag. In deze zelfstudie wordt gebruikgemaakt van gpt-4o-mini, dat beschikbaar is in verschillende regio's onder het standaardimplementatietype.

Voordat u een locatie selecteert, raadpleegt u de tabel Modelsamenvatting en beschikbaarheid van regio's om de ondersteuning van modellen in uw voorkeursregio te controleren.

Maak een resourcegroep en een Azure OpenAI-resource met een aangepast domein en voeg vervolgens een gpt-4o-mini model toe:

# 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

Nu u een Azure OpenAI-resource hebt, kunt u een webtoepassing maken om ermee te communiceren.

2. Een Express.js-web-app maken en instellen

Maak in de codespace-terminal een Express.js-sjabloon in de werkruimte en voer deze uit.
```
npx express-generator . --view ejs
npm audit fix --force
npm install && npm start
```
U ziet een melding in GitHub Codespaces dat de app beschikbaar is op een specifieke poort. Selecteer Openen in de browser om de app te starten op een nieuw browsertabblad.
Stop de app in de codespace-terminal door op Ctrl+C te drukken.
Installeer de NPM-afhankelijkheden voor het werken met Azure OpenAI.
```
npm install openai @azure/openai @azure/identity
```

Open views/index.ejs in de bestandsstructuur en vervang de inhoud door de volgende code voor een eenvoudige chatinterface.

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

Open routes/index.js en vervang de inhoud door de volgende code voor een eenvoudige chat-voltooiingsgesprek met 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;

Haal in de terminal het OpenAI-eindpunt op:

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

Voer de app uit door de bijbehorende waarde toe te voegen AZURE_OPENAI_ENDPOINT vanuit de voorgaande CLI-uitvoer:
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> npm start
```
Selecteer Openen in de browser om de app te starten op een nieuw browsertabblad. Dien een vraag in om een antwoordbericht te zien.

3. Implementeren in Azure App Service en OpenAI-verbinding configureren

Nu uw app lokaal werkt, implementeert u deze in Azure App Service en stelt u een serviceverbinding met Azure OpenAI in met behulp van een beheerde identiteit.

Implementeer eerst uw app in Azure App Service met behulp van de Azure CLI-opdracht az webapp up. Met deze opdracht maakt u een nieuwe web-app in dezelfde resourcegroep als uw OpenAI-resource en implementeert u uw code. Het kan enkele minuten duren voordat de opdracht is voltooid.
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
Nadat de app is geïmplementeerd, maakt u een serviceverbinding tussen uw web-app en de Azure OpenAI-resource met behulp van een beheerde identiteit. Met de volgende opdracht maakt u een verbinding tussen uw web-app en de Azure OpenAI-resource door:
- Door het systeem toegewezen beheerde identiteit voor de web-app genereren.
- De rol Cognitive Services OpenAI-inzender toevoegen aan de beheerde identiteit voor de Azure OpenAI-resource.
- AZURE_OPENAI_ENDPOINT De app-instelling toevoegen aan uw web-app.
```
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
```
Zoek de URL van uw geïmplementeerde app in de terminaluitvoer van de az webapp up opdracht en navigeer naar de app in uw webbrowser.
```
az webapp browse
```
Voer in uw web-app een bericht in het tekstvak in en selecteer Verzenden. Geef de app een paar seconden om het bericht van Azure OpenAI te beantwoorden.

Uw app is nu geïmplementeerd en verbonden met Azure OpenAI met beheerde identiteit.

Veelgestelde vragen

Hoe kan ik verbinding maken met OpenAI in plaats van Azure OpenAI?
Kan ik verbinding maken met Azure OpenAI met een API-sleutel in plaats van een beheerde identiteit?
Hoe werkt de DefaultAzureCredential?

Hoe kan ik verbinding maken met OpenAI in plaats van Azure OpenAI?

Gebruik de volgende code om verbinding te maken met OpenAI in plaats van Azure OpenAI:

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

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

Zie OpenAI API-verificatie voor meer informatie.

Belangrijk

Wanneer u werkt met verbindingsgeheimen zoals API-sleutels in App Service, moet u Azure Key Vault-verwijzingen gebruiken in plaats van geheimen rechtstreeks in uw code op te slaan. Deze procedure zorgt ervoor dat gevoelige informatie veilig blijft en centraal wordt beheerd.

Kan ik verbinding maken met Azure OpenAI met een API-sleutel in plaats van een beheerde identiteit?

Ja, u kunt verbinding maken met Azure OpenAI met behulp van een API-sleutel in plaats van een beheerde identiteit. Zie De Api voor Azure OpenAI-antwoorden gebruiken voor meer informatie.

Belangrijk

Wanneer u werkt met verbindingsgeheimen zoals API-sleutels in App Service, moet u Key Vault-verwijzingen gebruiken in plaats van geheimen rechtstreeks in uw code op te slaan. Deze procedure zorgt ervoor dat gevoelige informatie veilig blijft en centraal wordt beheerd.

Hoe werkt de DefaultAzureCredential?

De DefaultAzureCredential verificatie vereenvoudigt door automatisch de best beschikbare verificatiemethode te selecteren.

Tijdens de lokale ontwikkeling, nadat u az login hebt uitgevoerd, maakt DefaultAzureCredential gebruik van uw lokale Azure CLI-referenties.
Voor Azure App Service-implementaties wordt de beheerde identiteit van de DefaultAzureCredential app gebruikt voor veilige, wachtwoordloze verificatie.

Met deze aanpak kan uw code veilig en naadloos worden uitgevoerd in zowel lokale als cloudomgevingen zonder aanpassingen.

Handleiding: Een retrieval-augmented generation-app bouwen in Azure App Service met Azure OpenAI en Azure AI Search (Express.js)
Handleiding: Chatbot draaien in App Service met een Phi-4 sidecar-extensie (Express.js)
Use managed identities for App Service and Azure Functions (Beheerde identiteiten gebruiken voor App Service en Azure Functions)

Feedback

Is deze pagina nuttig?

Last updated on 2026-03-27