Lernprogramm: Erstellen eines Chatbots mit Azure App Service und Azure OpenAI (Flask)

In diesem Lernprogramm erstellen Sie eine intelligente KI-Anwendung, indem Sie Azure OpenAI in eine Python-Webanwendung integrieren und in Azure App Service bereitstellen. Sie erstellen eine Flask-App, die Chatabschlussanforderungen an ein Modell in Azure OpenAI sendet und eine Verbindung mit dem Dienst mithilfe einer verwalteten Identität herstellt.

Hier erfahren Sie, wie Sie:

Erstellen Sie eine Azure OpenAI-Ressource, und stellen Sie ein Sprachmodell bereit.
Erstellen Sie eine Flask-Anwendung, die eine Verbindung mit Azure OpenAI herstellt.
Stellen Sie die Anwendung in Azure App Service bereit.
Implementieren Sie die kennwortlose sichere Authentifizierung in der Entwicklungsumgebung und in Azure.

Screenshot eines Chatbots, der in Azure App Service ausgeführt wird.

Prerequisites

Ein Azure-Konto mit einem aktiven Abonnement
Ein GitHub-Konto für die Verwendung von GitHub Codespaces

1. Erstellen einer Azure OpenAI-Ressource

In diesem Abschnitt verwenden Sie Azure CLI in GitHub Codespaces, um eine Azure OpenAI-Ressource zu erstellen.

Melden Sie sich mit Ihrem GitHub-Konto bei GitHub Codespaces an.
Wählen Sie Diese Vorlage verwenden in der Blanko-Kachel aus, um einen neuen leeren Codespace zu erstellen.

Installieren Sie im Codespace-Terminal die Azure CLI.

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

Melden Sie sich bei Ihrem Azure-Konto an.
```
az login
```
Folgen Sie den Anweisungen im Terminal, um sich zu authentifizieren.
Legen Sie Umgebungsvariablen fest, indem Sie Namen für Ihre Ressourcengruppe und den Azure OpenAI-Dienst angeben und eine entsprechende Azure-Region als Standort festlegen.
```
export RESOURCE_GROUP="<group-name>"
export OPENAI_SERVICE_NAME="<azure-openai-name>"
export APPSERVICE_NAME="<app-name>"
export LOCATION="<azure-region>"
```
Important

Der Standort ist an die regionale Verfügbarkeit des ausgewählten Modells gebunden. Die Verfügbarkeit von Modell- und Bereitstellungstypen variiert zwischen Azure-Regionen und Abrechnungsebenen. Dieses Tutorial verwendet gpt-4o-mini, das in mehreren Regionen unter dem Bereitstellungstyp Standard verfügbar ist.

Bevor Sie einen Standort auswählen, konsultieren Sie die Tabelle "Modellzusammenfassungs- und Regionsverfügbarkeitsübersicht", um die Modellunterstützung in Ihrer bevorzugten Region zu überprüfen.

Erstellen Sie eine Ressourcengruppe und eine Azure OpenAI-Ressource mit einer benutzerdefinierten Domäne, und fügen Sie dann ein gpt-4o-mini Modell hinzu:

# 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

Nachdem Sie nun über eine Azure OpenAI-Ressource verfügen, können Sie eine Webanwendung erstellen, um damit zu interagieren.

2. Erstellen und Einrichten einer Flask-App

Erstellen Sie in Ihrem Codespace-Terminal eine virtuelle Umgebung, und installieren Sie die benötigten PIP-Pakete.

python3 -m venv .venv
source .venv/bin/activate
pip install flask openai azure.identity dotenv
pip freeze > requirements.txt

Erstellen Sie im Arbeitsbereichsstamm eine Datei namens app.py mit dem folgenden Code für einen einfachen Chatabschlussanruf mit Azure OpenAI.

import os
from flask import Flask, render_template, request
from azure.identity import DefaultAzureCredential, get_bearer_token_provider
from openai import AzureOpenAI

app = Flask(__name__)

# Initialize the Azure OpenAI client with Microsoft Entra authentication
token_provider = get_bearer_token_provider(
    DefaultAzureCredential(), "https://cognitiveservices.azure.com/.default"
)
client = AzureOpenAI(
    api_version="2024-10-21",
    azure_endpoint=os.getenv("AZURE_OPENAI_ENDPOINT"),
    azure_ad_token_provider=token_provider,
)

@app.route('/', methods=['GET', 'POST'])
def index():
    response = None
    if request.method == 'POST': # Handle form submission
        user_message = request.form.get('message')
        if user_message:
            try:
                # Call the Azure OpenAI API with the user's message
                completion = client.chat.completions.create(
                    model="gpt-4o-mini",
                    messages=[{"role": "user", "content": user_message}]
                )
                ai_message = completion.choices[0].message.content
                response = ai_message
            except Exception as e:
                response = f"Error: {e}"
    return render_template('index.html', response=response)

if __name__ == '__main__':
    app.run()

Erstellen Sie ein Vorlagenverzeichnis und eine index.html Datei darin. Fügen Sie den folgenden Code zum Erstellen einer einfachen Chatschnittstelle ein.

<!doctype html>
<html>
<head>
    <title>Azure OpenAI Chat</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <main class="container py-4">
        <h1 class="mb-4 text-primary">Azure OpenAI Chat</h1>
        <form method="post" action="/" class="mb-3">
            <div class="input-group">
                <input type="text" name="message" class="form-control" placeholder="Type your message..." required>
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </form>
        <div class="card p-3">
            {% if response %}
                <div class="alert alert-info mt-3">{{ response }}</div>
            {% endif %}
        </div>
    </main>
</body>
</html>

Rufen Sie im Terminal Ihren OpenAI-Endpunkt ab:

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

