Freigeben über

Bereitstellen einer Blazor-App auf Azure Static Web Apps

  • Artikel

Azure Static Web Apps veröffentlicht eine Website in einer Produktionsumgebung, indem Apps aus einem GitHub-Repository erstellt werden, das von einem serverlosen Back-End unterstützt wird. Im folgenden Tutorial wird gezeigt, wie Sie die C#-Blazor-WebAssembly-App bereitstellen, die von einer serverlosen API zurückgegebene Wetterdaten anzeigt.

Hinweis

Die Schritte zum Bereitstellen einer Blazor-App über Visual Studio finden Sie unter Bereitstellen einer Blazor-App in Azure Static Web Apps.

Voraussetzungen

1. Erstellen eines Repositorys

In diesem Artikel wird ein GitHub-Vorlagenrepository verwendet, um Ihnen den Einstieg zu erleichtern. Die Vorlage umfasst eine Starter-App, die Sie in Azure Static Web Apps bereitstellen können.

  1. Stellen Sie sicher, dass Sie bei GitHub angemeldet sind, und wechseln Sie zum folgenden Speicherort, um ein neues Repository zu erstellen: https://github.com/staticwebdev/blazor-starter/generate.
  2. Geben Sie Ihrem Repository den Namen my-first-static-blazor-app.

2. Erstellen einer statischen Web-App

Nachdem das Repository erstellt wurde, erstellen Sie im Azure-Portal eine statische Web-App.

  1. Öffnen Sie das Azure-Portal.

  2. Klicken Sie auf Ressource erstellen.

  3. Suchen Sie nach Static Web Apps.

  4. Wählen Sie Static Web Apps aus.

  5. Klicken Sie auf Erstellen.

  6. Geben Sie auf der Registerkarte Grundlagen die folgenden Werte ein.

    Eigenschaft Wert
    Abonnement Den Namen Ihres Azure-Abonnements
    Ressourcengruppe my-blazor-group
    Name my-first-static-blazor-app
    Plantyp Free
    Region für Azure Functions-API und Stagingumgebungen Wählen Sie die Region aus, die Ihnen am nächsten ist.
    Quelle GitHub

  7. Wählen Sie Mit GitHub anmelden aus, und authentifizieren Sie sich bei GitHub, wenn Sie dazu aufgefordert werden.

  8. Geben Sie die folgenden GitHub-Werte ein.

    Eigenschaft Wert
    Organisation Wählen Sie Ihre gewünschte GitHub-Organisation aus.
    Repository Wählen Sie my-first-static-blazor-app aus.
    Branch Wählen Sie main aus.

    Hinweis

    Wenn Sie keine Repositories sehen, müssen Sie möglicherweise Azure Static Web Apps auf GitHub autorisieren. Navigieren Sie dann zu Ihrem GitHub-Repository, wechseln Sie zu Einstellungen > Anwendungen > Autorisierte OAuth-Apps, und wählen Sie Azure Static Web Apps und dann Zuweisen aus. Bei Organisationsrepositorys müssen Sie Besitzer der Organisation sein, um die Berechtigungen erteilen zu können.

  9. Wählen Sie im Abschnitt Builddetails in der Dropdownliste Buildvoreinstellungen die Option Blazor aus. Die folgenden Werte werden aufgefüllt:

    Eigenschaft Wert BESCHREIBUNG
    App-Speicherort Client Ordner mit der Blazor-WebAssembly-App
    API-Speicherort API Ordner mit der Azure Functions-App
    Ausgabeverzeichnis wwwroot Ordner in der Buildausgabe mit der veröffentlichten Blazor-WebAssembly-Anwendung

  10. Wählen Sie Überprüfen und erstellen aus, um sicherzustellen, dass alle Details stimmen.

  11. Wählen Sie Erstellen aus, um mit dem Erstellen der statischen Web-App zu beginnen und einen GitHub Actions-Vorgang für die Bereitstellung bereitzustellen.

  12. Wählen Sie nach Abschluss der Bereitstellung Zu Ressource wechseln aus.

  13. Wählen Sie Zu Ressource wechseln aus.

