Bereitstellen einer Blazor-App auf Azure Static Web Apps

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

Voraussetzungen

• GitHub -Konto
• Azure-Konto. Falls Sie noch nicht über ein Azure-Abonnement verfügen, können Sie ein kostenloses Testkonto erstellen.

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
   Ausgabeort	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.

3. Website anzeigen

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.

   

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.

   

4. Die Anwendungsübersicht verstehen

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-App.

Ausweichroute

Die Anwendung macht URLs wie /counter und /fetchdata verfügbar, die bestimmten Routen der Anwendung zugeordnet sind. Da diese App als Single-Page-Anwendung implementiert ist, wird für jede Route die Datei index.html ausgeliefert. Um sicherzustellen, dass Anfragen für jeden beliebigen Pfad index.html zurückgeben, wird im Stammordner des Clientprojekts in der Datei staticwebapp.config.json 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.

Bereitstellung aus Visual Studio

Alternativ zur Bereitstellung über GitHub Actions können Sie direkt aus Visual Studio Azure Static Web Apps bereitstellen. Erstellen Sie ein Veröffentlichungsprofil für Azure Static Web Apps:

1. Wählen Sie auf der Benutzeroberfläche Veröffentlichen in Visual Studio Ziel>Azure>Bestimmtes Ziel>Azure Static Web Apps aus, um ein Veröffentlichungsprofil zu erstellen.

2. Geben Sie in der Konfiguration des Veröffentlichungsprofils den Namen des Abonnements an. Wählen Sie eine vorhandene Instanz aus, oder wählen Sie Neue Instanz erstellen aus. Legen Sie beim Erstellen einer neuen Instanz auf der Benutzeroberfläche Statische Web-App erstellen im Azure-Portal Bereitstellungsdetails>Quelle auf Andere fest. Warten Sie, bis die Bereitstellung im Azure-Portal abgeschlossen ist, bevor Sie fortfahren.

3. Wählen Sie in der Konfiguration des Veröffentlichungsprofils die Azure Static Web Apps-Instanz aus der Ressourcengruppe der Instanz aus. Wählen Sie Fertig stellen aus, um das Veröffentlichungsprofil zu erstellen. Wenn Visual Studio zur Installation der Static Web Apps CLI (SWA) auffordert, installieren Sie die CLI, indem Sie die Aufforderungen befolgen. Für die SWA CLI ist npm/Node.js (Visual Studio-Dokumentation) erforderlich.

Nachdem das Veröffentlichungsprofil erstellt wurde, stellen Sie die App in der Azure Static Web Apps-Instanz mithilfe des Veröffentlichungsprofils bereit, indem Sie die Schaltfläche Veröffentlichen auswählen.

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

Verwandte Artikel

• Einrichten von Authentifizierung und Autorisierung
• Konfigurieren von App-Einstellungen
• Aktivieren der Überwachung
• Azure-Befehlszeilenschnittstelle