Exercício – Publicar a API com o GitHub Actions

  • 4 minutos

O aplicativo Web e a API estão sendo executados localmente. Agora, é hora de publicar o aplicativo Web e a API nos Aplicativos Web Estáticos do Azure.

Efetuar push das alterações para o GitHub

Você fez alterações na API no exercício anterior. Confirme essas alterações no branch api e efetue push delas para o GitHub seguindo estas etapas:

  1. No Visual Studio Code, abra a paleta de comandos pressionando F1
  2. Digite e selecione Git: Confirmar Tudo. Se o Visual Studio Code solicitar que você prepare automaticamente todas as alterações e as confirme diretamente, selecione Sim.
  3. Insira uma mensagem de confirmação, como alterações de API
  4. Abra a paleta de comandos pressionando F1
  5. Digite e selecione Git: Efetuar Push
  6. Se aparecer um prompt com a mensagem , a ramificação "api" não terá branch upstream. Deseja publicar este branch?, pressione o botão OK

Criar uma solicitação de pull

Você efetuou push de seu branch api para o GitHub. Agora, você deseja que a GitHub Action publique o aplicativo Web e a API em uma URL de visualização. Portanto, a próxima etapa é criar uma solicitação de pull no branch main.

  1. Abra um navegador

  2. Navegue para seu repositório

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

  3. Selecione o link Pull requests

  4. Selecione o botão Novo pull request

  5. Selecione o branch main na lista suspensa base

  6. Selecione o branch api na lista suspensa comparar

  7. Selecione o botão Criar pull request

  8. Novamente, selecione o segundo botão Criar pull request

Seu GitHub Actions agora está acionado.

Observar a GitHub Action compilar e publicar

Você pode ficar no navegador ou no repositório e observar o progresso da GitHub Action. Siga estas etapas para ver o progresso:

  1. Selecione o menu Ações
  2. No menu Fluxos de trabalho, selecione o item de fluxo de trabalho de 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.

Você pode ver o progresso da GitHub Action à medida que ela compila e publica o aplicativo Web e a API.

Navegar até a URL de visualização

Depois que a ação do GitHub Actions for concluída com êxito, você poderá exibir o seu aplicativo em execução no navegador.

  1. Selecione o menu Pull requests
  2. Selecione sua solicitação de pull
  3. Selecione o link após a mensagem Aplicativos Web Estáticos do Azure: Seu site de preparo está pronto. Visite-o aqui

Observe que a URL de visualização contém um hífen seguido de um número. Ele corresponde ao número da solicitação de pull que você criou. Para cada pull request que você cria, você recebe uma URL de versão prévia exclusiva e repetível. A região também é usada para formar a URL de pré-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óximas etapas

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