Övning – Publicera API:et med GitHub Actions

  • 4 minuter

Både din webbapp och ditt API körs lokalt. Nu är det dags att publicera webbappen och API:et på Azure Static Web Apps.

Pusha ändringarna till GitHub

Du gjorde ändringar i api:et i föregående övning. Checka in ändringarna i api-grenen och pusha dem GitHub på följande sätt:

  1. Öppna kommandopaletten i Visual Studio Code genom att trycka på F1
  2. Skriv och välj Git: Checka in alla. Om Visual Studio Code uppmanar dig att automatiskt markera ändringarna för incheckning eller checka in dem direkt väljer du Yes (Ja).
  3. Ange ett incheckningsmeddelande , till exempel api-ändringar
  4. Öppna kommandopaletten genom att trycka på F1
  5. Skriv och välj Git: Push
  6. Om du uppmanas med meddelandet Grenen "api" har ingen överordnad gren. Vill du publicera den här grenen? tryck på OK-knappen

Skapa en pull-begäran

Du har pushat api-grenen till GitHub. Nu vill du att GitHub Action ska publicera din webbapp och ditt API på en förhandsgransknings-URL. Nästa steg är att skapa en pull-begäran mot main-grenen.

  1. Öppna en webbläsare

  2. Navigera till din lagringsplats

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

  3. Välj länken Pull requests (Pull-begäranden)

  4. Välj knappen Ny pull-begäran

  5. Välj main-grenen från base-listrutan

  6. Välj api-grenen från compare-listrutan

  7. Välj knappen Skapa pull-begäran

  8. Välj återigen den andra knappen Skapa pull-begäran

Din GitHub-åtgärd utlöses nu.

Se när GitHub-åtgärden bygger och publicerar appen och API:et

Du kan stanna kvar på din lagringsplats i webbläsaren och se förloppet för GitHub-åtgärden. Så här visar du förloppet:

  1. Välj menyn Åtgärder
  2. Under menyn Arbetsflöden väljer du ci/CD-arbetsflödesobjektet Azure Static Web Apps CI/CDScreenshot showing how to find the correct workflow.
  3. Välj den översta länken i listan över åtgärdskörningar.
  4. Välj länken Skapa och distribuera jobb.

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

Du kan titta på medan GitHub-åtgärden bygger och publicerar din webbapp och ditt API.

Gå till förhandsgransknings-URL:en

När GitHub-åtgärden har slutförts kan du visa din app som körs i webbläsaren.

  1. Välj menyn Pull-begäranden
  2. Välj din pull-begäran
  3. Välj länken efter meddelandet Azure Static Web Apps: Din scenwebbplats är klar! Besök den här

Observera att förhandsgransknings-URL:en innehåller ett bindestreck följt av ett nummer. Det här numret matchar numret för den pull-begäran som du skapade. För varje pull-begäran du skapar får du en unik och repeterbar förhandsgransknings-URL. Regionen används också för att skapa förhandsgransknings-URL:en.

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ästa steg

Grattis, du skapade din första Azure Static Web Apps-instans med en webbapp och ETT API!