Übung: Erstellen einer Azure Static Web Apps-Instanz

  • 5 Minuten

In dieser Übung erstellen Sie eine Azure Static Web Apps-Instanz einschließlich einer GitHub-Aktion, die Ihre Anwendung automatisch erstellt und veröffentlicht.

Erstellen einer Static Web App

Nachdem Sie nun Ihr GitHub-Repository erstellt haben, können Sie über das Azure-Portal eine Static Web Apps-Instanz erstellen.

In diesem Modul wird Ihnen über die Azure-Sandbox ein kostenloses, temporäres Azure-Abonnement zur Verfügung zu stellen, mit dem Sie diese Übung durcharbeiten können. Bevor Sie fortfahren, stellen Sie sicher, dass Sie die Sandbox oben auf dieser Seite aktivieren.

  1. Melden Sie sich beim Azure-Portalan. Stellen Sie sicher, dass Sie sich mit dem Konto anmelden, mit dem Sie auch die Sandbox aktiviert haben.

  2. Wählen Sie in Azure auf der Startseite unter Azure-Dienste die Option Ressource erstellen aus. Der Bereich Ressource erstellen wird angezeigt.

  3. Suchen Sie im Suchfeld Marketplace durchsuchen nach Statische Web-App, und klicken Sie darauf. Der Bereich Statische Web-App wird angezeigt.

  4. Klicken Sie auf Erstellen. Der Bereich Statische Web-App erstellen wird angezeigt. Konfigurieren Sie die neue App, und verknüpfen Sie sie mit Ihrem GitHub-Repository.

  5. Füllen Sie auf der Registerkarte Grundlagen die folgenden Felder für jede Einstellung aus.

    Einstellung Wert
    Projektdetails
    Subscription Concierge-Abonnement
    Ressourcengruppe [Sandbox-Ressourcengruppenname]
    Details zur statischen Web-App
    Name Geben Sie Ihrer App einen Namen. Gültige Zeichen sind a-z (keine Beachtung von Groß-/Kleinschreibung), 0-9 und -.
    Hostingplan
    Tarif für Ihre Anwendung Wählen Sie Free aus.
    Details zu Azure Functions und Staging
    Region für Azure Functions-API und Stagingumgebungen Wählen Sie die nächstgelegene Region aus.
    Bereitstellungsdetails
    `Source` Wählen Sie GitHub aus.
    GitHub-Konto Wählen Sie Mit GitHub anmelden aus. Der Bereich Authorize Azure Static Web Apps (Azure Static Web Apps autorisieren) wird angezeigt. Wählen Sie Azure Static Web Apps autorisieren aus. Geben Sie das Kennwort ein.
    Organization Wählen Sie hier die Organisation aus, in der Sie das Repository erstellt haben.
    Repository my-static-blazor-app
    Verzweigung Standard
    Builddetails
    Buildvoreinstellungen Blazor
    App-Speicherort Client
    API-Speicherort API
    Ausgabeverzeichnis wwwroot

  6. Wählen Sie Bewerten + erstellen>Erstellen aus.

  7. Klicken Sie nach Abschluss der Bereitstellung auf Zu Ressource wechseln. Der Bereich für Ihre Statische Web-App wird angezeigt.

Überprüfen der GitHub-Aktion

In dieser Phase wird Ihre Static Web Apps-Instanz in Azure erstellt, die App wird jedoch noch nicht bereitgestellt. Die GitHub Aktion, die Azure in Ihrem Repository erstellt, wird automatisch ausgeführt, um den ersten Build und die Bereitstellung Ihrer App auszulösen, aber es dauert ein paar Minuten, bis sie abgeschlossen ist.

Sie können den Status Ihrer Build- und Bereitstellungsaktion überprüfen, indem Sie über den folgenden Link zur Seite Actions Ihres GitHub-Repositorys navigieren:

Screenshot showing how to browse to see the progress of the GitHub Actions workflow.

Befolgen Sie dort diese Schritte:

  1. Klicken Sie auf Azure Static Web Apps CI/CD.

  2. Klicken Sie auf den Commit mit dem Titel ci: add Azure Static Web Apps workflow file.

  3. Wählen Sie den Link Build and Deploy Job aus.

Von hier aus können Sie den Status der App während der Erstellung verfolgen.

Anzeigen der Website

Sobald die GitHub-Aktion das Erstellen und Veröffentlichen der Web-App abgeschlossen hat, können Sie die ausgeführte App überprüfen.

Klicken Sie im Azure-Portal auf den Link URL, um die App im Browser aufzurufen.

Screenshot of the Azure Static Web Apps overview page.

Ihre App ist jetzt allgemein verfügbar. Da es aber noch keine Daten oder API gibt, wird immer noch Daten werden geladen angezeigt. Im nächsten Abschnitt fügen Sie die API für die Web-App hinzu.

Herzlichen Glückwunsch! Sie haben Ihre erste App in Azure Static Web Apps bereitgestellt!

Hinweis

Machen Sie sich keine Sorgen, wenn eine Webseite angezeigt wird, die besagt, dass die App noch nicht erstellt und bereitgestellt wurde. Aktualisieren Sie die Anzeige des Browsers nach einer Minute. Die GitHub-Aktion wird automatisch ausgeführt, wenn die Azure Static Web Apps-Instanz erstellt wird. Bei Anzeige der Begrüßungsseite wird die Bereitstellung der App noch ausgeführt.

Nächste Schritte

In der App fehlt eine API für ihre Einkaufsliste. Als nächstes erfahren Sie, wie Sie Ihrer App eine Azure Functions-API hinzufügen, die neben den statischen Ressourcen in Azure veröffentlicht wird.