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

Neste tutorial, você criará um aplicativo de IA inteligente integrando o Azure OpenAI a um aplicativo Web Node.js e o implantará no Serviço de Aplicativo do Azure.

Você cria um aplicativo Express com uma exibição e um controlador que envia as solicitações de conclusão de chat para um modelo no OpenAI do Azure. Você se conecta ao aplicativo no Azure usando uma identidade gerenciada.

Você aprenderá como:

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 a autenticação segura sem senha 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 assinatura ativa
Uma conta do GitHub para usar os Codespaces do GitHub

1. Criar um recurso do Azure OpenAI

Nesta seção, você usará a CLI do Azure nos Codespaces do GitHub para criar um recurso do Azure OpenAI.

Entre nos Codespaces do GitHub com sua conta do GitHub.
Selecione Usar este modelo na opção Blank para criar um novo codespace em branco.
No terminal do Codespaces, instale a interface de linha de comando do Azure.
```
curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
```
Entre em sua conta do Azure.
```
az login
```
Siga as instruções no terminal para autenticar.
Defina variáveis de ambiente fornecendo nomes para o grupo de recursos e o serviço Azure OpenAI e definindo uma região apropriada do Azure 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

O local está vinculado à disponibilidade regional do modelo escolhido. A disponibilidade de tipo de modelo e implantação varia entre as regiões do Azure e as camadas de cobrança. Este tutorial usa gpt-4o-mini, que está disponível em diversas regiões sob o tipo de implantação Padrão.

Antes de selecionar um local, consulte o resumo do modelo e a tabela de disponibilidade da região para verificar o suporte ao modelo em sua região preferida.

Crie um grupo de recursos e um recurso do Azure OpenAI com um domínio personalizado e 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 você tem um recurso do Azure OpenAI, pode criar um aplicativo Web para interagir com ele.

2. Criar e configurar um aplicativo Web Express.js

No terminal do codespace, crie um modelo de Express.js no workspace e execute-o.

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

Você verá uma notificação nos Codespaces do GitHub informando que o aplicativo está disponível em uma porta específica. Selecione Abrir no navegador para iniciar o aplicativo em uma nova guia do navegador.
No terminal do codespace, interrompa o aplicativo pressionando Ctrl+C.
Instale as dependências do NPM para trabalhar com o Azure OpenAI.
```
npm install openai @azure/openai @azure/identity
```

Na árvore de arquivos, abra views/index.ejs e substitua seu conteúdo pelo código a seguir 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>

Abra rotas/index.js e substitua seu conteúdo pelo seguinte código para uma chamada de conclusão de chat simples 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 o ponto de extremidade do OpenAI:

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

Execute o aplicativo adicionando AZURE_OPENAI_ENDPOINT com seu valor da saída da CLI anterior:
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> npm start
```
Selecione Abrir no navegador para iniciar o aplicativo em uma nova guia do navegador. 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 seu aplicativo funciona localmente, implante-o no Serviço de Aplicativo do Azure e configure uma conexão de serviço com o Azure OpenAI usando a identidade gerenciada.

Primeiro, implante seu aplicativo no Serviço de Aplicativo do Azure usando o comando az webapp upda CLI do Azure. Esse comando cria um novo aplicativo Web no mesmo grupo de recursos que o recurso OpenAI e implanta 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 que o aplicativo for implantado, crie uma conexão de serviço entre seu aplicativo Web e o recurso do Azure OpenAI usando a identidade gerenciada. O comando a seguir cria uma conexão entre seu aplicativo Web e o recurso do Azure OpenAI:
- Gerando identidade gerenciada atribuída pelo sistema para o aplicativo Web.
- Adicionando a função Colaborador OpenAI de Serviços Cognitivos à identidade gerenciada para o recurso do OpenAI do Azure.
- Adicionando a configuração de aplicativo AZURE_OPENAI_ENDPOINT ao seu aplicativo 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
```
Localize a URL do aplicativo implantado na saída do terminal do az webapp up comando e navegue até o aplicativo no navegador da Web.
```
az webapp browse
```
Em seu aplicativo Web, insira uma mensagem na caixa de texto e selecione Enviar. Dê ao aplicativo 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 me conectar ao OpenAI em vez do Azure OpenAI?
Posso me conectar ao Azure OpenAI com uma chave de API em vez de uma identidade gerenciada?
Como funciona o DefaultAzureCredential?

Como posso me conectar ao OpenAI em vez do Azure OpenAI?

Para se conectar 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 a autenticação da API openai.

Importante

Ao trabalhar com segredos de conexão, como chaves de API no Serviço de Aplicativo, você deve usar referências do Azure Key Vault em vez de armazenar segredos diretamente em seu código. Essa prática garante que as informações confidenciais permaneçam seguras e sejam gerenciadas centralmente.

Posso me conectar ao Azure OpenAI com uma chave de API em vez de uma identidade gerenciada?

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

Importante

Ao trabalhar com segredos de conexão, como chaves de API no Serviço de Aplicativo, você deve usar referências do Key Vault em vez de armazenar segredos diretamente em seu código. Essa prática garante que as informações confidenciais permaneçam seguras e sejam gerenciadas centralmente.

Como funciona o DefaultAzureCredential?

DefaultAzureCredential simplifica a autenticação selecionando automaticamente o melhor método de autenticação disponível.

Durante o desenvolvimento local, depois de executar az login, o DefaultAzureCredential usa suas credenciais locais do Azure CLI.
Para implantações do Serviço de Aplicativo do Azure, o DefaultAzureCredential usa a identidade gerenciada do aplicativo para autenticação segura e sem senha.

Essa abordagem permite que seu código seja executado de forma segura e direta em ambientes locais e de nuvem sem modificação.

Comentários

Esta página foi útil?

Last updated on 2026-03-27