Cvičení – publikování rozhraní API pomocí GitHub Actions

  • 4 min

Vaše webová aplikace i rozhraní API běží místně. Teď je čas publikovat webovou aplikaci a rozhraní API do Azure Static Web Apps.

Nasdílení změn do GitHubu

V předchozím cvičení jste provedli změny rozhraní API. Potvrďte tyto změny do větve api a nasdílejte je do GitHubu pomocí následujícího postupu:

  1. V editoru Visual Studio Code otevřete paletu příkazů stisknutím klávesy F1
  2. Zadejte a vyberte Git: Potvrdit všechny. Pokud vás Visual Studio Code vyzve k automatickému rozfázování všech změn a jejich potvrzení přímo, vyberte Ano.
  3. Zadejte zprávu potvrzení, například změny rozhraní API
  4. Stisknutím klávesy F1 otevřete paletu příkazů
  5. Zadejte a zvolte Git: Push
  6. Pokud se zobrazí výzva se zprávou větev api nemá žádnou nadřazenou větev. Chcete tuto větev publikovat? stiskněte tlačítko OK

Vytvořit Pull Request

Nasdílili jste větev api do GitHubu. Teď chcete, aby akce GitHubu publikovala webovou aplikaci a rozhraní API v adrese URL ve verzi Preview. Dalším krokem je vytvoření pull requestu pro hlavní větev.

  1. Otevření prohlížeče

  2. Přejděte do úložiště.

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

  3. Vyberte odkaz pull requesty

  4. Vyberte tlačítko Nová žádost o přijetí změn.

  5. V rozevíracím seznamu base vyberte hlavní větev .

  6. Z rozevíracího seznamu porovnání vyberte větev rozhraní API .

  7. Vyberte tlačítko Vytvořit pull request.

  8. Znovu vyberte druhé tlačítko Vytvořit pull request.

Vaše akce GitHubu se teď aktivuje.

Sledování sestavení a publikování akcí GitHubu

V prohlížeči můžete zůstat v úložišti a sledovat průběh akce GitHubu. Pokud chcete zobrazit průběh, postupujte takto:

  1. Vyberte nabídku akcí
  2. V nabídce Pracovní postupy vyberte položku CI/CD azure Static Web Apps položku pracovního postupu Snímek obrazovky znázorňující, jak najít správný pracovní postup.
  3. V seznamu spuštění akcí vyberte horní odkaz.
  4. Vyberte odkaz Sestavení a nasazení úlohy.

snímek obrazovky zobrazující tlačítko sestavení a nasazení na stránce pracovního postupu

Průběh akce GitHubu můžete vidět při sestavování a publikování webové aplikace a rozhraní API.

Prohlédněte si adresu URL náhledu.

Po úspěšném dokončení akce GitHubu můžete zobrazit spuštěnou aplikaci v prohlížeči.

  1. Vyberte nabídku pull requesty
  2. Vyberte svůj pull request
  3. Vyberte odkaz za zprávou Azure Static Web Apps: Váš testovací web je připravený! Navštivte jej zde

Všimněte si, že adresa URL náhledu obsahuje pomlčka následovaná číslem. Číslo odpovídá číslu žádosti o přijetí změn, kterou jste vytvořili. Pro každý pull request, který vytvoříte, získáte jedinečnou a stále stejnou adresu URL náhledu. Oblast se také používá k vytvoření adresy URL náhledu.

snímek obrazovky zobrazující webovou aplikaci Angular.

snímek obrazovky zobrazující webovou aplikaci React.

snímek obrazovky zobrazující webovou aplikaci Svelte.

snímek obrazovky zobrazující webovou aplikaci vue.

Další kroky

Blahopřejeme, vytvořili jste svou první instanci Azure Static Web Apps s webovou aplikací a rozhraním API!