Veröffentlichen der API mit GitHub Actions
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 Änderungen am main-Branch Ihres Repositorys, und wenn es einen Commit oder eine Pull-Anfrage zu main erkennt, erstellt und veröffentlicht es Ihre App.
Möglicherweise erinnern Sie sich daran, dass Sie, als Sie die Azure Static Web Apps-Ressource erstellt haben, den Ordner für die API angegeben haben. Sie haben den Standardwert der API bereitgestellt. Da Sie jedoch zu diesem Zeitpunkt keine API im API-Ordner haben, hat Azure Static Web Apps nicht versucht, eine API zu veröffentlichen.
Jetzt ändert sich alles.
GitHub-Aktionskonfiguration
Der Ordner ".github/workflows " enthält Ihre GitHub Action-Datei. 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 nun in dieser Datei, wie hier gezeigt:
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
Sie api_location ist auf den richtigen Wert festgelegt, um auf Ihre API in Ihrem API-Ordner zu verweisen.
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. Um die GitHub-Aktion auszulösen, können Sie entweder direkt einen Commit ausführen oder eine Pullanforderung an den Hauptzweig erstellen. Änderungen, die in der Hauptzweigung erkannt werden, lösen die GitHub-Aktion aus, um die App unter derselben URL für Ihre Livewebsite zu veröffentlichen.
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 Ihrer Änderungen über Vorschau-URLs anzeigen. Sie können eine Vorschau-URL erstellen, indem Sie eine Pullanforderung für den Branch erstellen, den Ihre GitHub-Aktion überwacht. Ihre Livewebsite ist davon nicht betroffen. Stattdessen wird eine neue Stagingversion Ihrer App erstellt. Wenn Sie zurückwechseln und Ihren Pull Request auf GitHub überprüfen, sollten Sie auf der Registerkarte „Unterhaltung“ einen Link zur Stagingversion sehen.
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 api-Zweig. Erstellen Sie eine Pullanforderung von Ihrem API-Branch an die Hauptzweigung . Wenn Sie die Pullanforderung für den Hauptzweig erstellen, veröffentlicht gitHub Action die App in einer Vorschau-URL.
Sobald der Workflow die Erstellung und Bereitstellung Ihrer App abgeschlossen hat, fügt der GitHub-Bot Ihrer Pullanforderung einen Kommentar hinzu, der die URL der Preproduction-Umgebung enthält. Sie können diesen Link auswählen, um die gestageten Änderungen anzuzeigen.
Anschließend erstellen Sie einen Pull Request und besuchen die gestagete Version der App.