Compartilhar via

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

  • Artigo

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

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 vá para Configurações> Aplicativos >Aplicativos OAuth Autorizados, selecione Aplicativos Web Estáticos do Azure e, em seguida, selecioneConceder. 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.

Botão 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.

    Captura de tela mostrando a janela de visão geral.

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

    Captura de tela da página do Blazor de Aplicativos Web Estáticos.

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.

Projeto do Visual Studio Descrição
Api O aplicativo do Azure Functions em C# que implementa o ponto de extremidade de API que fornece informações meteorológicas para o aplicativo do Blazor WebAssembly. WeatherForecastFunction retorna uma matriz de WeatherForecast objetos.
Cliente O projeto do Blazor WebAssembly de front-end. Uma rota de fallback é implementada para garantir que o roteamento do lado do cliente seja funcional.
Compartilhado Contém classes comuns referenciadas por projetos de API e de cliente que permitem o fluxo de dados do ponto de extremidade de API para o aplicativo Web de front-end. A classe WeatherForecast é compartilhada entre ambos os aplicativos.

Aplicativo Web estático do BlazorAplicativo completo 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

Autenticar e autorizar