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 de API e envie-as por push 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. Inserir uma mensagem de confirmação, como alterações de API
  4. Abra a paleta de comandos pressionando F1
  5. Digite e selecione Git: Push
  6. Se aparecer um prompt com a mensagem , a ramificação "api" não terá branch upstream. Quer publicar este branch?, clique no botão OK

Criar uma solicitação de pull

Você efetuou push do 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 principal.

  1. Abrir um navegador

  2. Navegue até o repositório

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

  3. Selecione o link Solicitações de pull

  4. Selecione o botão Nova solicitação de pull

  5. Selecione o branch principal na lista suspensa base

  6. Selecione o branch api na lista suspensa comparar

  7. Selecione o botão Criar solicitação de pull

  8. Novamente, selecione o segundo botão Criar solicitação de pull

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. Exiba o progresso seguindo estas etapas:

  1. Selecione o menu Ações
  2. No menu de Fluxos de Trabalho, selecione CI/CD dos Aplicativos Web Estáticos do AzureCaptura de tela mostrando como encontrar o fluxo de trabalho correto.
  3. Selecione o link superior na lista de execuções de ação.
  4. Selecione o link Tarefa de Compilação e Implantação.

Captura de tela mostrando o botão compilar e implantar na página de fluxo de trabalho.

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 o GitHub Action for concluído com êxito, você poderá exibir seu aplicativo em execução no navegador.

  1. Selecione o menu Solicitações de pull
  2. Selecione sua solicitação de pull
  3. Selecione o link seguindo a mensagem Aplicativos Web Estáticos do Azure: Seu site de estágio 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 visualização.

Captura de tela mostrando seu aplicativo Web angular.

Captura de tela mostrando seu aplicativo Web react.

Captura de tela mostrando seu aplicativo Web svelte.

Captura de tela mostrando seu aplicativo Web vue.

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!