Freigeben über

Schnellstart: Erstellen und Bereitstellen einer Python-Web-App aus GitHub Codespaces in Azure mithilfe einer Azure Developer CLI-Vorlage

  • Artikel

Diese Schnellstartanleitung führt Sie durch die einfachste und schnellste Methode zum Erstellen und Bereitstellen einer Python-Web- und Datenbanklösung in Azure. Befolgen Sie die Anweisungen in dieser Schnellstartanleitung:

  • Wählen Sie eine Azure Developer CLI (azd)-Vorlage basierend auf dem Python-Webframework, der Azure-Datenbankplattform und der Azure-Webhostingplattform aus, auf der Sie aufbauen möchten.
  • Erstellen Sie einen neuen GitHub Codespace mit Code, der aus der azd ausgewählten Vorlage generiert wurde.
  • Verwenden Sie GitHub Codespaces und das Bash-Terminal von Visual Studio Code. Mit dem Terminal können Sie Azure Developer CLI-Befehle verwenden, um eine Vorlage zum Erstellen einer azd Beispiel-Web-App und -Datenbank auszuführen und die erforderlichen Azure-Ressourcen zu erstellen und zu konfigurieren und dann die Beispielweb-App in Azure bereitzustellen.
  • Bearbeiten Sie die Web-App in einem GitHub Codespace, und verwenden Sie einen azd Befehl zum erneuten Bereitstellen.
  • Verwenden Sie einen azd Befehl, um Azure-Ressourcen zu sauber.
  • Schließen Sie Ihren GitHub Codespace, und öffnen Sie es erneut.
  • Veröffentlichen Sie Ihren neuen Code in einem GitHub-Repository.

Es sollte weniger als 25 Minuten dauern, bis dieses Lernprogramm abgeschlossen ist. Nach Abschluss können Sie mit dem Ändern des neuen Projekts mit Ihrem benutzerdefinierten Code beginnen.

Weitere Informationen zu diesen azd Vorlagen für die Entwicklung von Python Web App:

Voraussetzungen

Wichtig

Sowohl GitHub Codespaces als auch Azure sind kostenpflichtige abonnementbasierte Dienste. Nach einigen kostenlosen Zuteilungen werden Ihnen möglicherweise die Nutzung dieser Dienste in Rechnung gestellt. Nach dieser Schnellstartanleitung kann sich dies auf diese Anteilungen oder abrechnungen auswirken. Wenn möglich, wurden die azd Vorlagen mit den am wenigsten kostspieligen Optionen erstellt, aber einige sind möglicherweise nicht kostenlos. Verwenden Sie den Azure-Preisrechner , um die Kosten besser zu verstehen. Weitere Informationen finden Sie unter GitHub Codespaces-Preise für weitere Details.

Wählen Sie eine Vorlage aus, und erstellen Sie einen Codespace.

Wählen Sie eine azd Vorlage basierend auf dem Python-Webframework, der Azure-Webhostingplattform und der Azure-Datenbankplattform aus, auf der Sie aufbauen möchten.

  1. Wählen Sie in der folgenden Liste der Vorlagen eine Vorlage aus, die die Technologien verwendet, die Sie in Ihrer neuen Webanwendung verwenden möchten.

    Vorlage WebFramework Datenbank Hostingplattform Neuer Codespace
    azure-django-postgres-flexible-aca Django PostgreSQL Flexible Server Azure Container Apps Neuer Codespace
    azure-django-postgres-flexible-appservice Django PostgreSQL Flexible Server Azure App Service Neuer Codespace
    azure-django-cosmos-postgres-aca Django Cosmos DB (PostgreSQL Adapter) Azure Container Apps Neuer Codespace
    azure-django-cosmos-postgres-appservice Django Cosmos DB (PostgreSQL Adapter) Azure App Service Neuer Codespace
    azure-django-postgres-addon-aca Django Azure Container Apps PostgreSQL-Add-On Azure Container Apps Neuer Codespace

  1. Aus Gründen der Einfachheit enthält die letzte Spalte jeder Tabelle einen Link, der ein neues Codespace erstellt und die azd Vorlage in Ihrem GitHub-Konto initialisiert. Klicken Sie mit der rechten Maustaste, und wählen Sie "In neuer Registerkarte öffnen" im Link "Neuer Codespace" neben dem Vorlagennamen aus, den Sie ausgewählt haben, um den Setupvorgang zu initiieren.

    Während dieses Vorgangs werden Sie möglicherweise aufgefordert, sich bei Ihrem GitHub-Konto anzumelden, und Sie werden aufgefordert, zu bestätigen, dass Sie den Codespace erstellen möchten. Wählen Sie die Schaltfläche "Codespace erstellen" aus, um die Seite "Einrichten Des Codespaces" anzuzeigen.

  2. Nach ein paar Minuten wird eine webbasierte Version von Visual Studio Code in eine neue Browserregisterkarte geladen, wobei die Python-Webvorlage als Arbeitsbereich in der Explorer-Ansicht geladen wurde.

