Gyakorlat – Az API közzététele GitHub Actions-műveletekkel

  • 4 perc

A webalkalmazás és az API egyaránt helyileg fut. Eljött az ideje, hogy közzétegye a webalkalmazást és az API-t az Azure Static Web Apps-ban.

A módosítások leküldése a GitHubra

Az előző gyakorlatban módosította az API-t. Véglegesítse ezeket az api ág ezen módosításait, és küldje le azokat a GitHubra a következő lépésekkel:

  1. Az F1 gomb megnyomásával nyissa meg a Visual Studio Code parancskatalógusát
  2. Írja be és válassza a Git: Az összes véglegesítése lehetőséget. Ha a Visual Studio Code arra kéri, hogy az összes módosítást automatikusan készítse elő, és közvetlenül véglegesítse azokat, válassza az Igen lehetőséget.
  3. Adjon meg egy véglegesítési üzenetet, például azt, hogy api-módosítások
  4. Nyissa meg a parancskatalógust az F1 billentyűvel
  5. Írja be és válassza a Git: Leküldés lehetőséget
  6. Ha a rendszer arra kéri, hogy az "api" ágnak nincs felső ága. Közzé szeretné tenni ezt a ágat? nyomja le az OK gombot

Lekéréses kérelem létrehozása

Leküldte az api ágat a GitHubra. Most a GitHub Actions-művelettel közzé szeretné tenni a webalkalmazást és az API-t egy előnézeti URL-címen. Így a következő lépés egy lekéréses kérelem létrehozása a main ágról.

  1. Nyisson meg egy böngészőt

  2. Nyissa meg az adattárat

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

  3. A Lekéréses kérelmek hivatkozás kiválasztása

  4. Az Új lekéréses kérelem gomb kiválasztása

  5. Válassza a main ágat a base legördülő listából

  6. Válassza az api ágat a compare legördülő listából

  7. Válassza a Lekéréses kérelem létrehozása gombot

  8. Ismét válassza a második Lekéréses kérelem létrehozása gombot

A GitHub-művelet most aktiválódik.

A GitHub Actions-művelet létrehozásának és közzétételének megtekintése

Az adattárat megnyitva hagyhatja a böngészőben, és megtekintheti a GitHub Actions-művelet előrehaladását. Az előrehaladás megtekintéséhez kövesse az alábbi lépéseket:

  1. Válassza a Műveletek menüt
  2. A Munkafolyamatok menüben válassza ki az Azure Static Web Apps CI/CD munkafolyamat-elemét Screenshot showing how to find the correct workflow.
  3. Válassza ki a műveletfuttatások listájának felső hivatkozását.
  4. Válassza a Build and Deploy Job (Feladat összeállítása és üzembe helyezése) hivatkozást.

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

Követheti a GitHub Actions-művelet előrehaladását a webalkalmazás és az API-k létrehozása és közzététele során.

Nyissa meg az előnézeti URL-címet a böngészőben

Miután a GitHub-művelet sikeresen befejeződött, megtekintheti a futó alkalmazást a böngészőben.

  1. Válassza a Lekéréses kérelmek menüt
  2. Válassza ki a lekéréses kérelmet
  3. Válassza az Azure Static Web Apps üzenet alábbi hivatkozását: A szakaszwebhely készen áll! Látogasson el ide

Fontos megjegyezni, hogy az előnézeti URL-cím tartalmaz egy kötőjelet, majd egy számot. A szám megegyezik a létrehozott lekéréses kérelem számával. Minden létrehozott lekéréses kérelemhez egyedi és megismételhető előnézeti URL-címet kap. A régió az előnézeti URL-cím létrehozásához is használható.

Screenshot showing your angular web app.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

Következő lépések

Gratulálunk, létrehozta az első Azure Static Web Apps-példányt egy webalkalmazással és API-val!