Hospedar e implantar aplicativos Blazor do lado do servidor

Pré-carregamento de ativos estáticos do Blazor WebAssembly

O componente ResourcePreloader no conteúdo do cabeçalho do componente App (App.razor) é utilizado para fazer referência a ativos estáticos do Blazor. O componente é colocado após a marca de URL base (<base>):

<ResourcePreloader />

Um Razor componente é usado em vez de <link> elementos porque:

• O componente permite que a URL base (valor de atributo da tag <base> de href) identifique corretamente o diretório raiz do aplicativo Blazor em um aplicativo ASP.NET Core.
• O recurso pode ser removido ao remover o marcador ResourcePreloader do componente App. Isso é útil nos casos em que o aplicativo utiliza um retorno de chamada loadBootResource para modificar URLs.

Transportes

Blazor funciona melhor ao usar WebSockets como o transporte do SignalR devido à menor latência, melhor confiabilidade e maior segurança. A Sondagem Longa é usada por SignalR quando WebSockets não está disponível ou quando o aplicativo está explicitamente configurado para usar a Sondagem Longa.

Um aviso do console será exibido se a Sondagem Longa for utilizada:

Falha ao se conectar por meio de WebSockets usando o transporte de fallback de Sondagem Longa. Isso pode ocorrer porque uma VPN ou proxy está bloqueando a conexão.

Falhas globais de implantação e conexão

Recomendações para implantações globais nos data centers geográficos:

• Implante o aplicativo nas regiões em que a maioria dos usuários reside.
• Leve em consideração o aumento da latência para o tráfego em todos os continentes. Para controlar a aparência da UI de reconexão, veja a orientação do ASP.NET Core BlazorSignalR.
• Considerar o uso de serviços do AzureSignalR.

O Serviço do SignalR Azure com o SDK v1.26.1 ou posterior dá suporte a SignalR reconexão com estado (WithStatefulReconnect).

Aplicativos de Contêiner do Azure

Para ver uma exploração mais detalhada da escala de aplicativos Blazor do lado do servidor no serviço Aplicativos de Contêiner do Azure, confira Como escalar aplicativos ASP.NET Core no Azure. O tutorial explica como criar e integrar os serviços necessários para hospedar aplicativos nos Aplicativos de Contêiner do Azure. As etapas básicas também são fornecidas nesta seção.

1. Configure o serviço Aplicativos de Contêiner do Azure para a afinidade de sessão seguindo as diretrizes descritas em Afinidade de sessão nos Aplicativos de Contêiner do Azure (documentação do Azure).

2. O serviço de DP (Proteção de Dados) do ASP.NET Core deve ser configurado para manter as chaves em uma localização centralizada que todas as instâncias de contêiner poderem acessar. As chaves podem ser armazenadas no Armazenamento de Blobs do Azure e protegidas com o Azure Key Vault. O serviço de proteção de dados utiliza as chaves para desserializar componentes Razor. Para configurar o serviço de proteção de dados para usar o Armazenamento de Blobs do Azure e o Azure Key Vault, consulte os seguintes pacotes NuGet:

   • Azure.Identity: fornece classes para trabalhar com os serviços de gerenciamento de acesso e identidade do Azure.
   • Microsoft.Extensions.Azure: fornece métodos de extensão úteis para executar as principais configurações do Azure.
   • Azure.Extensions.AspNetCore.DataProtection.Blobs: permite armazenar chaves de Proteção de Dados ASP.NET Core no Armazenamento de Blobs do Azure para que as chaves possam ser compartilhadas entre várias instâncias de um aplicativo Web.
   • Azure.Extensions.AspNetCore.DataProtection.Keys: habilita a proteção de chaves em repouso usando o recurso de Criptografia/Encapsulamento de Chaves do Azure Key Vault.

   Observação

   Para obter diretrizes sobre como adicionar pacotes a aplicativos .NET, consulte os artigos em Instalar e gerenciar pacotes no Fluxo de trabalho de consumo de pacotes (documentação do NuGet). Confirme as versões corretas de pacote em NuGet.org.