Authentifizieren bei Azure und Bereitstellen der azd-Vorlage

Nachdem Sie nun über einen GitHub Codespace verfügen, der den neu generierten Code enthält, verwenden Sie das azd Hilfsprogramm aus dem Codespace, um den Code in Azure zu veröffentlichen.

  1. Im webbasierten Visual Studio Code sollte das Terminal standardmäßig geöffnet sein. Wenn dies nicht der Grund ist, verwenden Sie die Tilde-Taste ~ , um das Terminal zu öffnen. Darüber hinaus sollte das Terminal standardmäßig ein Bash-Terminal sein. Wenn dies nicht der Richtige ist, wechseln Sie in bash im oberen rechten Bereich des Terminalfensters.

  2. Geben Sie im Bash-Terminal den folgenden Befehl ein:

    azd auth login

    azd auth login beginnt mit der Authentifizierung Ihres Codespaces für Ihr Azure-Konto.

    Start by copying the next code: XXXXXXXXX
Then press enter and continue to log in from your browser...

Waiting for you to complete authentication in the browser...

  3. Folgen Sie den Anweisungen, die Folgendes enthalten:

    • Kopieren eines generierten Codes
    • Auswählen der EINGABETASTE zum Öffnen einer neuen Browserregisterkarte und Einfügen des Codes in das Textfeld
    • Auswählen Ihres Azure-Kontos aus einer Liste
    • Bestätigen, dass Sie sich bei Microsoft Azure CLI anmelden möchten

  4. Bei erfolgreicher Ausführung wird die folgende Meldung wieder auf der Registerkarte "Codespaces" am Terminal angezeigt:

    Device code authentication completed.
Logged in to Azure.

  5. Stellen Sie Ihre neue Anwendung in Azure bereit, indem Sie den folgenden Befehl eingeben:

    azd up

    Während dieses Vorgangs werden Sie aufgefordert:

    • Geben Sie einen neuen Umgebungsnamen ein.
    • Wählen Sie ein Azure-Abonnement aus, um [Zu verschiebende Pfeile verwenden, zum Filtern eingeben]
    • Wählen Sie einen zu verwendenden Azure-Speicherort aus: [Zum Verschieben verwenden, Typ zum Filtern verwenden]

    Sobald Sie diese Fragen beantwortet haben, zeigt die Ausgabe azd an, dass die Bereitstellung voranschreitet.

    Wichtig

    Nach azd up erfolgreicher Ausführung ist die Beispielweb-App im öffentlichen Internet verfügbar, und Ihr Azure-Abonnement beginnt mit der Fälligkeit von Gebühren für alle ressourcen, die erstellt werden. Die Ersteller der azd Vorlagen wählten absichtlich preiswerte Stufen, aber nicht unbedingt kostenlose Stufen, da kostenlose Stufen oft eingeschränkte Verfügbarkeit haben. Nachdem Sie die Arbeit mit der Beispielweb-App abgeschlossen haben, verwenden Sie diese Option azd down , um alle Dienste zu entfernen, die von azd up.

    Folgen Sie den Anweisungen, wenn Sie aufgefordert werden, azure-Abonnement für die Zahlung auszuwählen, und wählen Sie dann einen azure-Speicherort aus, der verwendet werden soll. Wählen Sie eine Region aus, die ihnen geografisch nahe liegt.

    Die azd up Ausführung kann mehrere Minuten dauern, da mehrere Azure-Dienste bereitgestellt und bereitgestellt werden. Achten Sie bei der Anzeige des Fortschritts auf Fehler. Wenn Fehler angezeigt werden, lesen Sie den Abschnitt "Problembehandlung " unten in diesem Dokument.

  6. Nach azd up erfolgreicher Ausführung wird eine ähnliche Ausgabe angezeigt:

    (✓) Done: Deploying service web
