Gyakorlat – Az API közzététele a GitHub Actions használatával

  • 4 perc

A webalkalmazás és az API is helyileg fut. Most itt az ideje, hogy közzétegye a webalkalmazást és az API-t az Azure Static Web Appsben.

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

Az előző gyakorlat során módosítottad az API-t. Véglegesítse ezeket a módosításokat az API-ágban , és küldje el őket a GitHubra az alábbi lépések végrehajtásával:

  1. A Visual Studio Code-ban nyissa meg a parancspalettát az F1 billentyű lenyomásával
  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 automatikusan állítsa be az összes módosítást, és véglegesítse őket közvetlenül, válassza az Igen lehetőséget.
  3. Véglegesítési üzenet, például API-módosítások megadása
  4. A parancskatalógus megnyitása az F1 billentyű lenyomásával
  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 upstream ága. Közzé szeretné tenni ezt az ágat? nyomja le az OK gombot.

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

Leküldte az API-ágat a GitHubra. Most azt szeretné, hogy a GitHub-művelet közzétegye a webalkalmazást és az API-t egy előzetes verziójú URL-címen. A következő lépés tehát egy pull request létrehozása a fő ágon.

  1. Böngésző megnyitása

  2. Navigálás az adattárhoz

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

  3. Válassza a Pull kérések hivatkozást

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

  5. Válassza ki a fő ágat az alap legördülő listából

  6. Válassza ki az API-ágat az összehasonlítási 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 Action buildjének és közzétételének megtekintése

Böngészőjében maradhat az adattárán, és figyelemmel kísérheti a GitHub-művelet előrehaladását. Tekintse meg az előrehaladást az alábbi lépések végrehajtásával:

  1. Válassza a Műveletek menüt
  2. A Munkafolyamatok menüben válassza az Azure Static Web Apps CI/CD munkafolyamat-elem képernyőképét, amely bemutatja, hogyan keresheti meg a megfelelő munkafolyamatot.
  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.

Képernyőkép a munkafolyamat oldalán található Build and Deploy (Létrehozás és üzembe helyezés) gombról.

A GitHub-művelet előrehaladását láthatja a webalkalmazás és az API összeállítása és közzététele során.

Nyissa meg az előnézeti URL-címet

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. A lekéréses kérelem kiválasztása
  3. Válassza az Azure Static Web Apps üzenet alábbi hivatkozását: A szakaszwebhely készen áll! Látogasson el ide

Figyelje meg, hogy az előnézeti URL-cím egy kötőjelet és egy számot tartalmaz. A szám megegyezik az általad 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ó.

Képernyőkép az angular webalkalmazásról.

Képernyőkép a React-webalkalmazásról.

Képernyőkép a karcsú webalkalmazásról.

Képernyőkép a vue-webalkalmazásról.

Következő lépések

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