3. Atualize Program.cs com o seguinte código realçado:

   using Azure.Identity;
   using Microsoft.AspNetCore.DataProtection;
   using Microsoft.Extensions.Azure;
   
   var builder = WebApplication.CreateBuilder(args);
   var BlobStorageUri = builder.Configuration["AzureURIs:BlobStorage"];
   var KeyVaultURI = builder.Configuration["AzureURIs:KeyVault"];
   
   builder.Services.AddRazorPages();
   builder.Services.AddHttpClient();
   builder.Services.AddServerSideBlazor();
   
   builder.Services.AddAzureClientsCore();
   
   builder.Services.AddDataProtection()
                   .PersistKeysToAzureBlobStorage(new Uri(BlobStorageUri),
                                                   new DefaultAzureCredential())
                   .ProtectKeysWithAzureKeyVault(new Uri(KeyVaultURI),
                                                   new DefaultAzureCredential());
   var app = builder.Build();
   
   if (!app.Environment.IsDevelopment())
   {
       app.UseExceptionHandler("/Error");
       app.UseHsts();
   }
   
   app.UseHttpsRedirection();
   app.UseStaticFiles();
   
   app.UseRouting();
   
   app.UseAuthorization();
   
   app.MapRazorPages();
   
   app.Run();
   

   As alterações anteriores permitem que o aplicativo gerencie a proteção de dados com uma arquitetura centralizada e escalonável. DefaultAzureCredential descobre a identidade gerenciada do aplicativo de contêiner depois que o código é implantado no Azure e o usa para se conectar ao armazenamento de blobs e ao cofre de chaves do aplicativo.

4. Para criar a identidade gerenciada do aplicativo de contêiner e conceder-lhe acesso ao armazenamento de blobs e a um cofre de chaves, conclua as seguintes etapas:

   1. No Portal do Azure, navegue até a página de visão geral do aplicativo de contêiner.
   2. À esquerda, selecione Conector de serviço.
   3. Selecione + Criar na navegação superior.
   4. No submenu Criar conexão, insira os seguintes valores:
      • Contêiner: selecione o aplicativo de contêiner que você criou para hospedar seu aplicativo.
      • Tipo de serviço: selecione Armazenamento de Blobs.
      • Assinatura: selecione a assinatura que possui o aplicativo de contêiner.
      • Nome da conexão: insira um nome de scalablerazorstorage.
      • Tipo de cliente: selecione .NET e, em seguida, selecione Avançar.
   5. Selecione Identidade gerenciada atribuída pelo sistema e selecione Avançar.
   6. Use as configurações de rede padrão e selecione Avançar.
   7. Depois que o Azure validar as configurações, selecione Criar.

   Repita as configurações anteriores para o cofre de chaves. Selecione o serviço e a chave do cofre de chaves apropriados na guia Básico.

@inject IJSRuntime JS

<h2>Measure Latency</h2>

@if (latency is null)
{
    <span>Calculating...</span>
}
else
{
    <span>@(latency.Value.TotalMilliseconds)ms</span>
}

@code {
    private DateTime startTime;
    private TimeSpan? latency;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            startTime = DateTime.UtcNow;
            var _ = await JS.InvokeAsync<string>("toString");
            latency = DateTime.UtcNow - startTime;
            StateHasChanged();
        }
    }
}

@inject IJSRuntime JS

<h2>Measure Latency</h2>

@if (latency is null)
{
    <span>Calculating...</span>
}
else
{
    <span>@(latency.Value.TotalMilliseconds)ms</span>
}

@code {
    private DateTime startTime;
    private TimeSpan? latency;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            startTime = DateTime.UtcNow;
            var _ = await JS.InvokeAsync<string>("toString");
            latency = DateTime.UtcNow - startTime;
            StateHasChanged();
        }
    }
}

@inject IJSRuntime JS

<h2>Measure Latency</h2>

@if (latency is null)
{
    <span>Calculating...</span>
}
else
{
    <span>@(latency.Value.TotalMilliseconds)ms</span>
}

@code {
    private DateTime startTime;
    private TimeSpan? latency;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            startTime = DateTime.UtcNow;
            var _ = await JS.InvokeAsync<string>("toString");
            latency = DateTime.UtcNow - startTime;
            StateHasChanged();
        }
    }
}

@inject IJSRuntime JS

<h2>Measure Latency</h2>

@if (latency is null)
{
    <span>Calculating...</span>
}
else
{
    <span>@(latency.Value.TotalMilliseconds)ms</span>
}

@code {
    private DateTime startTime;
    private TimeSpan? latency;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            startTime = DateTime.UtcNow;
            var _ = await JS.InvokeAsync<string>("toString");
            latency = DateTime.UtcNow - startTime;
            StateHasChanged();
        }
    }
}

@inject IJSRuntime JS

@if (latency is null)
{
    <span>Calculating...</span>
}
else
{
    <span>@(latency.Value.TotalMilliseconds)ms</span>
}

@code {
    private DateTime startTime;
    private TimeSpan? latency;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            startTime = DateTime.UtcNow;
            var _ = await JS.InvokeAsync<string>("toString");
            latency = DateTime.UtcNow - startTime;
            StateHasChanged();
        }
    }
}