Oefening: de API publiceren met GitHub Actions

  • 4 minuten

Uw web-app en API worden beide lokaal uitgevoerd. Nu is het tijd om uw web-app en API te publiceren naar Azure Static Web Apps.

Uw wijzigingen pushen naar GitHub

In de vorige oefening hebt u wijzigingen aangebracht in uw API. Voer deze wijzigingen door in de API-vertakking en push ze naar GitHub door de volgende stappen uit te voeren:

  1. Open in Visual Studio Code het opdrachtpalet door op F1 te drukken
  2. Typ en selecteer Git: Alles doorvoeren. Als u in Visual Studio Code wordt gevraagd om al uw wijzigingen automatisch te faseren en deze rechtstreeks door te voeren, selecteert u Ja.
  3. Voer een doorvoerbericht in, zoals API-wijzigingen
  4. Open het opdrachtpalet door op F1 te drukken
  5. Typ en selecteer Git: Push
  6. Als u wordt gevraagd met het bericht Dat de vertakking 'API' geen upstream-vertakking heeft. Wilt u deze vertakking publiceren? druk op de knop OK

Een pull-aanvraag maken

U hebt uw api-branch naar GitHub gepusht. Nu wilt u dat de GitHub Action uw web-app en API publiceert in een preview-URL. De volgende stap is om een pull request tegen de main branch te maken.

  1. Een browser openen

  2. Ga naar uw opslagplaats

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

  3. Selecteer de koppeling pull-aanvragen

  4. Selecteer de knop Nieuwe pull-aanvraag

  5. Selecteer de hoofdvertakking in de basisvervolgkeuzelijst

  6. Selecteer de api branch in de vergelijken vervolgkeuzelijst.

  7. Selecteer de knop Pull-aanvraag maken

  8. Selecteer opnieuw de tweede knop Pull-aanvraag maken

Uw GitHub-actie is nu geactiveerd.

Bekijk de GitHub Action-build en publiceer

U kunt in uw browser in uw opslagplaats blijven en de voortgang van de GitHub Action bekijken. Bekijk de voortgang door de volgende stappen uit te voeren:

  1. Selecteer het menu Acties
  2. Selecteer in het menu Werkstromen het werkstroomitem Azure Static Web Apps CI/CDmet een screenshot waarin wordt getoond hoe u de juiste werkstroom kunt vinden.
  3. Selecteer de bovenste koppeling in de lijst met actieuitvoeringen.
  4. Selecteer de koppeling Taak bouwen en implementeren .

Schermopname van de knop Bouwen en implementeren op de werkstroompagina.

U kunt de voortgang van uw GitHub-actie zien tijdens het compileren en publiceren van uw web-app en API.

Naar de voorbeeld-URL bladeren

Zodra de GitHub Action is voltooid, kunt u de actieve app in de browser bekijken.

  1. Selecteer het menu Pull requests
  2. Selecteer uw pull-aanvraag
  3. Selecteer de koppeling na het bericht Azure Static Web Apps: uw fasesite is gereed. Bezoek het hier

U ziet dat de voorbeeld-URL een afbreekstreepje bevat, gevolgd door een getal. Het nummer komt overeen met het pull-aanvraagnummer voor de pull-aanvraag die u hebt gemaakt. Voor elke pull-aanvraag die u maakt, krijgt u een unieke en herhaalbare preview-URL. De regio wordt ook gebruikt om de preview-URL te vormen.

Schermopname van uw Angular webapp.

Schermopname van uw react-web-app.

Schermopname van uw Svelte-webapp.

Schermopname van uw Vue-webapp.

Volgende stappen

Gefeliciteerd, u hebt uw eerste Azure Static Web Apps-exemplaar gemaakt met een web-app en API.