Udostępnij przez

Samouczek: tworzenie czatbota za pomocą usług Azure App Service i Azure OpenAI (Express.js)

W tym samouczku utworzysz inteligentną aplikację sztucznej inteligencji, poprzez integrację usługi Azure OpenAI z aplikacją Node.js i wdrażając ją na platformie Azure App Service. Utworzysz aplikację Express z widokiem i kontrolerem, który wysyła żądania ukończenia czatu do modelu w usłudze Azure OpenAI.

Zrzut ekranu przedstawiający czatbota uruchomionego w usłudze Azure App Service.

W tym poradniku nauczysz się, jak:

  • Utwórz zasób usługi Azure OpenAI i wdróż model językowy.
  • Utwórz aplikację Express.js, która łączy się z usługą Azure OpenAI.
  • Wdróż aplikację w usłudze Azure App Service.
  • Zaimplementuj bezpieczne uwierzytelnianie bez hasła zarówno w środowisku projektowym, jak i na platformie Azure.

Wymagania wstępne

1. Tworzenie zasobu usługi Azure OpenAI

W tej sekcji użyjesz usługi GitHub Codespaces do utworzenia zasobu usługi Azure OpenAI za pomocą interfejsu wiersza polecenia platformy Azure.

  1. Przejdź do usługi GitHub Codespaces i zaloguj się przy użyciu konta usługi GitHub.

  2. Znajdź pusty szablon według usługi GitHub i wybierz pozycję Użyj tego szablonu , aby utworzyć nową pustą przestrzeń kodu.

  3. W terminalu usługi Codespace zainstaluj interfejs wiersza polecenia platformy Azure:

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

  4. Zaloguj się do swojego konta platformy Azure:

    az login

    Postępuj zgodnie z instrukcjami w terminalu, aby się uwierzytelnić.

  5. Ustaw zmienne środowiskowe dla nazwy grupy zasobów, nazwy usługi Azure OpenAI i lokalizacji:

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

    Ważne

    Region ma kluczowe znaczenie, ponieważ jest powiązany z regionalną dostępnością wybranego modelu. Dostępność modelu i dostępność typu wdrożenia różnią się w zależności od regionu do regionu. W tym samouczku jest używany element gpt-4o-mini, który jest dostępny w eastus2 w typie wdrożenia Standardowym. W przypadku wdrożenia w innym regionie ten model może być niedostępny lub może wymagać innej warstwy. Przed zmianą regionów zapoznaj się z tabelą podsumowania modelu i dostępnością regionów , aby sprawdzić obsługę modelu w preferowanym regionie.

  6. Utwórz grupę zasobów i zasób usługi Azure OpenAI z domeną niestandardową, a następnie dodaj model 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

Teraz, gdy masz zasób usługi Azure OpenAI, utworzysz aplikację internetową do interakcji z nią.

2. Tworzenie i konfigurowanie aplikacji internetowej Express.js

  1. W terminalu usługi Codespace utwórz szablon Express.js w obszarze roboczym i spróbuj uruchomić go po raz pierwszy.

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

    W usłudze GitHub Codespaces powinno zostać wyświetlone powiadomienie wskazujące, że aplikacja jest dostępna na określonym porcie. Wybierz pozycję Otwórz w przeglądarce, aby uruchomić aplikację na nowej karcie przeglądarki.

  2. Wróć do terminalu codespace, zatrzymaj aplikację za pomocą Ctrl+C.

  3. Zainstaluj zależności npm do pracy z usługą Azure OpenAI:

    npm install openai @azure/openai @azure/identity

  4. Otwórz plik views/index.ejs i zastąp go następującym kodem, aby uzyskać prosty interfejs czatu.

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

  5. Otwórz trasy/index.js i zastąp jego zawartość następującym kodem, aby uzyskać proste wywołanie ukończenia czatu za pomocą usługi 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;

  6. W terminalu pobierz punkt końcowy OpenAI.

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

  7. Uruchom ponownie aplikację, dodając AZURE_OPENAI_ENDPOINT wraz z jego wartością z danych wyjściowych interfejsu wiersza polecenia.

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

  8. Wybierz pozycję Otwórz w przeglądarce, aby uruchomić aplikację na nowej karcie przeglądarki. Prześlij pytanie i sprawdź, czy otrzymasz komunikat odpowiedzi.

