Implante um aplicativo Blazor nos Aplicativos Web Estáticos do Azure

Os Aplicativos Web Estáticos do Azure publicam um site em um ambiente de produção compilando aplicativos por um repositório GitHub que tem suporte de um back-end sem servidor. O tutorial a seguir demonstra como implantar o aplicativo Blazor WebAssembly em C# que exibe dados meteorológicos retornados por uma API sem servidor.

Pré-requisitos

• 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 a introdução. O modelo apresenta um aplicativo inicial que você implantará nos Aplicativos Web Estáticos do Azure.

1. Verifique se você está conectado ao GitHub e vá até a seguinte localização para criar um novo repositório: https://github.com/staticwebdev/blazor-starter/generate
2. Dê ao seu repositório o nome my-first-static-blazor-app.

2. Criar um aplicativo Web estático

Agora que o repositório foi criado, crie um aplicativo Web estático no portal do Azure.

1. Acesse o portal do Azure.

2. Selecione Criar um recurso.

3. Pesquise Aplicativos Web Estáticos.

4. Selecione Aplicativo Web Estático.

5. Selecione Criar.

6. Na guia Básico, insira os valores a seguir.

   Propriedade	Valor
   Assinatura	Seu nome da assinatura do Azure.
   Grupo de recursos	my-blazor-group
   Nome	my-first-static-blazor-app
   Tipo de plano	Gratuito
   Região da API do Azure Functions e dos ambientes de preparo	Selecione a região mais próxima de você.
   Origem	GitHub

7. Selecione Entrar com o GitHub e faça a autenticação no GitHub, caso seja solicitado.

8. Insira os valores do GitHub a seguir.

   Propriedade	Valor
   Organização	Selecione a organização do GitHub desejada.
   Repositório	Selecione my-first-static-blazor-app.
   Branch	Selecione main.

   Observação

   Se você não vir nenhum repositório, talvez seja necessário autorizar o Aplicativos Web Estáticos do Azure no GitHub. Em seguida, navegue até o repositório do GitHub e acesse Configurações > Aplicativos > Aplicativos OAuth Autorizados, selecione Aplicativos Web Estáticos do Azure e clique em Conceder. Em repositórios corporativos, você precisa ser um proprietário da organização para conceder as permissões.

9. Na seção Detalhes do Build, selecione Blazor no menu suspenso Predefinições de Build e os valores a seguir são populados.

   Propriedade	Valor	Descrição
   Localização do aplicativo	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	Pasta na saída de build que contém o aplicativo Blazor WebAssembly publicado

10. Selecione Examinar + Criar para verificar se todos os detalhes estão corretos.

11. Selecione Criar para iniciar a criação do aplicativo Web estático e provisione um GitHub Actions para a implantação.

12. Após a conclusão da implantação, selecione Ir para o recurso.

13. Selecione Ir para o recurso.

3. Exibir o site

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

Antes de navegar até o novo aplicativo Web estático, o build de implantação primeiro deve 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.

1. Selecione a barra de notificação que indica Clique aqui para verificar o status das execuções do GitHub Actions para ver o GitHub Actions em execução no repositório. Após verificar se o trabalho de implantação foi concluído, você poderá ir até o site por meio da URL gerada.

   

2. Depois que o fluxo de trabalho do GitHub Actions for concluído, selecione o link URL para abrir o site na nova guia.

   

4. Entender 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 com suporte de um back-end de API do Azure Functions.

Aplicativo Web estático do Blazor

Rota de fallback

O aplicativo expõe URLs como /counter e /fetchdata, que são mapeados para rotas específicas do aplicativo. Como esse aplicativo é implementado como um aplicativo de página única, cada rota recebe o arquivo index.html. Para garantir que as solicitações para qualquer caminho retornem index.html, uma rota de fallback é implementada no arquivo staticwebapp.config.json encontrado na pasta raiz do projeto do cliente.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

A configuração JSON acima garante que as solicitações para qualquer rota no aplicativo retornem a página index.html.

Limpar os recursos

Se você não for usar esse aplicativo, poderá excluir a instância dos Aplicativos Web Estáticos do Azure com as seguintes etapas:

1. Abra o portal do Azure.
2. Pesquise my-blazor-group na barra de pesquisa superior.
3. Selecione o nome do grupo.
4. Selecione Excluir.
5. Selecione Sim para confirmar a ação de exclusão.

Próximas etapas

Artigos relacionados

• Configurar a autenticação e a autorização
• Definir as configurações do aplicativo
• Habilitar o monitoramento
• CLI do Azure