Publicar a API com ações do GitHub
Você adicionou sua API ao seu aplicativo Web e ambos estão sendo executados localmente. Agora é hora de publicar sua API e seu aplicativo nos Aplicativos Web Estáticos do Azure.
Quando criaste a instância dos Aplicativos Web Estáticos do Azure e pediste que ela observasse o teu ramo principal, uma Ação do GitHub foi gerada para ti. A Ação do GitHub observa as alterações na ramificação principal do repositório e, quando deteta uma confirmação ou um pull request para a ramificação principal, cria e publica a sua aplicação.
Talvez te lembres de quando criaste o recurso Aplicações Web Estáticas do Azure e forneceste o local da pasta para a tua API. Você forneceu o valor padrão de api. No entanto, como você não tinha uma API na pasta api naquele momento, os Aplicativos Web Estáticos do Azure não tentaram publicar uma API.
Agora, tudo muda.
Configuração do GitHub Action
A pasta .github/workflows contém seu arquivo de ação do GitHub. O arquivo contém as configurações para os locais do seu aplicativo Web, API e artefatos de compilação. Os locais que você escolheu quando criou seu recurso de Aplicativos Web Estáticos do Azure agora estão localizados neste arquivo, conforme mostrado aqui:
app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional
app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional
app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional
Seu api_location é definido com o valor correto que indica a sua API na pasta de API .
Acionar a ação do GitHub
A ação do GitHub está pronta para construir e publicar a sua aplicação web e a sua API assim que detetar uma alteração na sua ramificação principal . Para acionar a Ação do GitHub, você pode confirmar diretamente ou criar uma solicitação pull para a ramificação principal . As alterações detetadas na ramificação principal do acionam a Ação do GitHub para publicar o aplicativo na mesma URL do seu site ativo.
URLs de pré-visualização
Às vezes, você deseja ver suas alterações em um site de preparo antes de publicar no site ativo. As Aplicações Web Estáticas do Azure permitem-lhe ver uma pré-visualização das suas alterações através de URLs de pré-visualização. Você pode criar uma URL de visualização ao criar um pull request na ramificação que a sua Ação do GitHub está a monitorizar. Seu site ao vivo não é afetado. Em vez disso, uma nova versão de teste do aplicativo é criada. Se voltares e verificares o teu pull request no GitHub, deverás ver um link para a versão de staging publicada no separador Conversa.
A tabela a seguir mostra como os Aplicativos Web Estáticos do Azure publicam seu aplicativo em URLs diferentes. Seu aplicativo publica em uma URL, enquanto uma solicitação pull para a mesma ramificação publica em outra URL.
| Fonte | Descrição | URL |
|---|---|---|
| ramo principal | URL do site ativo | https://purple-rain-062d03304.azurestaticapps.net/ |
| Pull Request #5 | URL de pré-visualização | https://purple-rain-062d03304-5.azurestaticapps.net/ |
No momento, você está trabalhando na ramificação api. Faça um pull request da sua ramificação api para a ramificação principal . Quando cria o pull request na ramificação principal , a ação do GitHub publica a aplicação numa URL de pré-visualização.
Quando o fluxo de trabalho concluir a criação e a implantação do seu aplicativo, o bot do GitHub adicionará um comentário à sua solicitação pull que contém a URL do ambiente de pré-produção. Você pode selecionar este link para ver suas alterações por etapas.
Em seguida, crie um pull request e visite a versão preparada da sua aplicação.