Führen Sie die App aus, indem Sie AZURE_OPENAI_ENDPOINT mit dem Wert aus der vorherigen CLI-Ausgabe hinzufügen.
```
AZURE_OPENAI_ENDPOINT=<output-from-previous-cli-command> flask run
```
Wählen Sie "Im Browser öffnen " aus, um die App auf einer neuen Browserregisterkarte zu starten. Senden Sie eine Frage, um eine Antwortnachricht anzuzeigen.

3. Bereitstellen für Azure App Service und Konfigurieren der OpenAI-Verbindung

Nachdem Ihre App lokal funktioniert, stellen Sie sie in Azure App Service bereit und richten eine Dienstverbindung mit Azure OpenAI mithilfe der verwalteten Identität ein.

Stellen Sie zunächst Ihre App mit dem Azure CLI-Befehl in Azure App Service bereit az webapp up. Mit diesem Befehl wird eine neue Web-App in derselben Ressourcengruppe wie Ihre OpenAI-Ressource erstellt und Ihr Code darauf bereitgestellt. Die Ausführung des Befehls kann einige Minuten dauern.
```
az webapp up \
  --resource-group $RESOURCE_GROUP \
  --location $LOCATION \
  --name $APPSERVICE_NAME \
  --plan $APPSERVICE_NAME \
  --sku B1 \
  --os-type Linux \
  --track-status false
```
Nachdem die App bereitgestellt wurde, erstellen Sie eine Dienstverbindung zwischen Ihrer Web-App und der Azure OpenAI-Ressource mithilfe der verwalteten Identität. Der folgende Befehl erstellt eine Verbindung zwischen Ihrer Web-App und der Azure OpenAI-Ressource durch:
- Generieren einer vom System zugewiesenen verwalteten Identität für die Web-App.
- Hinzufügen der Rolle "Cognitive Services OpenAI-Mitwirkender " zur verwalteten Identität für die Azure OpenAI-Ressource.
- Hinzufügen der AZURE_OPENAI_ENDPOINT App-Einstellung zu Ihrer Web-App.
```
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
```
Suchen Sie die URL Ihrer bereitgestellten App in der Terminalausgabe aus dem az webapp up Befehl, und navigieren Sie zu der App in Ihrem Webbrowser.
```
az webapp browse
```
Geben Sie in Ihrer Web-App eine Nachricht in das Textfeld ein, und wählen Sie "Senden" aus. Geben Sie der App ein paar Sekunden Zeit, um mit der Nachricht von Azure OpenAI zu antworten.

Ihre App wird jetzt bereitgestellt und mit Azure OpenAI mit verwalteter Identität verbunden.

Häufig gestellte Fragen

Wie kann ich anstelle von Azure OpenAI eine Verbindung mit OpenAI herstellen?
Kann ich eine Verbindung mit Azure OpenAI mit einem API-Schlüssel statt mit verwalteter Identität herstellen?
Wie funktioniert defaultAzureCredential?

Wie kann ich anstelle von Azure OpenAI eine Verbindung mit OpenAI herstellen?

Verwenden Sie den folgenden Code, um eine Verbindung mit OpenAI anstelle von Azure OpenAI herzustellen:

from openai import OpenAI

client = OpenAI(
    api_key="<openai-api-key>"
)

Weitere Informationen finden Sie unter Wechseln zwischen OpenAI- und Azure OpenAI-Endpunkten mit Python.

Important

Wenn Sie mit Verbindungsschlüsseln wie API-Schlüsseln in App Service arbeiten, sollten Sie Azure Key Vault-Verweise verwenden , anstatt geheime Schlüssel direkt in Ihrem Code zu speichern. Mit dieser Vorgehensweise wird sichergestellt, dass vertrauliche Informationen sicher bleiben und zentral verwaltet werden.

Kann ich eine Verbindung mit Azure OpenAI mit einem API-Schlüssel statt mit verwalteter Identität herstellen?

Ja, Sie können eine Verbindung mit Azure OpenAI herstellen, indem Sie einen API-Schlüssel anstelle der verwalteten Identität verwenden. Das Azure OpenAI SDK und der semantische Kernel unterstützen diesen Ansatz.

Ausführliche Informationen zur Verwendung von API-Schlüsseln mit dem semantischen Kernel finden Sie unter "Erste Schritte mit dem semantischen Kernel".
Ausführliche Informationen zur Verwendung von API-Schlüsseln mit der Azure OpenAI-Clientbibliothek finden Sie unter Verwenden der Azure OpenAI-Antwort-API.

Important

Wenn Sie mit Verbindungsschlüsseln wie API-Schlüsseln in App Service arbeiten, sollten Sie Key Vault-Verweise verwenden , anstatt geheime Schlüssel direkt in Ihrem Code zu speichern. Mit dieser Vorgehensweise wird sichergestellt, dass vertrauliche Informationen sicher bleiben und zentral verwaltet werden.

Wie funktioniert DefaultAzureCredential?

Die DefaultAzureCredential Authentifizierung wird vereinfacht, indem automatisch die beste verfügbare Authentifizierungsmethode ausgewählt wird.

Während der lokalen Entwicklung, nach der Ausführung von az login, werden Ihre lokalen Azure CLI-Anmeldeinformationen von DefaultAzureCredential verwendet.
Für Azure App Service-Bereitstellungen verwendet die DefaultAzureCredential die verwaltete Identität der App für eine sichere, kennwortlose Authentifizierung.

Mit diesem Ansatz kann Ihr Code ohne Änderungen sicher und nahtlos in lokalen und Cloudumgebungen ausgeführt werden.

Feedback

War diese Seite hilfreich?

Last updated on 2026-03-24