Planear a Aplicação Web Estática do Azure
- 5 minutos
O seu objetivo final é alojar a sua aplicação no Azure. Os Aplicativos Web Estáticos do Azure cuidam do provisionamento de todos os recursos necessários do Azure para você.
No entanto, antes de ser possível alojar a sua aplicação, precisa de algo para a compilar à medida que faz alterações. Essas alterações podem ser feitas através de consolidações ou pedidos Pull para o seu repositório. Uma caraterística fundamental das Aplicações Web Estáticas do Azure é o facto de configurarem um fluxo de trabalho do GitHub Actions para compilar e publicar a aplicação.
Quando cria o recurso das Aplicações Web Estáticas do Azure, este cria o fluxo de trabalho do GitHub Actions. O fluxo de trabalho é acionado imediatamente e trata da compilação e publicação da aplicação. O fluxo de trabalho também é acionado sempre que faz uma alteração no ramo observado no seu repositório.
Aplicações Web Estáticas do Azure
Existem dois aspetos automatizados para implementar uma aplicação Web. O primeiro aprovisiona os recursos subjacentes do Azure que compõem a sua aplicação. O segundo é um fluxo de trabalho do GitHub Actions que compila e publica a sua aplicação.
Quando publica a sua aplicação na Web com as Aplicações Web Estáticas do Azure, está a obter alojamento rápido da aplicação Web e APIs dimensionáveis. Está também a obter uma compilação unificada e um fluxo de trabalho de implementação fornecidos pelo GitHub Actions.
Ligar a instância das Aplicações Web Estáticas ao GitHub
As Aplicações Web Estáticas do Azure foram concebidas para alojar aplicações, em que o código fonte se encontra no GitHub. Quando cria uma instância das Aplicações Web Estáticas, tem de iniciar sessão no GitHub e especificar o repositório que contém o código da sua aplicação.
Também tem de especificar três caminhos de pastas dentro do seu repositório para que a sua aplicação possa ser automaticamente compilada e implementada:
| Localização | Exemplo de localização | Descrição | Obrigatório |
|---|---|---|---|
| Localização da aplicação | / | A localização do código fonte da aplicação Web | Sim |
| Local de saída da compilação do aplicativo | distância | O local da saída de compilação do seu aplicativo, em relação ao local do seu aplicativo | Não |
| Localização da API | Interface de Programação de Aplicações (API) | A localização do código fonte para a sua API | Não |
A saída de compilação do aplicativo é um caminho relativo para o diretório de saída de compilação do seu aplicativo. Por exemplo, imagine que temos uma aplicação em my-app que produz os respetivos elementos de compilação para uma pasta my-app/dist. Neste caso, deve especificar dist para esta localização.
Do código fonte para os elementos estáticos com o GitHub Actions
O repositório do GitHub contém código fonte, por isso, precisa de ser compilado para poder ser publicado.
Quando cria uma instância das Aplicações Web Estáticas, o Azure cria um fluxo de trabalho do GitHub Actions no seu repositório. O fluxo de trabalho cria seu aplicativo sempre que você envia por push alterações ou cria uma solicitação pull em relação à ramificação que você escolheu acompanhar. Esse processo de compilação transforma seu código-fonte em ativos estáticos, que são servidos pelo Azure. Após a conclusão da compilação, a ação implementa os elementos.
A Ação do GitHub é adicionada ao seu repositório na pasta .github/workflows . Pode rever ou modificar este ficheiro conforme necessário. As definições que introduz quando cria o recurso são armazenadas no ficheiro do GitHub Actions.
API integrada nas Funções do Azure
Se a sua aplicação necessitar de uma API, pode implementá-la como um projeto das Funções do Azure no seu repositório. A API será automaticamente implementada e alojada pela sua instância das Aplicações Web Estáticas. O fluxo de trabalho do GitHub Actions que compila e implementa a sua aplicação localiza a API dentro do seu repositório através do nome da pasta especificada.
Normalmente, você coloca o aplicativo de API em uma pasta chamada api ou funções, mas pode nomeá-lo como preferir.
E se não tiver uma API? Não se preocupe. Se as Aplicações Web Estáticas do Azure não conseguirem localizar uma API na pasta que indicou, a API não será publicada, mas a sua aplicação sê-lo-á.
Utilizar rotas de contingência
Você vê um erro 404 quando atualiza 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 produtos para servir. Felizmente, é fácil resolver isto através da criação de uma rota de contingência. Uma rota de contingência é uma rota que faz a correspondência de todos os pedidos de página que não correspondem com o servidor.
Os Aplicativos Web Estáticos do Azure dão suporte a regras de roteamento personalizadas definidas em um arquivo staticwebapp.config.json opcional localizado na pasta de saída de compilação do aplicativo.
Você pode configurar seu aplicativo para usar regras que implementam uma rota de fallback, conforme mostrado no exemplo a seguir que usa um curinga de caminho com filtro de arquivo:
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
}
}
Esta regra diz aos Aplicativos Web Estáticos do Azure para servir index.html quando uma solicitação de um recurso não for encontrada, excluindo as imagens e os arquivos CSS mostrados exclude na expressão.
Localização do ficheiro de rota
Os Aplicativos Web Estáticos do Azure esperam que seu arquivo staticwebapp.config.json esteja no output_location por padrão. Se o seu processo de compilação copia seu arquivo destaticwebapp.config.json para o output_location, então não há mais nada que você precise fazer. Para a maioria dos projetos, o output_location é relativo ao app_location.
O arquivo staticwebapp.config.json para seu aplicativo 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óximos passos
Então, do que precisa para poder publicar a sua aplicação Web nas Aplicações Web Estáticas do Azure? Só precisa da aplicação no seu repositório do GitHub.