- Endpoint: https://xxxxx-xxxxxxxxxxxxx-ca.example-xxxxxxxx.westus.azurecontainerapps.io/

SUCCESS: Your application was provisioned and deployed to Azure in 11 minutes 44 seconds.
You can view the resources created under the resource group xxxxx-rg in Azure Portal:
https://portal.azure.com/#@/resource/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/xxxxx-rg/overview

    Wenn ein Standardbildschirm oder Fehlerbildschirm angezeigt wird, wird die App möglicherweise gestartet. Warten Sie 5 bis 10 Minuten, um festzustellen, ob das Problem vor der Problembehandlung behoben wird.

    Strg+ klicken Sie auf die erste URL nach dem Wort - Endpoint: , um das Beispiel-Web-App-Projekt anzuzeigen, das live in Azure ausgeführt wird.

  7. Strg+ klicken Sie im vorherigen Schritt auf die zweite URL, um die bereitgestellten Ressourcen im Azure-Portal anzuzeigen.

Bearbeiten und erneutes Bereitstellen

Der nächste Schritt besteht darin, eine kleine Änderung an der Web-App vorzunehmen und dann erneut bereitzustellen.

  1. Kehren Sie zur Browserregisterkarte zurück, die Visual Studio Code enthält, und navigieren Sie mit der Explorer-Ansicht von Visual Studio Code zum Ordner "src/templates ", und öffnen Sie die Datei "index.html ". Suchen Sie folgende Codezeile:

    <h1 id="page-title">Welcome to ReleCloud</h1>

    Ändern sie den Text innerhalb von H1:

    <h1 id="page-title">Welcome to ReleCloud - UPDATED</h1>

    Ihr Code wird während der Eingabe gespeichert.

  2. Um die App mit Ihrer Änderung erneut bereitzustellen, führen Sie den folgenden Befehl im Terminal aus:

    azd deploy

  3. Sobald der Befehl abgeschlossen ist, aktualisieren Sie die Browserregisterkarte mit der ReleCloud-Website, um das Update anzuzeigen. Je nachdem, welche Webhostingplattform verwendet wird, kann es mehrere Minuten dauern, bis Ihre Änderungen sichtbar sind.

    Jetzt können Sie Dateien in der Vorlage bearbeiten und löschen. Weitere Informationen finden Sie unter Was kann ich in der Vorlage bearbeiten oder löschen?

Bereinigen von Ressourcen

Bereinigen Sie die von der Vorlage erstellten Ressourcen, indem Sie den Befehl "azd down " ausführen.

azd down

Der azd down Befehl löscht die Azure-Ressourcen und den GitHub-Aktionen-Workflow. Wenn Sie dazu aufgefordert werden, stimmen Sie dem Löschen aller Ressourcen zu, die der Ressourcengruppe zugeordnet sind.

Optional: Suchen des Codespaces

