Exercício - Publique a API com ações do GitHub

  • 4 minutos

Seu aplicativo Web e sua API estão sendo executados localmente. Agora é hora de publicar seu aplicativo Web e sua API nos Aplicativos Web Estáticos do Azure.

Envie suas alterações para o GitHub

Você fez alterações na API no exercício anterior. Confirme essas alterações na ramificação api e envie-as para o GitHub seguindo estas etapas:

  1. No Visual Studio Code, abra a paleta de comandos pressionando F1
  2. Digite e selecione Git: Commit All. 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 commit, como alterações de API
  4. Abra a paleta de comandos pressionando F1
  5. Digite e escolha 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 uma solicitação pull

Você fez o push do seu branch api para o GitHub. Agora você quer que a Ação do GitHub publique seu aplicativo Web e sua API em uma URL de visualização. Portanto, o seu próximo passo é criar um pedido de pull contra a ramificação 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 Pull requests

  4. Selecione o botão Novo pedido pull

  5. Selecione a ramificação principal da lista suspensa base

  6. Selecione a ramificação api na lista suspensa comparar

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

  8. Novamente, selecione a segunda botão Criar solicitação pull

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

Veja a construção e publicação da ação no GitHub

Pode permanecer no seu navegador no seu repositório e acompanhar o progresso da ação do GitHub. Siga estes passos para ver o progresso:

  1. Selecione o menu Ações
  2. No menu "Workflows", selecione o item de fluxo de trabalho do Azure Static Web Apps CI/CDCaptura de tela mostrando como localizar o fluxo de trabalho correto.
  3. Selecione o link superior na lista de execuções de ação.
  4. Selecione o link da tarefa de Compilar e Desdobrar .

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

Você pode ver o progresso da sua Ação do GitHub à medida que ela cria e publica seu aplicativo Web e sua API.

Navegue até o URL de 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 seu pull request
  3. Selecione o link a seguir à mensagem Aplicativos Web Estáticos do Azure: Seu site de palco está pronto! Visite-o aqui

Observe que o URL de visualização contém um hífen seguido de um número. O número corresponde ao da solicitação pull que você 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.

Captura de ecrã a mostrar a sua aplicação web Angular.

Captura de ecrã que mostra a sua aplicação web React.

Captura de ecrã a mostrar a sua aplicação Web elegante.

Captura de ecrã a mostrar a sua aplicação Web vue.

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!