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

O Aplicativos Web Estáticos do Azure publica um site em um ambiente de produção ao compilar aplicativos de um repositório do GitHub com 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
• 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 homologação	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 os 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. Visualizar 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 acessar seu novo aplicativo Web estático, a compilação da implantação precisa primeiro terminar de ser executada.

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 alternativa

O aplicativo expõe URLs como /counter e /fetchdata, que correspondem a 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.

Implantação pelo Visual Studio

Como alternativa à implantação por meio de GitHub Actions, você pode implantar em Aplicativos Web Estáticos do Azure diretamente de Visual Studio. Crie um perfil de publicação para Aplicativos Web Estáticos do Azure:

1. Na interface do usuário Publicar do Visual Studio, selecione Destino> Azure>Destino Específico>Aplicativos Web Estáticos do Azure para criar um perfil de publicação.

2. Na configuração de perfil de publicação, forneça o nome da assinatura. Selecione uma instância existente ou selecione Criar uma nova instância. Ao criar uma nova instância na interface do usuário Criar Aplicativo Web Estático do portal do Azure, defina os Detalhes da implantação>Fonte como Outro. Aguarde a conclusão da implantação no portal do Azure antes de prosseguir.

3. Na configuração de perfil de publicação, selecione a instância dos Aplicativos Web Estáticos do Azure no grupo de recursos da instância. Selecione Concluir para criar o perfil de publicação. Se o Visual Studio solicitar a instalação da CLI dos Aplicativos Web Estáticos (SWA), instale a CLI seguindo os prompts. A CLI da SWA requer npm/Node.js (documentação do Visual Studio).

Depois que o perfil de publicação for criado, implante o aplicativo na instância dos Aplicativos Web Estáticos do Azure usando o perfil de publicação selecionando o botão Publicar.

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