Ü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-Portal an, und stellen Sie sicher, dass Sie dasselbe Konto zum Anmelden wie zum Aktivieren der Sandbox verwenden.

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

  3. Suchen Sie im Marketplace-Suchfeld nach Static Web App, und wählen Sie sie aus. Der Bereich "Statische Web App " wird angezeigt.

  4. Wählen Sie "Erstellen" aus. Der Bereich "Statische Web App erstellen " wird angezeigt. Konfigurieren Sie die neue App, und verknüpfen Sie sie mit Ihrem GitHub-Repository.

  5. Geben Sie auf der Registerkarte " Grundlagen " die folgenden Werte für jede Einstellung ein.

    Einstellung Wert
    Projektdetails
    Abonnement Concierge-Abonnement
    Ressourcengruppe [Name der Sandkastenressourcengruppe]
    Details zu statischer 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 "Kostenlos" aus.
    Details zu Azure-Funktionen und Staging
    Region für Azure Functions-API und Stagingumgebungen Wählen Sie die nächstgelegene Region aus.
    Bereitstellungsdetails
    `Source` GitHub auswählen
    GitHub-Konto Wählen Sie "Anmelden mit GitHub" aus. Der Bereich "Statische Azure Web Apps autorisieren " wird angezeigt. Wählen Sie "Azure-App-Service-Static-Web-Apps autorisieren" aus. Geben Sie das Kennwort ein.
    Organisation Wählen Sie hier die Organisation aus, in der Sie das Repository erstellt haben.
    Aufbewahrungsort my-static-blazor-app
    Verzweigung Standard
    Build Details
    Buildvoreinstellungen Blazor
    App-Speicherort Kunde
    API-Speicherort API
    Ausgabeverzeichnis wwwroot

  6. Wählen Sie "Überprüfen" und "Erstellen" aus>.

  7. Wählen Sie nach Abschluss der Bereitstellung die Option "Zur Ressource wechseln" aus. Ihr Bereich "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 den folgenden Link auswählen, um zur Seite "Aktionen " Ihres GitHub-Repositorys zu wechseln:

Screenshot, der zeigt, wie man den Fortschritt des GitHub Actions-Workflows ansehen kann.

Befolgen Sie dort diese Schritte:

  1. Wählen Sie Azure Static Web Apps CI/CD aus.

  2. Wählen Sie den Commit mit dem Titel "ci" aus: Fügen Sie die Workflowdatei "Azure Static Web Apps" hinzu.

  3. Wählen Sie den Link " Auftrag erstellen und bereitstellen " 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.

Wählen Sie den URL-Link im Azure-Portal aus, um Ihre App im Browser zu besuchen.

Ihre App ist jetzt global verfügbar, zeigt aber dennoch Daten werden geladen, da noch keine Daten oder API vorhanden sind. 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.