Partager via

Tutoriel : Créer un chatbot avec Azure App Service et Azure OpenAI (Express.js)

Dans ce tutoriel, vous allez créer une application IA intelligente en intégrant Azure OpenAI à une application Node.js et en la déployant sur Azure App Service. Vous allez créer une application Express avec une vue et un contrôleur qui envoie des demandes d’achèvement de conversation à un modèle dans Azure OpenAI.

Capture d’écran montrant le chatbot s’exécutant dans Azure App Service.

Dans ce tutoriel, vous allez apprendre à :

  • Créez une ressource Azure OpenAI et déployez un modèle de langage.
  • Créez une application Express.js qui se connecte à Azure OpenAI.
  • Déployez l’application sur Azure App Service.
  • Implémentez l’authentification sécurisée sans mot de passe dans l’environnement de développement et dans Azure.

Conditions préalables

1. Créer une ressource Azure OpenAI

Dans cette section, vous allez utiliser GitHub Codespaces pour créer une ressource Azure OpenAI avec Azure CLI.

  1. Accédez à GitHub Codespaces et connectez-vous avec votre compte GitHub.

  2. Recherchez le modèle vide par GitHub et sélectionnez Utiliser ce modèle pour créer un espace de code vide.

  3. Dans le terminal Codespace, installez Azure CLI :

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

  4. Connectez-vous à votre compte Azure :

    az login

    Suivez les instructions du terminal pour vous authentifier.

  5. Définissez des variables d’environnement pour le nom de votre groupe de ressources, le nom du service Azure OpenAI et l’emplacement :

    export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="eastus2"

    Important

    La région est essentielle, car elle est liée à la disponibilité régionale du modèle choisi. La disponibilité des modèles et la disponibilité des types de déploiement varient d’une région à l’autre. Ce didacticiel utilise gpt-4o-mini, qui est disponible dans eastus2 sous le type de déploiement Standard. Si vous effectuez un déploiement dans une autre région, ce modèle peut ne pas être disponible ou nécessiter un niveau différent. Avant de modifier les régions, consultez la table récapitulative du modèle et la disponibilité des régions pour vérifier la prise en charge du modèle dans votre région préférée.

  6. Créez un groupe de ressources et une ressource Azure OpenAI avec un domaine personnalisé, puis ajoutez un modèle 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

Maintenant que vous disposez d’une ressource Azure OpenAI, vous allez créer une application web pour interagir avec elle.

2. Créer et configurer une application web Express.js

  1. Dans votre terminal Codespace, créez un modèle Express.js dans l’espace de travail et essayez de l’exécuter la première fois.

    npx express-generator . --view ejs
npm audit fix --force
npm install && npm start

    Vous devez voir une notification dans GitHub Codespaces indiquant que l’application est disponible sur un port spécifique. Sélectionnez Ouvrir dans le navigateur pour lancer l’application dans un nouvel onglet de navigateur.

  2. De retour dans le terminal Codespace, arrêtez l’application avec Ctrl+C.

  3. Installez les dépendances NPM pour utiliser Azure OpenAI :

    npm install openai @azure/openai @azure/identity

  4. Ouvrez views/index.ejs et remplacez-le par le code suivant, pour une interface de conversation simple.

    <!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. Ouvrez routes/index.js et remplacez son contenu par le code suivant, pour un simple appel de complétion de chat avec 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. Dans le terminal, récupérez votre point de terminaison OpenAI :

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

  7. Réexécutez l'application en ajoutant AZURE_OPENAI_ENDPOINT avec sa valeur à partir du résultat de la CLI :

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

  8. Sélectionnez Ouvrir dans le navigateur pour lancer l’application dans un nouvel onglet de navigateur. Envoyez une question et vérifiez si vous recevez un message de réponse.

3. Déployer sur Azure App Service et configurer la connexion OpenAI

Maintenant que votre application fonctionne localement, déployons-la sur Azure App Service et configurez une connexion de service à Azure OpenAI à l’aide d’une identité managée.

  1. Tout d’abord, déployez votre application sur Azure App Service à l’aide de la commande az webapp upAzure CLI. Cette commande crée une application web et déploie votre code sur celui-ci :

    az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false

    L’exécution de cette commande peut prendre quelques minutes. Il crée une application web dans le même groupe de ressources que votre ressource OpenAI.

  2. Une fois l’application déployée, créez une connexion de service entre votre application web et la ressource Azure OpenAI à l’aide de l’identité managée :

    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

    Cette commande crée une connexion entre votre application web et la ressource Azure OpenAI par :

    • Génération d’une identité managée affectée par le système pour l’application web.
    • Ajout du rôle de Contributeur Cognitive Services OpenAI à l’identité managée pour la ressource Azure OpenAI.
    • Ajout du paramètre d’application AZURE_OPENAI_ENDPOINT à votre application web.

  3. Ouvrez l’application web déployée dans le navigateur. Recherchez l’URL de l’application web déployée dans la sortie du terminal. Ouvrez votre navigateur web et accédez-y.

    az webapp browse

  4. Tapez un message dans la zone de texte et sélectionnez Envoyer, puis donnez à l’application quelques secondes pour répondre avec le message d’Azure OpenAI.

    Capture d’écran montrant le chatbot s’exécutant dans Azure App Service.

Votre application est désormais déployée et connectée à Azure OpenAI avec une identité managée.

Questions fréquentes

Que se passe-t-il si je souhaite me connecter à OpenAI au lieu d’Azure OpenAI ?

Pour vous connecter à OpenAI à la place, utilisez le code suivant :

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

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

Pour plus d’informations, consultez l’authentification de l’API OpenAI.

Lorsque vous utilisez des secrets de connexion dans App Service, vous devez utiliser des références Key Vault au lieu de stocker des secrets directement dans votre codebase. Cela garantit que les informations sensibles restent sécurisées et sont gérées de manière centralisée.

Puis-je me connecter à Azure OpenAI avec une clé API à la place ?

Oui, vous pouvez vous connecter à Azure OpenAI à l’aide d’une clé API au lieu d’une identité managée. Pour plus d’informations, consultez le guide de démarrage rapide JavaScript d’Azure OpenAI.

Lorsque vous utilisez des secrets de connexion dans App Service, vous devez utiliser des références Key Vault au lieu de stocker des secrets directement dans votre codebase. Cela garantit que les informations sensibles restent sécurisées et sont gérées de manière centralisée.

Comment DefaultAzureCredential fonctionne-t-il dans ce tutoriel ?

Simplifie l’authentification DefaultAzureCredential en sélectionnant automatiquement la meilleure méthode d’authentification disponible :

  • Pendant le développement local : une fois que vous avez exécuté az login, il utilise vos informations d’identification Azure CLI locales.
  • Lorsqu’elle est déployée sur Azure App Service : elle utilise l’identité managée de l’application pour une authentification sécurisée sans mot de passe.

Cette approche permet à votre code de s’exécuter en toute sécurité et en toute transparence dans les environnements locaux et cloud sans modification.

Étapes suivantes

  • Last updated on