Planejar seu Aplicativo Web Estático do Azure

5 minutos

Sua meta final é hospedar seu aplicativo no Azure. Os Aplicativos Web Estáticos do Azure cuidam do provisionamento de todos os recursos do Azure necessários para você.

No entanto, antes que o aplicativo possa ser hospedado, você precisa de algo para compilar o aplicativo enquanto faz alterações. Essas alterações podem ser feitas por meio de confirmações ou de solicitações de pull para seu repositório. Um recurso importante dos Aplicativos Web Estáticos do Azure é que eles configuram um fluxo de trabalho do GitHub Actions para compilar e publicar o aplicativo.

Quando você cria o recurso dos Aplicativos Web Estáticos do Azure, ele cria o fluxo de trabalho do GitHub Actions. O fluxo de trabalho é disparado imediatamente e cuida da compilação e da publicação do aplicativo. O fluxo de trabalho também é disparado sempre que você faz uma alteração no branch observado em seu repositório.

Aplicativos Web Estáticos do Azure

Há dois aspectos automatizados na implantação de um aplicativo Web. O primeiro provisiona os recursos subjacentes do Azure que compõem o aplicativo. O segundo é um fluxo de trabalho do GitHub Actions que compila e publica o aplicativo.

Quando publica seu aplicativo na Web com os Aplicativos Web Estáticos do Azure, você obtém a hospedagem rápida dele, além de APIs escalonáveis. Você obtém também um fluxo de trabalho unificado de compilação e implantação fornecido pelo GitHub Actions.

Conectar sua instância dos Aplicativos Web Estáticos ao GitHub

Os Aplicativos Web Estáticos do Azure foram criados para hospedar aplicativos cujo código-fonte reside no GitHub. Quando criar uma instância dos Aplicativos Web Estáticos, você entrará no GitHub e especificará o repositório que contém o código do aplicativo.

Você também precisa especificar três caminhos de pasta no repositório, para que o aplicativo possa ser compilado e implantado automaticamente:

Localização	Exemplo de localização	Descrição	Obrigatório
Localização do aplicativo	/	A localização do código-fonte do aplicativo Web	Sim
Localização de saída do build do aplicativo	dist	A localização da saída de build do aplicativo, em relação à localização do aplicativo	Não
Localização da API	api	A localização do código-fonte da API	Não

A Localização a saída de build do aplicativo é um caminho relativo para o diretório de saída de build do seu aplicativo. Por exemplo, considere que temos um aplicativo em my-app que gera seus ativos compilados em uma pasta my-app/dist. Nesse caso, você especifica dist como essa localização.

Do código-fonte a ativos estáticos com o GitHub Actions

O repositório do GitHub contém código-fonte e, portanto, precisa ser compilado antes de ser publicado.

Quando você cria uma instância dos Aplicativos Web Estáticos, o Azure cria um fluxo de trabalho do GitHub Actions em seu repositório. O fluxo de trabalho compila seu aplicativo sempre que você envia por push as alterações ou cria uma solicitação de pull no branch que você escolheu acompanhar. Esse processo de compilação transforma seu código-fonte em ativos estáticos, que são fornecidos pelo Azure. Quando a compilação é concluída, a ação implanta os ativos.

A GitHub Action é adicionada ao repositório na pasta .github/workflows. Você pode examinar ou modificar esse arquivo conforme necessário. As configurações que você insere ao criar o recurso são armazenadas no arquivo da GitHub Action.

API Integrada com o Azure Functions

Se o seu aplicativo exigir uma API, você poderá implementá-la como um projeto do Azure Functions em seu repositório. A API será automaticamente implantada e hospedada pela instância de Aplicativos Web Estáticos. O fluxo de trabalho do GitHub Actions que compila e implanta o aplicativo localiza a API no repositório pelo nome da pasta que você especifica.

Normalmente, o aplicativo de API é colocado em uma pasta chamada api ou functions, mas é possível nomeá-lo de outra maneira.

E se você não tiver uma API? Não se preocupe. Se os Aplicativos Web Estáticos do Azure não conseguirem localizar uma API na pasta indicada, eles não publicarão uma API, mas ainda publicarão o aplicativo.

Manipular rotas de fallback

Você verá um erro 404 ao atualizar a página porque o navegador envia uma solicitação para a plataforma de hospedagem para servir /products. Não há nenhuma página no servidor chamada products a ser servida. Felizmente, é fácil resolver isso criando uma rota de fallback. Uma rota de fallback é uma rota que corresponde a todas as solicitações de página não correspondentes ao servidor.

Os Aplicativos Web Estáticos do Azure são compatíveis com as regras de roteamento personalizadas definidas em um arquivo staticwebapp.config.json opcional localizado na pasta de saída de build do aplicativo.

Você pode configurar seu aplicativo para usar regras que implementam uma rota de fallback, conforme mostrado no seguinte exemplo, que usa um curinga de caminho com o filtro de arquivo:

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
  }
}

Essa regra instrui os Aplicativos Web Estáticos do Azure a atenderem index.html quando uma solicitação para um recurso não for encontrada, excluindo as imagens e os arquivos CSS mostrados na expressão exclude.

Local do arquivo de rota

Os Aplicativos Web Estáticos do Azure esperam que seu arquivo staticwebapp.config.json esteja em output_location por padrão. Se o processo de build copiar o arquivo staticwebapp.config.json para output_location, você não precisará fazer mais nada. Para a maioria dos projetos, o output_location está relacionado ao app_location.

O arquivo staticwebapp.config.json do seu aplicativo que está localizado na pasta angular-app/src/assets.

O arquivo staticwebapp.config.json está localizado na pasta react-app.

O arquivo staticwebapp.config.json está localizado na pasta svelte-app/public.

O arquivo staticwebapp.config.json está localizado na pasta vue-app/public.

Próximas etapas

Então, o que é necessário para que você possa publicar seu aplicativo Web nos Aplicativos Web Estáticos do Azure? É necessário apenas ter o aplicativo em seu repositório do GitHub.