Planen Ihrer Azure Static Web App

3 Minuten

Ihr Endziel besteht darin, Ihre App in Azure zu hosten. Azure Static Web Apps stellt automatisch alle erforderlichen Azure-Ressourcen für Sie bereit.

Bevor die App gehostet werden kann, müssen Sie jedoch dafür sorgen, dass Ihre App auch beim Vornehmen von Änderungen erstellt wird. Diese Änderungen können über Commits oder Pull Requests an Ihr Repository erfolgen. Eine wichtige Funktion von Azure Static Web Apps ist die Einrichtung eines GitHub Actions-Workflows zum Erstellen und Veröffentlichen Ihrer Anwendung.

Beim Erstellen der Azure Static Web Apps-Ressource erstellt diese den GitHub Actions-Workflow. Der Workflow wird sofort ausgelöst und übernimmt das Erstellen und Veröffentlichen Ihrer App. Der Workflow wird auch jedes Mal ausgelöst, wenn Sie eine Änderung am überwachten Branch in Ihrem Repository vornehmen.

Azure Static Web Apps

Beim Bereitstellen einer Web-App gibt es zwei automatisierte Aspekte. Der erste stellt die zugrunde liegenden Azure-Ressourcen bereit, aus denen Ihre App besteht. Der zweite ist ein GitHub-Actions-Workflow, mit dem Ihre Anwendung erstellt und veröffentlicht wird.

Wenn Sie Ihre App mit Azure Static Web Apps im Web veröffentlichen, können Sie die Web-App und skalierbare APIs schnell hosten lassen. Außerdem profitieren Sie von einem einheitlichen Erstellungs- und Bereitstellungsworkflow, der von GitHub Actions bereitgestellt wird.

Verbinden Ihrer Static Web Apps-Instanz mit GitHub

Azure Static Web Apps dient zum Hosten von Anwendungen, während sich der Quellcode auf GitHub befindet. Wenn Sie eine Static Web Apps-Instanz erstellen, melden Sie sich bei GitHub an und geben das Repository an, das den Code Ihrer App enthält.

Außerdem müssen Sie drei Ordnerpfade in Ihrem Repository angeben, damit Ihre App automatisch erstellt und bereitgestellt werden kann:

Speicherort	Beispiel für Speicherort	Beschreibung	Erforderlich
App-Speicherort	Client	Speicherort des Quellcodes für die Web-App	Ja
Ausgabeverzeichnis	wwwroot	Speicherort der Buildartefakte Ihrer App	Nein
API-Speicherort	API	Speicherort des Quellcodes für Ihre API	Nein

Der Ausgabespeicherort ist ein relativer Pfad zum Veröffentlichungsverzeichnis Ihrer Anwendung. Angenommen, wir verfügen über eine App in Client, die ihre erstellten Ressourcen in den Ordner bin/<build profile>/<framework>/publish/wwwroot ausgibt. In diesem Fall müssen Sie nur wwwroot für diesen Ort angeben, da das Veröffentlichungssystem den Rest des Präfixes übernimmt.

Vom Quellcode zu statischen Ressourcen mit GitHub Actions

Ihr GitHub-Repository enthält Quellcode und keine statischen Ressourcen. Daher muss er erstellt werden, bevor er veröffentlicht werden kann.

Wenn Sie eine Static Web Apps-Instanz erstellen, erstellt Azure einen GitHub Actions-Workflow in Ihrem Repository. Jedes Mal, wenn Sie Änderungen veröffentlichen oder einen Pull Request für den Branch erstellen, von dem aus Sie veröffentlichen, erstellt die Workflow Ihre App neu. Bei diesem Prozess wird Ihr Quellcode in statische Ressourcen umgewandelt, die von Azure bereitgestellt werden. Nach Abschluss des Buildvorgangs stellt die Aktion die Ressourcen bereit.

Die GitHub-Aktion wird Ihrem Repository im Ordner .github/workflows hinzugefügt. Sie können diese Datei überprüfen und ggf. ändern. Die beim Erstellen der Ressource eingegebenen Einstellungen werden in der Datei der GitHub-Aktion gespeichert.

Integrierte API mit Azure Functions

Wenn Ihre App eine API benötigt, können Sie sie als Azure Functions-Projekt in Ihrem Repository implementieren. Ihre Static Web Apps-Instanz stellt sie dann automatisch bereit und hostet sie. Die GitHub Actions-Workflow, die Ihre App erstellt und bereitstellt, sucht die API in Ihrem Repository anhand des Namens des Ordners, den Sie im API-Speicherpfad angegeben haben.

Sie verfügen noch über keine API? Keine Sorge! Wenn Azure Static Web Apps keine API in dem von Ihnen angegebenen Ordner finden kann, wird keine API veröffentlicht. Ihre App wird trotzdem veröffentlicht.

Nächste Schritte