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.

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.

1. 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
2. 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.

1. Aceda ao portal do Azure.

2. Selecione Criar um Recurso.

3. Pesquise por aplicativos Web estáticos.

4. Selecione Aplicativo Web estático.

5. Selecione Criar.

6. Na guia Noções básicas, insira os seguintes valores.

   Propriedade	valor
   Subscrição	Seu nome de assinatura do Azure.
   Grupo de recursos	my-blazor-group
   Nome	my-first-static-blazor-app
   Tipo de plano	Gratuito
   Região para a API de Funções do Azure e ambientes de preparação	Selecione a região mais próxima de si.
   Origem	GitHub

7. Selecione Entrar com o GitHub e autentique-se com o GitHub, se solicitado.

8. Insira os seguintes valores do GitHub.

   Propriedade	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é ao seu repositório no GitHub e vá para Definições > Aplicações > Aplicações OAuth autorizadas, selecione Aplicações Web Estáticas do Azure e, em seguida, selecione Conceder. Para conceder permissões em repositórios da organização, tem de ser proprietário da organização.

9. Na secção Detalhes da compilação, selecione Blazor na lista pendente Predefinições de compilação e os seguintes valores são preenchidos.

   Propriedade	valor	Descrição
   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 Funções do Azure
   Local de saída	wwwroot	Pasta na saída de compilação que contém o aplicativo Blazor WebAssembly publicado

10. Selecione Rever + criar para verificar se todos os detalhes estão corretos.

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

12. Quando a implantação estiver concluída, selecione Ir para o recurso.

13. Selecione Ir para o recurso.

3. Ver o website

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 aceder à sua nova aplicação Web estática, o processo de compilação da implementação tem primeiro de terminar.

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 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.

   

2. 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 Funções do Azure.

Aplicativo Web estático Blazor

Rota de recurso

A aplicação expõe URLs como /counter e /fetchdata, que correspondem a rotas específicas da aplicação. Uma vez que esta aplicação está implementada como página única, cada rota é servida pelo ficheiro index.html. Para garantir que os pedidos para qualquer caminho devolvem index.html, é implementada uma rota de contingência no ficheiro staticwebapp.config.json localizado 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.

Implantar a partir do Visual Studio

Como alternativa à implementação através do GitHub Actions, pode implementar diretamente para Aplicações Web Estáticas do Azure a partir do Visual Studio. Crie um perfil de publicação para Aplicações Web Estáticas do Azure:

1. Na interface de utilizador do Publish 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 do 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 do Create Static Web App do portal do Azure, defina o Detalhes da Implantação>Origem para Outros. Aguarde a conclusão da implantação no portal do Azure antes de continuar.

3. Na configuração do perfil de publicação, selecione a instância dos Aplicativos Web Estáticos do Azure no grupo de recursos da instância. Selecione Finalizar para criar o perfil de publicação. Se o Visual Studio solicitar a instalação da CLI de aplicativos Web estáticos (SWA), instale a CLI seguindo os prompts. A CLI 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 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:

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

Próximos passos

Artigos relacionados

• Configurar autenticação e autorização
• Definir definições da aplicação
• Habilitar monitoramento
• CLI do Azure