Implantar um aplicativo Blazor em Aplicativos Web Estáticos do Azure
Os Aplicativos Web Estáticos do Azure publicam um site em um ambiente de produção criando aplicativos a partir de um repositório GitHub suportado por um back-end sem servidor. O tutorial a seguir mostra como implantar o aplicativo C# Blazor WebAssembly que exibe dados meteorológicos retornados por uma API sem servidor.
Nota
Para conhecer as etapas para implantar um aplicativo Blazor por meio do Visual Studio, consulte Implantar um aplicativo Blazor em aplicativos Web estáticos do Azure.
Pré-requisitos
- Conta do GitHub
- Conta do Azure. Se você não tiver uma assinatura do Azure, crie uma conta de avaliação gratuita.
1. Criar um repositório
Este artigo usa um repositório de modelos do GitHub para facilitar os primeiros passos. O modelo apresenta um aplicativo inicial que você pode implantar nos Aplicativos Web Estáticos do Azure.
- Verifique se você está conectado ao GitHub e vá para o seguinte local para criar um novo repositório: https://github.com/staticwebdev/blazor-starter/generate
- Nomeie seu repositório como my-first-static-blazor-app.
2. Crie um aplicativo Web estático
Agora que o repositório foi criado, crie um aplicativo Web estático no portal do Azure.
Aceda ao portal do Azure.
Selecione Criar um Recurso.
Pesquise por aplicativos Web estáticos.
Selecione Aplicativo Web estático.
Selecione Criar.
Na guia Noções básicas, insira os seguintes valores.
Property valor Subscrição Seu nome de assinatura do Azure. Grupo de recursos my-blazor-grupo Nome my-first-static-blazor-app Tipo de plano Gratuito Região para API do Azure Functions e ambientes de preparo Selecione a região mais próxima de si. Source GitHub Selecione Entrar com o GitHub e autentique-se com o GitHub, se solicitado.
Insira os seguintes valores do GitHub.
Property valor Organização Selecione sua organização desejada no GitHub. Repositório Selecione my-first-static-blazor-app. Ramo Selecione principal. Nota
Se você não vir nenhum repositório, talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure no GitHub. Em seguida, navegue até o repositório do GitHub e vá para Configurações de Aplicativos > OAuth Autorizados, selecione Aplicativos Web Estáticos do Azure e selecione Conceder>. Para repositórios de organização, você deve ser um proprietário da organização para conceder as permissões.
Na seção Detalhes da compilação, selecione Blazor na lista suspensa Predefinições de compilação e os seguintes valores serão preenchidos.
Property valor Description Localização da aplicação Cliente Pasta que contém o aplicativo Blazor WebAssembly Localização da API Api Pasta que contém o aplicativo Azure Functions Local de saída wwwroot [en] Pasta na saída de compilação que contém o aplicativo Blazor WebAssembly publicado Selecione Rever + Criar para verificar se os detalhes estão corretos.
Selecione Criar para iniciar a criação do aplicativo Web estático e provisionar um GitHub Actions para implantação.
Quando a implantação estiver concluída, selecione Ir para o recurso.
Selecione Ir para recurso.
3. Ver o site
Há dois aspetos na implantação de um aplicativo estático. 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.
Antes de poder ir para seu novo aplicativo Web estático, a compilação de implantação deve primeiro concluir a execução.
A janela de visão geral de Aplicativos Web estáticos exibe uma série de links que ajudam você a interagir com seu aplicativo Web.
Selecione o banner que diz: Clique aqui para verificar o status das execuções das Ações do GitHub para ver as Ações do GitHub em execução no seu repositório. Depois de verificar se o trabalho de implantação está concluído, você pode acessar seu site por meio da URL gerada.
Quando o fluxo de trabalho de Ações do GitHub estiver concluído, você poderá selecionar o link de URL para abrir o site em uma nova guia.
4. Entenda a visão geral do aplicativo
Juntos, os projetos a seguir compõem as partes necessárias para criar um aplicativo Blazor WebAssembly em execução no navegador suportado por um back-end da API do Azure Functions.
| Projeto do Visual Studio | Description |
|---|---|
| Api | O aplicativo C# Azure Functions implementa o ponto de extremidade da API que fornece informações meteorológicas para o aplicativo Blazor WebAssembly. O WeatherForecastFunction retorna uma matriz de WeatherForecast objetos. |
| Cliente | O projeto front-end Blazor WebAssembly. Uma rota de fallback é implementada para garantir que o roteamento do lado do cliente seja funcional. |
| Partilhado | Contém classes comuns referenciadas pelos projetos Api e Client, que permitem que os dados fluam do ponto de extremidade da API para o aplicativo Web front-end. A WeatherForecast classe é compartilhada entre os dois aplicativos. |
Aplicativo Web estático Blazor
Rota de fallback
O aplicativo expõe URLs como /counter e /fetchdata, que mapeiam para rotas específicas do aplicativo. Uma vez que este aplicativo é implementado como uma única página, cada rota é servido o index.html arquivo. Para garantir que as solicitações para qualquer caminho retornemindex.html, uma rota de fallback é implementada staticwebapp.config.json no arquivo encontrado na pasta raiz do projeto cliente.
{
"navigationFallback": {
"rewrite": "/index.html"
}
}
A configuração JSON garante que as solicitações para qualquer rota no aplicativo retornem a index.html página.
Clean up resources (Limpar recursos)
Se você não for usar esse aplicativo, poderá excluir a instância dos Aplicativos Web Estáticos do Azure por meio das seguintes etapas:
- Abra o portal do Azure.
- Procure my-blazor-group na barra de pesquisa superior.
- Selecione o nome do grupo.
- Selecione Eliminar.
- Selecione Sim para confirmar a ação de exclusão.