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

En este tutorial, creará una aplicación de inteligencia artificial inteligente mediante la integración de Azure OpenAI con una aplicación web de Node.js e implementarla en Azure App Service.

Crea una aplicación Express con una vista y un controlador que envían solicitudes de finalización de chat a un modelo en Azure OpenAI. Se conecta a la aplicación en Azure mediante una identidad administrada.

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 en el entorno de desarrollo y en Azure.

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

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á la CLI de Azure en GitHub Codespaces para crear un recurso de Azure OpenAI.

Inicie sesión en GitHub Codespaces con su cuenta de GitHub.
Seleccione Usar esta plantilla en el icono En blanco 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

Inicie sesión en su cuenta de Azure.
```
az login
```
Siga las instrucciones del terminal para autenticarse.
Establezca variables de entorno proporcionando nombres para el grupo de recursos y el servicio Azure OpenAI y estableciendo una región de Azure adecuada como ubicación.
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="<azure-region>"
```
Importante

La ubicación está vinculada a la disponibilidad regional del modelo elegido. La disponibilidad del tipo de modelo e implementación varía entre las regiones de Azure y los niveles de facturación. En este tutorial se usa gpt-4o-mini, que está disponible en varias regiones en el tipo de implementación Estándar.

Antes de seleccionar una ubicación, consulte la tabla de disponibilidad Resumen del modelo y región 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 gpt-4o-mini modelo:

# 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

Ahora que tiene un recurso de Azure OpenAI, puede 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 y ejecútela.
```
npx express-generator . --view ejs
npm audit fix --force
npm install && npm start
```
Verá una notificación en GitHub Codespaces 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.
En el terminal de codespace, detenga la aplicación presionando Ctrl+C.
Instale las dependencias de NPM para trabajar con Azure OpenAI.
```
npm install openai @azure/openai @azure/identity
```

En el árbol de archivos, abra views/index.ejs y reemplace su contenido 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>

Abra routes/index.js y reemplace su contenido por el siguiente código para una llamada de completado de chat sencillo 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

Ejecute la aplicación agregando AZURE_OPENAI_ENDPOINT con su valor de la salida anterior 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 para ver 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, impleméntela en Azure App Service y configure 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 en el mismo grupo de recursos que el recurso de OpenAI e implementa el código en él. El comando puede tardar unos minutos en completarse.
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
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. El siguiente 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.
- Añadir el rol Colaborador de Cognitive Services OpenAI a la identidad administrada para el recurso de Azure OpenAI.
- Añadiendo la configuración de la aplicación AZURE_OPENAI_ENDPOINT a tu aplicación 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
```
Busque la dirección URL de la aplicación implementada en la salida del terminal desde el az webapp up comando y vaya a la aplicación en el explorador web.
```
az webapp browse
```
En la aplicación web, escriba un mensaje en el cuadro de texto y seleccione Enviar. 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

¿Cómo puedo conectarse a OpenAI en lugar de Azure OpenAI?
¿Puedo conectarse a Azure OpenAI con una clave de API en lugar de una identidad administrada?
¿Cómo funciona DefaultAzureCredential?

¿Cómo puedo conectarse a OpenAI en lugar de Azure OpenAI?

Para conectarse a OpenAI en lugar de Azure OpenAI, 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.

Importante

Al trabajar con secretos de conexión como claves de API en App Service, debe usar referencias de Azure Key Vault en lugar de almacenar secretos directamente en el código. Esta práctica 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 lugar de una identidad administrada?

Sí, puede conectarse a Azure OpenAI mediante una clave de API en lugar de una identidad administrada. Para más información, consulte Uso de la API de respuestas de Azure OpenAI.

Importante

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

¿Cómo funciona DefaultAzureCredential?

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, DefaultAzureCredential utiliza tus credenciales de la CLI de Azure local.
En el caso de las implementaciones de Azure App Service, usa DefaultAzureCredential 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.

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2026-03-27