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

2025-05-20

In deze zelfstudie bouwt u een intelligente AI-toepassing door Azure OpenAI te integreren met een Node.js-toepassing 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 OpneAI.

Schermopname van chatbot die wordt uitgevoerd in Azure App Service.

In deze handleiding leer je hoe je:

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, zowel in de ontwikkelomgeving als in Azure.

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 GitHub Codespaces om een Azure OpenAI-resource te maken met de Azure CLI.

Ga naar GitHub Codespaces en meld u aan met uw GitHub-account.
Zoek de lege sjabloon op GitHub en selecteer Deze sjabloon gebruiken om een nieuwe lege Codespace 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 voor de naam van uw resourcegroep, azure OpenAI-servicenaam en -locatie:
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="eastus2"
```
Belangrijk

De regio is essentieel omdat deze is gekoppeld aan de regionale beschikbaarheid van het gekozen model. Beschikbaarheid van modellen en beschikbaarheid van implementatietypen variëren per regio. In deze zelfstudie wordt gebruikgemaakt van gpt-4o-mini, dat beschikbaar is in eastus2 onder het standaardimplementatietype. Als u in een andere regio implementeert, is dit model mogelijk niet beschikbaar of is er mogelijk een andere laag vereist. Voordat u regio's wijzigt, raadpleegt u de overzichtstabel model en de beschikbaarheid van regio's om de modelondersteuning in uw voorkeursregio te controleren.

Maak een resourcegroep en een Azure OpenAI-resource met een aangepast domein en voeg vervolgens een gpt-4o-minimodel 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 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

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

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

Maak in uw Codespace-terminal een Express.js-sjabloon in de werkruimte en probeer deze de eerste keer uit te voeren.
```
npx express-generator . --view ejs
npm audit fix --force
npm install && npm start
```
U ziet een melding in GitHub Codespaces die aangeeft 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 met Ctrl+C.
Installeer de NPM-afhankelijkheden voor het werken met Azure OpenAI:
```
npm install openai @azure/openai @azure/identity
```

Open views/index.ejs en vervang deze 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 opnieuw uit door AZURE_OPENAI_ENDPOINT toe te voegen met de waarde ervan uit de 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 en kijk of u een antwoordbericht krijgt.

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

Nu uw app lokaal werkt, gaan we deze implementeren in Azure App Service en een serviceverbinding met Azure OpenAI instellen met behulp van 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 en implementeert u hier uw code in:
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
Het kan enkele minuten duren voordat deze opdracht is voltooid. Er wordt een nieuwe web-app gemaakt in dezelfde resourcegroep als uw OpenAI-resource.
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:
```
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
```
Met deze 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.
Open de geïmplementeerde web-app in de browser. Zoek de URL van de geïmplementeerde web-app in de terminaluitvoer. Open uw webbrowser en navigeer ernaartoe.
```
az webapp browse
```
Typ een bericht in het tekstvak en selecteer Verzenden en 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

Wat moet ik doen als ik verbinding wil maken met OpenAI in plaats van Azure OpenAI?
Kan ik in plaats daarvan verbinding maken met Azure OpenAI met een API-sleutel?
Hoe werkt DefaultAzureCredential in deze zelfstudie?

Wat moet ik doen als ik verbinding wil maken met OpenAI in plaats van Azure OpenAI?

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

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

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

Zie OpenAI API-verificatie voor meer informatie.

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

Kan ik in plaats daarvan verbinding maken met Azure OpenAI met een API-sleutel?

Ja, u kunt verbinding maken met Azure OpenAI met behulp van een API-sleutel in plaats van een beheerde identiteit. Zie de quickstart voor Azure OpenAI JavaScript voor meer informatie.

Hoe werkt DefaultAzureCredential in deze zelfstudie?

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

Tijdens de lokale ontwikkeling: Nadat u deze hebt uitgevoerd az login, worden uw lokale Azure CLI-referenties gebruikt.
Wanneer deze wordt geïmplementeerd in Azure App Service: de beheerde identiteit van de app wordt gebruikt voor veilige, wachtwoordloze verificatie.

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

Delen via