In diesem Abschnitt wird veranschaulicht, wie Ihr Code in einem Codespace (vorübergehend) ausgeführt und dauerhaft beibehalten wird. Wenn Sie beabsichtigen, den Code weiterhin zu bearbeiten, sollten Sie den Code in einem neuen Repository veröffentlichen.

  1. Schließen Sie alle Registerkarten, die sich auf diesen Schnellstartartikel beziehen, oder beenden Sie Ihren Webbrowser vollständig.

  2. Öffnen Sie Ihren Webbrowser und eine neue Registerkarte, und navigieren Sie zu: https://github.com/codespaces

  3. Unten sehen Sie eine Liste der zuletzt verwendeten Codespaces. Suchen Sie nach dem, das Sie in einem Abschnitt mit dem Titel "Owned by Azure-Samples" erstellt haben.

  4. Wählen Sie die Auslassungspunkte rechts neben diesem Codespace aus, um ein Kontextmenü anzuzeigen. Von hier aus können Sie den Codespace umbenennen, in einem neuen Repository veröffentlichen, den Computertyp ändern, den Codespace beenden und vieles mehr.

Optional: Veröffentlichen eines GitHub-Repositorys aus Codespaces

An diesem Punkt verfügen Sie über einen Codespace, der von GitHub gehostet wird, in dem Ihre Visual Studio Code-Entwicklungsumgebung mit ihrem neuen Code aus einer azd Vorlage generiert wird. Der Code wird jedoch nicht in einem GitHub-Repository gespeichert. Wenn Sie beabsichtigen, den Code weiterhin zu bearbeiten, sollten Sie dies als Priorität festlegen.

  1. Wählen Sie im Kontextmenü für den Codespace "In einem neuen Repository veröffentlichen" aus.
  2. Benennen Sie im Dialogfeld "In einem neuen Repository veröffentlichen" Ihr neues Repository um, und wählen Sie aus, ob es sich um ein öffentliches oder privates Repository handelt. Wählen Sie "Repository erstellen" aus.
  3. Nach ein paar Momenten wird das Repository erstellt, und der Code, den Sie zuvor in dieser Schnellstartanleitung generiert haben, wird an das neue Repository übertragen. Wählen Sie die Schaltfläche "Repository anzeigen" aus, um zum neuen Repository zu navigieren.
  4. Um den Bearbeitungscode erneut zu öffnen und den Bearbeitungscode fortzusetzen, wählen Sie die grüne Dropdownliste "<> Code" aus, wechseln Sie zur Registerkarte "Codespaces", und wählen Sie den Namen des Codespaces aus, an dem Sie zuvor gearbeitet haben. Jetzt sollten Sie zur Codespace Visual Studio Code-Entwicklungsumgebung zurückkehren.
  5. Verwenden Sie den Bereich "Quellcodeverwaltung", um neue Verzweigungen zu erstellen und neue Änderungen an Ihrem Code zu übernehmen.

Problembehandlung

Wenn während der Ausführung azd upFehler angezeigt werden, versuchen Sie Folgendes:

  • Führen Sie die Ausführung aus azd down , um alle Ressourcen zu entfernen, die möglicherweise erstellt wurden. Alternativ können Sie die Im Azure-Portal erstellte Ressourcengruppe löschen.
  • Wechseln Sie zur Seite "Codespaces" für Ihr GitHub-Konto, suchen Sie den codespace, der während dieser Schnellstartanleitung erstellt wurde, wählen Sie die Auslassungspunkte rechts aus, und wählen Sie im Kontextmenü "Löschen" aus.
  • Suchen Sie im Azure-Portal nach Key Vaults. Wählen Sie zum Verwalten gelöschter Tresore, wählen Sie Ihr Abonnement aus, wählen Sie alle Schlüsseltresor aus, die den Namen azdtest oder den Namen Ihrer Umgebung enthalten, und wählen Sie "Löschen" aus.
  • Wiederholen Sie die Schritte in dieser Schnellstartanleitung. Wählen Sie in diesem Fall, wenn Sie dazu aufgefordert werden, einen einfacheren Namen für Ihre Umgebung aus. Probieren Sie einen kurzen Namen, Kleinbuchstaben, keine Zahlen, keine Großbuchstaben, keine Sonderzeichen aus.
  • Wenn Sie die Schnellstartschritte wiederholen, wählen Sie einen anderen Speicherort aus.

Eine umfassendere Liste möglicher Probleme und Lösungen finden Sie in den häufig gestellten Fragen .

Zugehöriger Inhalt