Übung: Veröffentlichen der API mit GitHub Actions

  • 4 Minuten

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

In der vorherigen Übung haben Sie Änderungen an Ihrer API vorgenommen. Committen Sie diese Änderungen für den api-Branch, und übertragen Sie sie wie folgt an GitHub:

  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 stagen und sie direkt zu committen, wählen Sie Ja aus.
  3. Geben Sie eine Commitnachricht wie API-Änderungen ein.
  4. Öffnen Sie die Befehlspalette, indem Sie F1 drücken.
  5. Geben Sie folgenden Befehl ein, und wählen Sie ihn aus: Git: Push
  6. Wenn Sie eine Meldung The branch 'api' has no upstream branch. Would you like to publish this branch? (Der Branch „api“ hat keinen Upstream-Branch. Möchten Sie diesen Branch veröffentlichen?) erhalten, klicken Sie auf die Schaltfläche OK.

Erstellen eines Pull Request

Sie haben Ihren api-Branch per Pull an GitHub übertragen. Nun soll die GitHub-Aktion Ihre Web-App und die API in einer Vorschau-URL veröffentlichen. Der nächste Schritt ist also das Erstellen eines Pull Requests für den main-Branch.

  1. Öffnen Sie einen Browser.

  2. Navigieren Sie zu Ihrem Repository.

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

  3. Wählen Sie den Link Pull Requests aus.

  4. Wählen Sie die Schaltfläche Neuer Pull Request aus.

  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. Wählen Sie die Schaltfläche Pull Request erstellen aus.

  8. Wählen Sie erneut die Schaltfläche Pull Request 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“ den Workflow Azure Static Web Apps CI/CD aus. Screenshot showing how to find the correct workflow.
  3. Wählen Sie den obersten Link in der Liste der Aktionsausführungen aus.
  4. Wählen Sie den Link Build and Deploy Job aus.

Screenshot showing the build and deploy button on the workflow page.

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 aufrufen.

  1. Wählen Sie das Menü Pull Requests aus.
  2. Wählen Sie Ihren Pull Request aus.
  3. Klicken Sie auf den Link nach der Meldung Azure Static Web Apps: Your stage site is ready! Visit it here (Azure Static Web Apps: Ihre Stage-Site ist fertig! Besuchen Sie sie 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. Die Region wird auch für die Formatierung der Preview-URL verwendet.

Screenshot showing your angular web app.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

Nächste Schritte

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