Övning – Publicera API:et med GitHub Actions

Slutförd

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

Skicka ändringarna till GitHub

Du gjorde ändringar i api:et i föregående övning. Genomför ändringarna i api--grenen och skicka dem till GitHub genom att följa dessa steg:

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 staga alla dina ändringar och committa dem direkt, väljer du Ja.
3. Ange ett commitmeddelande som 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å knappen OK

Skapa en pull request

Du pushade din api--gren till GitHub. Nu vill du att GitHub-åtgärden ska publicera webbappen och API:et i en förhandsgransknings-URL. Nästa steg är att därför skapa en pull-förfrågan mot huvudgrenen.

1. Öppna en webbläsare

2. Gå till lagringsplatsen

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

3. Välj länken Pull Requests

4. Välj knappen Ny pull request

5. Välj huvudgrenen i listrutan bas

6. Välj grenen api i listrutan jämföra

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.

Bevaka GitHub Action-byggandet och publiceringen

Du kan stanna kvar i webbläsaren på lagringsplatsen och titta på GitHub-åtgärdens förlopp. Följ de här stegen för att visa förloppet:

1. Välj menyn Åtgärder
2. Under menyn Arbetsflöden väljer du AZURE Static Web Apps CI/CD- arbetsflödesobjekt
3. Välj den översta länken i listan över åtgärdskörningar.
4. Välj länken Skapa och distribuera jobb.

Du kan se förloppet för din GitHub-åtgärd när den bygger och publicerar webbappen och API:et.

Bläddra 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 Requests
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 tal. Numret matchar pull-begärandenumret 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.

Nästa steg

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