Exercício – Publicar a API com o GitHub Actions

4 minutos

A sua aplicação Web e API estão a ser executadas localmente. Chegou a altura de publicar a sua aplicação Web e API nas Aplicações Web Estáticas do Azure.

Emitir as alterações para o GitHub

Você fez alterações na API no exercício anterior. Consolide essas alterações no ramo api e emita-as para o GitHub ao seguir estes passos:

No Visual Studio Code, abra a paleta de comandos ao premir F1.
Digite e selecione Git: Confirmar tudo. Se o Visual Studio Code lhe pedir para testar automaticamente todas as suas alterações e as consolidar diretamente, selecione Yes (Sim).
Introduza uma mensagem de consolidação como api changes.
Abra a paleta de comandos ao premir F1.
Digite e selecione Git: Push
Se você for solicitado com a mensagem A ramificação 'api' não tem ramificação upstream. Gostaria de publicar este ramo? pressione o botão OK

Criar um pedido Pull

Emitiu o seu ramo api para o GitHub. Agora, pretende que o GitHub Actions publique a sua aplicação Web e API num URL de pré-visualização. O próximo passo será criar um pedido Pull em relação ao ramo main.

Abra um browser
Navegue para o seu repositório

https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api
Selecione o link Solicitações pull
Selecione o botão Novo pull request
Selecione o ramo main na lista pendente base
Selecione o ramo api na lista pendente compare
Selecione o botão Criar pull request
Novamente, selecione o segundo botão Criar pull request

Sua ação do GitHub agora está acionada.

Observar a compilação e publicação da Ação do GitHub

Pode continuar com o mesmo browser no seu repositório e observar o progresso da ação do GitHub Actions. Siga estes passos para ver o progresso:

Selecione o menu Ações
No menu Fluxos de trabalho, selecione o item de fluxo de trabalho CI/CD dos Aplicativos Web Estáticos do Azure
Selecione o link superior na lista de execuções de ação.
Selecione o link Criar e implantar trabalho .

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

Pode ver o progresso da sua ação do GitHub Actions à medida que compila e publica a sua aplicação Web e API.

Navegar para o URL de pré-visualização

Quando a Ação do GitHub for concluída com êxito, você poderá visualizar seu aplicativo em execução no navegador.

Selecione o menu Pull requests
Selecione o pedido Pull
Selecione o link a seguir à mensagem Azure Static Web Apps: Your stage site is ready! Visite-o aqui

Repare que o URL de pré-visualização contém um hífen seguido de um número. O número corresponde ao número do pedido Pull que criou. Para cada solicitação pull criada, você obtém uma URL de visualização exclusiva e repetível. A região também é usada para formar o URL de visualização.

Screenshot showing your angular web app.