Veröffentlichen der API mit GitHub Actions

Abgeschlossen

Sie haben die API Ihrer Web-App hinzugefügt, und beide werden lokal ausgeführt. Nun müssen Sie die API und die App in Azure Static Web Apps veröffentlichen.

Als Sie die Azure Static Web Apps-Instanz erstellt und für die Überwachung des main-Branch konfiguriert haben, wurde automatisch eine GitHub-Aktion generiert. Die GitHub-Aktion lauscht auf Commits und Pull Requests an den main-Branch Ihres Repositorys. Wenn diese Änderungen von der GitHub-Aktion erkannt werden, wird die App erstellt und veröffentlicht.

Beim Erstellen der Azure Static Web Apps-Ressource haben Sie den Speicherort für die API angegeben. Sie haben den Standardwert api angegeben. Da Sie zu diesem Zeitpunkt im Ordner api jedoch noch über keine API verfügten, hat Azure Static Web Apps nicht versucht, eine API zu veröffentlichen.

Dies ist jedoch nun anders.

Konfiguration der GitHub-Aktion

Der Ordner .github/workflows enthält Ihre Datei für die GitHub-Aktion. Die Datei enthält die Einstellungen für die Speicherorte der Web-App, der API und der Buildartefakte. Die Speicherorte, die Sie beim Erstellen Ihrer Azure Static Web Apps-Ressource ausgewählt haben, befinden sich jetzt wie unten dargestellt in dieser Datei:

app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional
app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional
app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional

api_location ist auf den richtigen Wert festgelegt und zeigt auf die API im Ordner api.

Auslösen der GitHub-Aktion

Sobald die GitHub-Aktion eine Änderung des main-Branch erkennt, ist sie bereit, die Web-App und die API zu erstellen und zu veröffentlichen. Sie können entweder direkt einen Commit durchführen oder einen Pull Request für den main-Branch erstellen. In beiden Fällen wird die GitHub-Aktion auslöst. Änderungen, die im main-Branch erkannt werden, lösen die GitHub-Aktion aus, und die App wird unter derselben URL wie die Livewebsite veröffentlicht.

Vorschau-URLs

Gelegentlich möchten Sie Ihre Änderungen auf einer Stagingsite anzeigen, bevor Sie sie auf der Livewebsite veröffentlichen. Mit Azure Static Web Apps können Sie eine Vorschau der Änderungen über Vorschau-URLs aufrufen. Sie können eine Vorschau-URL erstellen, indem Sie einen Pull Request für den Branch erstellen, der von der GitHub-Aktion überwacht wird. Die Livewebsite ist davon nicht betroffen. Stattdessen wird eine neue Stagingversion der App erstellt. Wenn Sie zurückwechseln und Ihren Pull Request auf GitHub überprüfen, stellen Sie fest, dass auf der Registerkarte „Unterhaltung“ ein Link zur Stagingversion angezeigt wird.

In der folgenden Tabelle wird veranschaulicht, wie Ihre App von Azure Static Web Apps unter verschiedenen URLs veröffentlicht wird. Ihre App wird unter einer URL veröffentlicht, während ein Pull Request desselben Branches unter einer anderen URL veröffentlicht wird.

Quelle BESCHREIBUNG URL
main-Branch URL der Livewebsite https://purple-rain-062d03304.azurestaticapps.net/
Pull Request #5 Vorschau-URL https://purple-rain-062d03304-5.azurestaticapps.net/

Derzeit arbeiten Sie im Branch api. Sie senden einen Pull Request aus Ihrem api-Branch an den main-Branch. Wenn Sie den Pull Request für den main-Branch erstellen, veröffentlicht die GitHub-Aktion die App unter einer Vorschau-URL.

Sobald der Workflow die App vollständig erstellt und bereitgestellt hat, fügt der GitHub-Bot dem Pull Request einen Kommentar hinzu, welcher die URL der Präproduktionsumgebung enthält. Sie können auf diesen Link klicken, um die gestageten Änderungen anzuzeigen.

Anschließend erstellen Sie einen Pull Request und besuchen die gestagete Version der App.