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

Dans ce tutoriel, vous créez une application IA intelligente en intégrant Azure OpenAI à une application web Node.js et en la déployant sur Azure App Service.

Vous créez une application Express avec une vue et un contrôleur qui envoient des demandes de complétion de chat à un modèle dans Azure OpenAI. Vous vous connectez à l’application dans Azure à l’aide d’une identité managée.

Vous apprenez à :

  • 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.

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

Conditions préalables

1. Créer une ressource Azure OpenAI

Dans cette section, vous utilisez Azure CLI dans GitHub Codespaces pour créer une ressource Azure OpenAI.

  1. Connectez-vous à GitHub Codespaces avec votre compte GitHub.

  2. Sélectionnez Utiliser ce modèle dans la tuile Vierge pour créer un nouvel espace de code vierge.

  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 en fournissant des noms pour votre groupe de ressources et le service Azure OpenAI et en définissant une région Azure appropriée comme emplacement.

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

    Important

    L’emplacement est lié à la disponibilité régionale du modèle choisi. La disponibilité des types de modèle et de déploiement varie entre les régions Azure et les niveaux de facturation. Ce didacticiel utilise gpt-4o-mini, qui est disponible dans plusieurs régions sous le type de déploiement Standard.

    Avant de sélectionner un emplacement, consultez la table de disponibilité récapitulative du modèle et de la région 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 gpt-4o-mini modèle :

    # 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

Maintenant que vous disposez d’une ressource Azure OpenAI, vous pouvez 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 exécutez-le.

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

  2. Vous voyez une notification dans GitHub Codespaces 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.

  3. Dans le terminal codespace, arrêtez l’application en appuyant sur Ctrl+C.

  4. Installez les dépendances NPM pour utiliser Azure OpenAI.

    npm install openai @azure/openai @azure/identity

  5. Dans l’arborescence de fichiers, ouvrez views/index.ejs et remplacez son contenu 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>

  6. Ouvrez routes/index.js et remplacez son contenu par le code suivant pour un appel de complétion de chat simple 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;

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

  8. Exécutez l'application en ajoutant AZURE_OPENAI_ENDPOINT avec sa valeur obtenue à partir de la sortie CLI précédente :

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

  9. Sélectionnez Ouvrir dans le navigateur pour lancer l’application dans un nouvel onglet de navigateur. Envoyez une question pour voir un message de réponse.

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

Maintenant que votre application fonctionne localement, déployez-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 dans le même groupe de ressources que votre ressource OpenAI et déploie votre code sur celui-ci. L’exécution de la commande peut prendre quelques instants.

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

  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. La commande suivante 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 Contributeur OpenAI Cognitive Services à l’identité managée pour la ressource Azure OpenAI.
    • Ajout du paramètre d’application AZURE_OPENAI_ENDPOINT à votre application web.
    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

  3. Recherchez l’URL de votre application déployée dans la sortie du terminal à partir de la az webapp up commande, puis accédez à l’application dans votre navigateur web.

    az webapp browse

  4. Dans votre application web, entrez un message dans la zone de texte, puis sélectionnez Envoyer. 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

Comment puis-je me connecter à OpenAI au lieu d’Azure OpenAI ?

Pour vous connecter à OpenAI au lieu d’Azure OpenAI, 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.

Important

Lorsque vous utilisez des secrets de connexion tels que des clés API dans App Service, vous devez utiliser des références Azure Key Vault au lieu de stocker des secrets directement dans votre code. Cette pratique 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 au lieu d’une identité managée ?

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 Utiliser l’API Réponses Azure OpenAI.

Important

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

Comment fonctionne DefaultAzureCredential ?

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

  • Pendant le développement local, après l’exécution az login, le DefaultAzureCredential utilise vos informations d'identification Azure CLI locales.
  • Pour les déploiements Azure App Service, l’application DefaultAzureCredential 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.

Contenu connexe

  • Last updated on