Publicar a API com o GitHub Actions

Concluído

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

Quando você criou a instância dos Aplicativos Web Estáticos do Azure e solicitou que ela inspecionasse o branch main, uma GitHub Action foi gerada para você. O GitHub Action escuta as alterações na ramificação principal do seu repositório e, quando detecta uma confirmação ou uma pull request para principal, ele cria e publica seu aplicativo.

Talvez você se lembre de que, quando criou o recurso Aplicativos Web Estáticos do Azure, forneceu o local da pasta para sua 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 de GitHub Action

A pasta .github/workflows contém o arquivo da GitHub Action. O arquivo contém as configurações dos locais do aplicativo Web, da API e dos artefatos de compilação. Os locais que você escolheu quando criou o recurso Aplicativos Web Estáticos do Azure agora estão localizados nesse arquivo, como 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

Sua api_location está configurada com o valor correto para apontar para a API na pasta api.

Disparar a GitHub Action

A GitHub Action está pronta para compilar e publicar o aplicativo Web e a API assim que detectar uma alteração no branch main. Para acionar o GitHub Action, você pode fazer a confirmação diretamente ou criar uma pull request para a ramificação principal. As alterações detectadas na ramificação principal acionam o GitHub Action para publicar o aplicativo na mesma URL do seu site ativo.

URLs de visualização

Às vezes, você deseja ver as alterações em um site de preparo antes de publicá-las no site ativo. Os Aplicativos Web Estáticos do Azure permitem que você veja uma prévia de suas alterações por meio de URLs de pré-visualização. Você pode criar uma URL de visualização criando uma solicitação de pull no branch que a GitHub Action está inspecionando. Seu site ativo não é afetado. Em vez disso, uma versão de preparo do aplicativo será criada. Se você voltar e verificar sua pull request no GitHub, deverá ver um link para a versão de preparo postada na guia Conversa.

A tabela a seguir mostra como os Aplicativos Web Estáticos do Azure publicam seu aplicativo em diferentes URLs. O aplicativo é publicado em uma URL enquanto uma solicitação de pull para o mesmo branch é publicada em outra URL.

Fonte Descrição URL
Branch main URL do site ativo https://purple-rain-062d03304.azurestaticapps.net/
Solicitação de pull #5 URL de visualização https://purple-rain-062d03304-5.azurestaticapps.net/

No momento, você está trabalhando no branch api. Faça uma pull request da ramificação da API para a ramificação principal. Quando você cria a solicitação de pull para o branch main, a GitHub Action publica o aplicativo em uma URL de 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 pull request que contém a URL do ambiente de pré-produção. Você pode selecionar este link para ver as alterações preparadas.

Em seguida, crie um pull request e visite a versão preparada do seu aplicativo.