Implementar uma aplicação Blazor no Aplicações Web Estáticas do Azure

  • Artigo

Aplicações Web Estáticas do Azure publica um site num ambiente de produção ao criar aplicações a partir de um repositório do GitHub suportado por um back-end sem servidor. O tutorial seguinte mostra como implementar a aplicação C# Blazor WebAssembly que apresenta os dados meteorológicos devolvidos por uma API sem servidor.

Pré-requisitos

1. Criar um repositório

Este artigo utiliza um repositório de modelos do GitHub para facilitar a introdução. O modelo apresenta uma aplicação inicial que pode implementar no Aplicações Web Estáticas do Azure.

  1. Certifique-se de que tem sessão iniciada no GitHub e aceda à seguinte localização para criar um novo repositório: https://github.com/staticwebdev/blazor-starter/generate
  2. Atribua o nome my-first-static-blazor-app ao seu repositório.

2. Criar uma aplicação Web estática

Agora que o repositório foi criado, crie uma aplicação Web estática a partir do portal do Azure.

  1. Aceda ao Portal do Azure.

  2. Selecione Criar um Recurso.

  3. Procure Aplicações Web Estáticas.

  4. Selecione Aplicação Web Estática.

  5. Selecione Criar.

  6. No separador Noções básicas , introduza os seguintes valores.

    Propriedade Valor
    Subscrição O nome da sua subscrição do Azure.
    Grupo de recursos my-blazor-group
    Nome my-first-static-blazor-app
    Tipo de plano Gratuito
    Região para Funções do Azure API e ambientes de teste Selecione uma região mais próxima de si.
    Origem GitHub

  7. Selecione Iniciar sessão com o GitHub e efetue a autenticação com o GitHub, se lhe for pedido.

  8. Introduza os seguintes valores do GitHub.

    Propriedade Valor
    Organização Selecione a organização do GitHub pretendida.
    Repositório Selecione my-first-static-blazor-app.
    Ramo Selecione principal.

    Nota

    Se não vir repositórios, poderá ter de autorizar Aplicações Web Estáticas do Azure no GitHub. Em seguida, navegue para o seu repositório do GitHub e aceda a Definições Aplicações > OAuth Apps Autorizadas>, selecione Aplicações Web Estáticas do Azure e, em seguida, selecione Conceder. Para os repositórios da organização, tem de ser proprietário da organização para conceder as permissões.

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

    Propriedade Valor Descrição
    Localização da aplicação Cliente Pasta que contém a aplicação Blazor WebAssembly
    Localização da API API Pasta que contém a aplicação Funções do Azure
    Localização da saída wwwroot Pasta na saída da compilação que contém a aplicação publicada do Blazor WebAssembly

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

  11. Selecione Criar para iniciar a criação da aplicação Web estática e aprovisionar um GitHub Actions para implementação.

  12. Assim que a implementação estiver concluída, selecione Ir para recurso.

  13. Selecione Ir para recurso.

Botão Ir para recurso

3. Ver o site

Existem dois aspetos para implementar uma aplicação estática. 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, a compilação de implementação tem primeiro de concluir a execução.

A janela de descrição geral Aplicações Web Estáticas apresenta uma série de ligações que o ajudam a interagir com a sua aplicação Web.

  1. Selecione a faixa que diz Clique aqui para verificar o estado do seu GitHub Actions é executado para ver o GitHub Actions em execução no repositório. Depois de verificar se a tarefa de implementação está concluída, pode aceder ao seu site através do URL gerado.

    Captura de ecrã a mostrar a janela de descrição geral.

  2. Assim que GitHub Actions fluxo de trabalho estiver concluído, pode selecionar a ligação de URL para abrir o site no novo separador.

    Captura de ecrã a mostrar Aplicações Web Estáticas página Web do Blazor.

4. Compreender a descrição geral da aplicação

Em conjunto, os seguintes projetos constituem as partes necessárias para criar uma aplicação Do Blazor WebAssembly em execução no browser suportado por um back-end da API Funções do Azure.

Projeto do Visual Studio Descrição
API A aplicação C# Funções do Azure implementa o ponto final da API que fornece informações meteorológicas à aplicação Blazor WebAssembly. WeatherForecastFunction devolve uma matriz de WeatherForecast objetos.
Cliente O projeto do Blazor WebAssembly de front-end. É implementada uma rota de contingência para garantir que o encaminhamento do lado do cliente está funcional.
Partilhado Contém classes comuns referenciadas pelos projetos API e Client, que permitem que os dados fluam do ponto final da API para a aplicação Web de front-end. A WeatherForecast classe é partilhada entre ambas as aplicações.

Aplicação Web estática blazorComplete Blazor app.

Rota de contingência

A aplicação expõe URLs como /counter e /fetchdata, que mapeiam para rotas específicas da aplicação. Uma vez que esta aplicação é implementada como uma única página, cada rota é servida ao index.html ficheiro. Para garantir que os pedidos para qualquer caminho devolvem index.html, é implementada uma rota de contingência no staticwebapp.config.json ficheiro encontrado na pasta raiz do projeto cliente.

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

A configuração JSON garante que os pedidos para qualquer rota na aplicação devolvem a index.html página.

Limpar os recursos

Se não pretender utilizar esta aplicação, pode eliminar a instância Aplicações Web Estáticas do Azure através dos seguintes passos:

  1. Abra o portal do Azure.
  2. Procure 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 eliminação.

Passos seguintes

Autenticar e autorizar