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:

  1. No Visual Studio Code, abra a paleta de comandos ao premir F1.
  2. 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).
  3. Introduza uma mensagem de consolidação como api changes.
  4. Abra a paleta de comandos ao premir F1.
  5. Digite e selecione Git: Push
  6. 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.

  1. Abra um browser

  2. Navegue para o seu repositório

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

  3. Selecione o link Solicitações pull

  4. Selecione o botão Novo pull request

  5. Selecione o ramo main na lista pendente base

  6. Selecione o ramo api na lista pendente compare

  7. Selecione o botão Criar pull request

  8. 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:

  1. Selecione o menu Ações
  2. No menu Fluxos de trabalho, selecione o item de fluxo de trabalho CI/CD dos Aplicativos Web Estáticos do Azure Screenshot showing how to find the correct workflow.
  3. Selecione o link superior na lista de execuções de ação.
  4. 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.

  1. Selecione o menu Pull requests
  2. Selecione o pedido Pull
  3. 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.

Screenshot showing your react web app.

Screenshot showing your svelte web app.

Screenshot showing your vue web app.

Próximos passos

Parabéns, você criou sua primeira instância de Aplicativos Web Estáticos do Azure com um aplicativo Web e uma API!