Tutorial: Creación de un bot de chat con Azure App Service y Azure OpenAI (Express.js)

2025-05-20

En este tutorial, creará una aplicación de inteligencia artificial inteligente mediante la integración de Azure OpenAI con una aplicación de Node.js e implementarla en Azure App Service. Creará una aplicación Express con una vista y un controlador que envía solicitudes de finalización de chat a un modelo de Azure OpneAI.

Captura de pantalla que muestra el bot de chat que se ejecuta en Azure App Service.

En este tutorial, aprenderá a:

Cree un recurso de Azure OpenAI e implemente un modelo de lenguaje.
Compile una aplicación de Express.js que se conecte a Azure OpenAI.
Implemente la aplicación en Azure App Service.
Implemente la autenticación segura sin contraseña tanto en el entorno de desarrollo como en Azure.

Prerrequisitos

Una cuenta de Azure con una suscripción activa
Una cuenta de GitHub para usar GitHub Codespaces

1. Creación de un recurso de Azure OpenAI

En esta sección, usará GitHub Codespaces para crear un recurso de Azure OpenAI con la CLI de Azure.

Vaya a GitHub Codespaces e inicie sesión con su cuenta de GitHub.
Busque la plantilla En blanco de GitHub y seleccione Usar esta plantilla para crear un nuevo espacio de código en blanco.

En el terminal de Codespace, instale la CLI de Azure:

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

Inicio de sesión en la cuenta de Azure
```
az login
```
Siga las instrucciones del terminal para autenticarse.
Establezca variables de entorno para el nombre del grupo de recursos, el nombre del servicio Azure OpenAI y la ubicación:
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="eastus2"
```
Importante

La región es fundamental, ya que está vinculada a la disponibilidad regional del modelo elegido. La disponibilidad del modelo y el tipo de implementación varían de región a región. En este tutorial se utiliza gpt-4o-mini, que está disponible en eastus2 bajo el tipo de implementación estándar. Si implementa en otra región, es posible que este modelo no esté disponible o que requiera un nivel diferente. Antes de cambiar las regiones, consulte la tabla de resumen del modelo y la disponibilidad de regiones para comprobar la compatibilidad del modelo en su región preferida.

Cree un grupo de recursos y un recurso de Azure OpenAI con un dominio personalizado y agregue un modelo 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

Ahora que tiene un recurso de Azure OpenAI, creará una aplicación web para interactuar con él.

2. Creación y configuración de una aplicación web de Express.js

En el terminal de Codespace, cree una plantilla de Express.js en el área de trabajo e intente ejecutarla la primera vez.
```
npx express-generator . --view ejs
npm audit fix --force
npm install && npm start
```
Debería ver una notificación en GitHub Codespaces que indica que la aplicación está disponible en un puerto específico. Seleccione Abrir en el explorador para iniciar la aplicación en una nueva pestaña del explorador.
De nuevo en el terminal codespace, detenga la aplicación con Ctrl+C.
Instale las dependencias de NPM para trabajar con Azure OpenAI:
```
npm install openai @azure/openai @azure/identity
```

Abra views/index.ejs y reemplácelo por el código siguiente para una interfaz de chat 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>

Abrir routes/index.js y reemplazar su contenido con el siguiente código para realizar una llamada simple de finalización de chat con 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;

En el terminal, recupere el punto de conexión de OpenAI:

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

Vuelva a ejecutar la aplicación agregando AZURE_OPENAI_ENDPOINT con su valor a partir de la salida de la CLI:
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> npm start
```
Seleccione Abrir en el explorador para iniciar la aplicación en una nueva pestaña del explorador. Envíe una pregunta y vea si recibe un mensaje de respuesta.

3. Implementación en Azure App Service y configuración de la conexión de OpenAI

Ahora que la aplicación funciona localmente, vamos a implementarla en Azure App Service y configurar una conexión de servicio a Azure OpenAI mediante la identidad administrada.

En primer lugar, implemente la aplicación en Azure App Service mediante el comando az webapp upde la CLI de Azure. Este comando crea una nueva aplicación web e implementa el código en ella:
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
Este comando puede tardar unos minutos en completarse. Crea una nueva aplicación web en el mismo grupo de recursos que el recurso de OpenAI.
Una vez implementada la aplicación, cree una conexión de servicio entre la aplicación web y el recurso de Azure OpenAI mediante la identidad administrada:
```
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
```
Este comando crea una conexión entre la aplicación web y el recurso de Azure OpenAI mediante:
- Generación de una identidad administrada asignada por el sistema para la aplicación web.
- Agregando el rol de Colaborador de OpenAI de Cognitive Services a la identidad administrada del recurso de Azure OpenAI.
- Añadiendo la configuración de la aplicación AZURE_OPENAI_ENDPOINT a tu aplicación web.
Abra la aplicación web implementada en el explorador. Busque la dirección URL de la aplicación web implementada en la salida del terminal. Abra el explorador web y vaya a él.
```
az webapp browse
```
Escriba un mensaje en el cuadro de texto y seleccione "Enviar" y proporcione a la aplicación unos segundos para responder con el mensaje de Azure OpenAI.

La aplicación ahora está implementada y conectada a Azure OpenAI con identidad administrada.

Preguntas más frecuentes

¿Qué ocurre si quiero conectarse a OpenAI en lugar de Azure OpenAI?
¿Puedo conectarse a Azure OpenAI con una clave de API en su lugar?
¿Cómo funciona DefaultAzureCredential en este tutorial?

¿Qué ocurre si quiero conectarse a OpenAI en lugar de Azure OpenAI?

Para conectarse a OpenAI en su lugar, use el código siguiente:

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

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

Para más información, consulte Autenticación de API de OpenAI.

Al trabajar con secretos de conexión en App Service, debe usar referencias de Key Vault en lugar de almacenar secretos directamente en el código base. Esto garantiza que la información confidencial permanece segura y se administra de forma centralizada.

¿Puedo conectarse a Azure OpenAI con una clave de API en su lugar?

Sí, puede conectarse a Azure OpenAI mediante una clave de API en lugar de una identidad administrada. Para más información, consulte el inicio rápido de JavaScript de Azure OpenAI.

¿Cómo funciona DefaultAzureCredential en este tutorial?

Simplifica DefaultAzureCredential la autenticación seleccionando automáticamente el mejor método de autenticación disponible:

Durante el desarrollo local: después de ejecutar az login, usa las credenciales de la CLI de Azure local.
Cuando se implementa en Azure App Service: usa la identidad administrada de la aplicación para la autenticación segura sin contraseña.

Este enfoque permite que el código se ejecute de forma segura y sin problemas en entornos locales y en la nube sin modificaciones.

Compartir a través de