3. Wdrażanie w usłudze Azure App Service i konfigurowanie połączenia OpenAI

Teraz, gdy aplikacja działa lokalnie, wdróżmy ją w usłudze Azure App Service i skonfigurujmy połączenie usługi z usługą Azure OpenAI przy użyciu tożsamości zarządzanej.

  1. Najpierw wdróż swoją aplikację w usłudze Azure App Service używając polecenia Azure CLI az webapp up. To polecenie tworzy nową aplikację internetową i wdraża w niej kod:

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

    Wykonanie tego polecenia może potrwać kilka minut. Tworzy nową aplikację internetową w tej samej grupie zasobów co zasób OpenAI.

  2. Po wdrożeniu aplikacji utwórz połączenie usługi między aplikacją internetową a zasobem usługi Azure OpenAI przy użyciu tożsamości zarządzanej:

    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

    To polecenie tworzy połączenie między aplikacją internetową a zasobem usługi Azure OpenAI przez:

    • Generowanie tożsamości zarządzanej przypisanej przez system dla aplikacji internetowej.
    • Dodanie roli Współautora OpenAI usług Cognitive Services do tożsamości zarządzanej dla zasobu Azure OpenAI.
    • Dodawanie ustawienia AZURE_OPENAI_ENDPOINT do aplikacji internetowej.

  3. Otwórz wdrożoną aplikację internetową w przeglądarce. Znajdź adres URL wdrożonej aplikacji internetowej w danych wyjściowych terminalu. Otwórz przeglądarkę internetową i przejdź do niej.

    az webapp browse

  4. Wpisz wiadomość w polu tekstowym i wybierz pozycję Wyślij, a następnie nadaj aplikacji kilka sekund na odpowiedź z komunikatem z usługi Azure OpenAI.

    Zrzut ekranu przedstawiający czatbota uruchomionego w usłudze Azure App Service.

Twoja aplikacja jest teraz wdrażana i połączona z usługą Azure OpenAI z tożsamością zarządzaną.

Najczęściej zadawane pytania

Co zrobić, jeśli chcę nawiązać połączenie z usługą OpenAI zamiast z usługą Azure OpenAI?

Aby zamiast tego nawiązać połączenie z usługą OpenAI, użyj następującego kodu:

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

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

Aby uzyskać więcej informacji, zobacz Uwierzytelnianie interfejsu API OpenAI.

Podczas pracy z tajnymi danymi połączenia w usłudze App Service należy użyć odwołań usługi Key Vault zamiast przechowywania tajnych danych bezpośrednio w kodzie źródłowym. Dzięki temu poufne informacje pozostają bezpieczne i są zarządzane centralnie.

Czy zamiast tego mogę nawiązać połączenie z usługą Azure OpenAI za pomocą klucza interfejsu API?

Tak, możesz nawiązać połączenie z usługą Azure OpenAI przy użyciu klucza interfejsu API zamiast tożsamości zarządzanej. Aby uzyskać więcej informacji, zobacz Przewodnik Szybki start dla języka JavaScript usługi Azure OpenAI.

Podczas pracy z tajnymi danymi połączenia w usłudze App Service należy użyć odwołań usługi Key Vault zamiast przechowywania tajnych danych bezpośrednio w kodzie źródłowym. Dzięki temu poufne informacje pozostają bezpieczne i są zarządzane centralnie.

Jak działa element DefaultAzureCredential w tym samouczku?

Upraszcza DefaultAzureCredential to uwierzytelnianie, automatycznie wybierając najlepszą dostępną metodę uwierzytelniania:

  • Podczas programowania lokalnego: po uruchomieniu az login, używa lokalnych poświadczeń CLI Azure.
  • Po wdrożeniu w usłudze Azure App Service: używa tożsamości zarządzanej aplikacji do bezpiecznego uwierzytelniania bez hasła.

Takie podejście umożliwia bezpieczne i bezproblemowe uruchamianie kodu zarówno w środowiskach lokalnych, jak i w chmurze bez modyfikacji.

Dalsze kroki

  • Last updated on