Tutorial: Criar um chatbot com o Serviço de Aplicativo do Azure e o Azure OpenAI (Express.js)

Neste tutorial, constrói uma aplicação de IA inteligente integrando o Azure OpenAI com uma aplicação web Node.js e implementa-a no Azure App Service.

Cria-se uma aplicação Express com uma vista e um controlador que envia pedidos de conclusão de chat para um modelo no Azure OpenAI. Liga-se à aplicação no Azure usando uma identidade gerida.

Você aprende a:

Crie um recurso do Azure OpenAI e implante um modelo de linguagem.
Crie um aplicativo Express.js que se conecta ao Azure OpenAI.
Implante o aplicativo no Serviço de Aplicativo do Azure.
Implemente autenticação segura sem palavra-passe no ambiente de desenvolvimento e no Azure.

Captura de tela mostrando o chatbot em execução no Serviço de Aplicativo do Azure.

Pré-requisitos

Uma conta do Azure com uma subscrição ativa
Uma conta do GitHub para usar os Codespaces do GitHub

1. Criar um recurso do Azure OpenAI

Nesta secção, utilizas Azure CLI no GitHub Codespaces para criar um recurso Azure OpenAI.

Inicia sessão no GitHub Codespaces com a tua conta GitHub.
Selecionar Usar este modelo na peça em branco para criar um novo espaço de código em branco.

No terminal do Codespace, instale a CLI do Azure.

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

Entre na sua conta do Azure.
```
az login
```
Siga as instruções no terminal para autenticar.
Defina variáveis de ambiente fornecendo nomes para o seu grupo de recursos e para o serviço Azure OpenAI e definindo uma região Azure apropriada como sua localização.
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="<azure-region>"
```
Importante

A localização está ligada à disponibilidade regional do modelo escolhido. A disponibilidade de modelos e tipos de implementação varia entre regiões Azure e níveis de faturação. Este tutorial utiliza gpt-4o-mini, que está disponível em várias regiões sob o tipo de implementação Standard.

Antes de selecionar uma localização, consulte o resumo de modelos e a tabela de disponibilidade de regiões para verificar o suporte de modelos na sua região preferida.

Crie um grupo de recursos e um recurso Azure OpenAI com um domínio personalizado, e depois adicione um 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

Agora que tem um recurso Azure OpenAI, pode criar uma aplicação web para interagir com ele.

2. Criar e configurar um aplicativo Web Express.js

No teu terminal de codespace, cria um modelo de Express.js no espaço de trabalho e executa-o.
```
npx express-generator . --view ejs
npm audit fix --force
npm install && npm start
```
Vês uma notificação no GitHub Codespaces a dizer que a aplicação está disponível numa porta específica. Selecione Abrir no navegador para iniciar o aplicativo em uma nova guia do navegador.
No terminal de codespace, pare a aplicação pressionando Ctrl+C.
Instale as dependências NPM para trabalhar com Azure OpenAI.
```
npm install openai @azure/openai @azure/identity
```

Na árvore de ficheiros, abra views/index.ejs e substitua o seu conteúdo pelo seguinte código para uma interface de chat simples.

<!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 rotas/index.js e substituir o seu conteúdo pelo seguinte código para uma chamada simples de conclusão de chat com o 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;

No terminal, recupere seu endpoint OpenAI:

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

Execute a aplicação adicionando AZURE_OPENAI_ENDPOINT com o valor da saída CLI anterior.
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> npm start
```
Selecione Abrir no navegador para abrir a aplicação num novo separador. Envie uma pergunta para ver uma mensagem de resposta.

3. Implantar no Serviço de Aplicativo do Azure e configurar a conexão OpenAI

Agora que a sua aplicação funciona localmente, implemente-a no Azure App Service e configure uma ligação de serviço ao Azure OpenAI usando a identidade gerida.

Primeiro, implante seu aplicativo no Serviço de Aplicativo do Azure usando o comando az webapp upCLI do Azure . Este comando cria uma nova aplicação web no mesmo grupo de recursos do seu recurso OpenAI e implementa o seu código nele. O comando pode levar alguns minutos para ser concluído.
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
Depois de a aplicação ser implementada, crie uma ligação de serviço entre a sua aplicação web e o recurso Azure OpenAI usando identidade gerida. O comando seguinte cria uma ligação entre a sua aplicação web e o recurso Azure OpenAI através de:
- Geração de identidade gerenciada atribuída pelo sistema para o aplicativo Web.
- Adicionar o papel de Contribuidor OpenAI de Serviços Cognitivos à identidade gerida para o recurso Azure OpenAI.
- Adicionar a definição da AZURE_OPENAI_ENDPOINT aplicação à sua aplicação 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
```
Encontre o URL da sua aplicação implementada na saída do terminal do az webapp up comando e navegue até à aplicação no seu navegador web.
```
az webapp browse
```
Na sua aplicação web, introduza uma mensagem na caixa de texto e selecione Enviar. Dê à aplicação alguns segundos para responder com a mensagem do Azure OpenAI.

Seu aplicativo agora está implantado e conectado ao Azure OpenAI com identidade gerenciada.

Perguntas frequentes

Como posso ligar-me ao OpenAI em vez do Azure OpenAI?
Posso ligar-me ao Azure OpenAI com uma chave API em vez de uma identidade gerida?
Como funciona o DefaultAzureCredential?

Como posso ligar-me ao OpenAI em vez do Azure OpenAI?

Para se ligar ao OpenAI em vez do Azure OpenAI, use o seguinte código:

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

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

Para obter mais informações, consulte Autenticação da API OpenAI.

Importante

Ao lidar com segredos de conexão, como chaves de API no App Service, é recomendável usar referências do Azure Key Vault ao invés de armazenar segredos diretamente no seu código. Esta prática garante que a informação sensível se mantém segura e é gerida de forma centralizada.

Posso ligar-me ao Azure OpenAI com uma chave API em vez de uma identidade gerida?

Sim, você pode se conectar ao Azure OpenAI usando uma chave de API em vez de identidade gerenciada. Para mais informações, consulte Use a API Azure OpenAI Responses.

Importante

Ao trabalhar com segredos de conexão, como chaves de API no App Service, deve utilizar referências ao Key Vault em vez de armazenar segredos diretamente no seu código. Esta prática garante que a informação sensível se mantém segura e é gerida de forma centralizada.

Como funciona o DefaultAzureCredential?

O DefaultAzureCredential simplifica a autenticação ao selecionar automaticamente o melhor método de autenticação.

Durante o desenvolvimento local, depois de executares az login, o DefaultAzureCredential utiliza as tuas credenciais locais da CLI do Azure.
Para as implementações do Azure App Service, o DefaultAzureCredential utiliza a identidade gerida da aplicação para uma autenticação segura e sem palavra-passe.

Essa abordagem permite que seu código seja executado de forma segura e transparente em ambientes locais e na nuvem, sem modificações.

Tutorial: Constrói uma aplicação de geração aumentada de recuperação no Azure App Service com Azure OpenAI e Azure AI Search (Express.js)
Tutorial: Executar chatbot no Serviço de Aplicativo com uma extensão de sidecar Phi-4 (Express.js)
Use managed identities for App Service and Azure Functions (Utilizar identidades geridas no Serviço de Aplicações e nas Funções do Azure)

Comentários

Esta página foi útil?

Last updated on 2026-03-27