Schaltfläche „Zu Ressource wechseln“

3. Anzeigen der Website

Für die Bereitstellung einer statischen App gelten zwei Aspekte. Der erste Aspekt ist die Bereitstellung der zugrunde liegenden Azure-Ressourcen, aus denen Ihre App besteht. Der zweite Aspekt ist ein GitHub Actions-Workflow, mit dem Ihre Anwendung erstellt und veröffentlicht wird.

Bevor Sie zu Ihrer neuen statischen Web-App wechseln können, muss zuerst die Ausführung des Buildvorgangs für die Bereitstellung abgeschlossen sein.

Im Übersichtsfenster von Azure Static Web Apps werden einige Links angezeigt, die Ihnen als Hilfe bei der Interaktion mit Ihrer Web-App dienen.

  1. Wählen Sie das Banner Hier klicken, um den Status Ihrer GitHub Actions-Ausführungen zu überprüfen aus, um die GitHub Actions-Instanzen anzuzeigen, die für Ihr Repository ausgeführt werden. Nachdem Sie sich vergewissert haben, dass der Bereitstellungsauftrag abgeschlossen ist, können Sie über die generierte URL zu Ihrer Website wechseln.

    Screenshot des Übersichtsfensters.

  2. Nachdem der GitHub Actions-Workflow abgeschlossen ist, können Sie den URL-Link auswählen, um die Website auf einer neuen Registerkarte zu öffnen.

    Screenshot der Static Web Apps Blazor-Webseite.

4. Grundlegendes zur Anwendungsübersicht

Zusammen bilden die folgenden Projekte die Teile, die zum Erstellen einer Blazor-WebAssembly-Anwendung erforderlich sind, die in dem von einem Azure Functions-API-Back-End unterstützten Browser ausgeführt wird.

Visual Studio-Projekt Beschreibung
API Die Azure Functions-C#-Anwendung implementiert den API-Endpunkt zur Bereitstellung von Wetterinformationen für die Blazor-WebAssembly-App. Die Funktion WeatherForecastFunction gibt ein Array mit WeatherForecast-Objekten zurück.
Client Das Blazor-WebAssembly-Front-End-Projekt. Eine Fallbackroute wird implementiert, um sicherzustellen, dass das clientseitige Routing funktioniert.
Shared Enthält gemeinsame Klassen, die sowohl von der API als auch von den Clientprojekten referenziert werden, damit Daten vom API-Endpunkt an die Front-End-Web-App übertragen werden können. Die Klasse WeatherForecast wird von beiden Apps gemeinsam genutzt.

Statische Blazor-Web-AppBlazor-App fertigstellen.

Fallbackroute

Die Anwendung macht URLs wie /counter und /fetchdata verfügbar, die bestimmten Routen der Anwendung zugeordnet sind. Da diese App als Single-Page-Webanwendung implementiert ist, wird jeder Route die Datei index.html bereitgestellt. Um sicherzustellen, dass bei Anforderungen eines beliebigen Pfads die Datei index.html zurückgegeben wird, wird in der Datei staticwebapp.config.json, die sich im Stammordner des Clientprojekts befindet, eine Fallbackroute implementiert.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Mit der JSON-Konfiguration wird sichergestellt, dass bei jeglichen Anforderungen an eine beliebige Route in der App die Seite index.html zurückgegeben wird.

Bereinigen von Ressourcen

Falls Sie diese Anwendung nicht nutzen werden, können Sie die Azure Static Web Apps-Instanz mit den folgenden Schritten löschen:

  1. Öffnen Sie das Azure-Portal.
  2. Suchen Sie in der oberen Suchleiste nach my-blazor-group.
  3. Wählen Sie den Gruppennamen aus.
  4. Klicken Sie auf Löschen.
  5. Klicken Sie zum Bestätigen des Löschvorgangs auf Ja.

Nächste Schritte

Authentifizieren und Autorisieren