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 Mainbranch Ihres Repositorys, und wenn sie einen Commit oder Pull Request für Main erkennt, erstellt und veröffentlicht sie Ihre App.
Beim Erstellen der Azure Static Web Apps-Ressource haben Sie den Speicherort für Ihre 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 hier 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. Um die GitHub-Aktion auszulösen, können Sie entweder direkt einen Commit durchführen oder einen Pull Request für den Mainbranch erstellen. Änderungen, die im Mainbranch erkannt werden, lösen die GitHub-Aktion aus, und die App wird unter der gleichen URL wie Ihre 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 Ihrer Änderungen über Vorschau-URLs sehen. Sie können eine Vorschau-URL erstellen, indem Sie einen Pull Request für den Branch erstellen, der von der GitHub-Aktion überwacht wird. Ihre 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, 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 Branch api. Senden Sie einen Pull Request von Ihrem API-Branch an den Mainbranch. 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 Ihre App vollständig erstellt und bereitgestellt hat, fügt der GitHub-Bot dem Pull Request einen Kommentar hinzu, der die URL der Vorproduktionsumgebung enthält. Sie können diesen Link auswählen, um Ihre gestageten Änderungen anzuzeigen.
Anschließend erstellen Sie einen Pull Request und besuchen die gestagete Version der App.