Übung: Veröffentlichen der API mit GitHub Actions

Abgeschlossen

Ihre Web-App und die API werden lokal ausgeführt. Nun ist es an der Zeit, die Web-App und die API in Azure Static Web Apps zu veröffentlichen.

Übertragen der Änderungen mittels Push an GitHub

Sie haben in der vorherigen Übung Änderungen an Ihrer API vorgenommen. Übernehmen Sie diese Änderungen an der API-Branch, und übertragen Sie sie auf GitHub, indem Sie die folgenden Schritte befolgen:

1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie F1 drücken
2. Geben Sie folgenden Befehl ein, und wählen Sie ihn aus: Git: Commit für alle ausführen. Wenn Sie von Visual Studio Code aufgefordert werden, alle Änderungen automatisch zu stufen und direkt zu übernehmen, wählen Sie "Ja" aus.
3. Geben Sie eine Commit-Nachricht ein, z. B. API-Änderungen
4. Öffnen der Befehlspalette durch Drücken von F1
5. Geben Sie Git: Push ein und wählen Sie es aus.
6. Wenn Sie mit der Meldung Die Verzweigung 'api' hat keine Upstream-Verzweigung. Möchten Sie diese Verzweigung veröffentlichen? aufgefordert werden, drücken Sie die Schaltfläche "OK".

Erstellen einer Pullanforderung

Sie haben Ihren API-Branch auf GitHub hochgeladen. Nun soll die GitHub-Aktion Ihre Web-App und die API in einer Vorschau-URL veröffentlichen. Ihr nächster Schritt besteht also darin, eine Pullanforderung für den Hauptzweig zu erstellen.

1. Öffnen eines Browsers

2. Navigieren Sie zu Ihrem Repository

   https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

3. Wählen Sie den Link "Pullanforderungen" aus.

4. Auswählen der Schaltfläche " Neue Pullanforderung "

5. Wählen Sie den main-Branch in der Dropdownliste base aus.

6. Wählen Sie den api-Branch in der Dropdownliste compare aus.

7. Auswählen der Schaltfläche " Pullanforderung erstellen "

8. Wählen Sie erneut die zweite Schaltfläche "Pullanforderung erstellen" aus .

Ihre GitHub-Aktion wird jetzt ausgelöst.

Verfolgen des Erstellens und Veröffentlichens durch die GitHub-Aktion

Sie können im Browser weiterhin Ihr Repository anzeigen lassen und den Fortschritt der GitHub-Aktion verfolgen. Führen Sie die folgenden Schritte aus, um den Fortschritt zu verfolgen:

1. Wählen Sie das Menü "Aktionen" aus.
2. Wählen Sie im Menü "Workflows" das Azure Static Web Apps CI/CD-Workflowelement aus.
3. Wählen Sie den obersten Link in der Liste der Aktionsabläufe aus.
4. Wählen Sie den Link " Auftrag erstellen und bereitstellen " aus.

Sie können den Status Ihrer GitHub-Aktion verfolgen, während diese Ihre Web-App und die API erstellt und veröffentlicht.

Navigieren zur Vorschau-URL

Nachdem die GitHub-Aktion erfolgreich abgeschlossen wurde, können Sie Ihre ausgeführte App im Browser anzeigen.

1. Wählen Sie das Menü "Pullanforderungen" aus.
2. Wählen Sie Ihren Pull-Request aus.
3. Wählen Sie den Link nach der Meldung Azure Static Web Apps aus: Ihre Phasenwebsite ist bereit! Besuchen Sie es hier

Beachten Sie, dass die Vorschau-URL einen Bindestrich enthält, auf den eine Zahl folgt. Die Zahl entspricht der Pull Request-Nummer für den von Ihnen erstellten Pull Request. Für jeden erstellten Pull Request erhalten Sie eine eindeutige und wiederholbare Vorschau-URL. Der Bereich wird auch verwendet, um die Vorschau-URL zu bilden.

Nächste Schritte

Herzlichen Glückwunsch! Sie haben ihre erste Azure Static Web Apps-Instanz mit einer Web-App und einer API erstellt.