Planear a Aplicação Web Estática do Azure

3 minutos

O seu objetivo final é alojar a sua aplicação no Azure. As Aplicações Web Estáticas do Azure tratam do aprovisionamento de todos os recursos necessários do Azure de forma automática.

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

Os Aplicativos Web Estáticos do Azure foram projetados para hospedar aplicativos enquanto o código-fonte reside no GitHub. Ao criar uma instância de Static Web Apps, você entra no GitHub e especifica o repositório que contém o código do seu aplicativo.

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	Description	Necessário
Localização da aplicação	Cliente	A localização do código fonte da aplicação Web	Sim
Local de saída	wwwroot	A localização dos artefatos de compilação do seu aplicativo	Não
Localização da API	Api	A localização do código fonte para a sua API	Não

O local de saída é um caminho relativo para o diretório de publicação do seu aplicativo. Por exemplo, imagine que temos uma aplicação em Client que produz os respetivos elementos de compilação para uma pasta bin/<build profile>/<framework>/publish/wwwroot. Nesse caso, você só precisa especificar wwwroot para esse local, pois o sistema de publicação cuida do restante do prefixo.

Do código fonte para os elementos estáticos com o GitHub Actions

Seu repositório GitHub contém código-fonte, não ativos estáticos, portanto, ele precisa ser construído antes de 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. Toda vez que você envia por push alterações ou cria uma solicitação pull na ramificação da qual você libera, o fluxo de trabalho cria seu aplicativo. Esse processo transforma seu código-fonte em ativos estáticos que o Azure serve. Após a conclusão da compilação, a ação implanta os ativos.

A ação do GitHub Actions é 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 seu aplicativo exigir uma API, você poderá implementá-lo como um projeto do Azure Functions em seu repositório, e sua instância de Aplicativos Web estáticos implantará e hospedará automaticamente. O fluxo de trabalho de Ações do GitHub que cria e implanta seu aplicativo localiza a API em seu repositório usando o nome da pasta especificada no caminho do local da API.

E se não tiver uma API? Não se preocupe. Se os Aplicativos Web Estáticos do Azure não conseguirem encontrar uma API na pasta que você indicar, ele não publicará uma API, mas ainda publicará seu aplicativo.

Próximos passos