托管和部署服务器端 Blazor 应用

Blazor WebAssembly 静态资源预加载

在ResourcePreloader组件的头内容(App)中，App.razor组件用于引用Blazor静态资产。 组件放置在基本 URL 标记之后（<base>）：

<ResourcePreloader />

使用Razor组件，而不是使用<link>元素，因为选择Razor组件有以下原因：

• 该组件允许基础 URL（<base> 标签的 href 属性值）正确识别 ASP.NET Core 应用程序中的 Blazor 应用程序根目录。
• 可以通过从ResourcePreloader组件中删除App组件标记来删除该功能。 这在应用使用 loadBootResource 回调修改 URL 的场景中尤其有用。

运输工具

Blazor 使用 WebSocket 作为 SignalR 传输时，效果最佳，因为延迟较低、可靠性更好， 安全性更高。 当 WebSocket 不可用时，或在将应用显式配置为使用长轮询时， 将使用SignalR。

如果使用长轮询，则会出现控制台警告：

无法通过 WebSocket 连接，已切换到使用 Long Polling 作为备用传输方式。 这可能是由于 VPN 或代理阻止了连接。

全局部署和连接失败

全球部署到地理数据中心的建议：

• 将应用部署到大多数用户所在的区域。
• 考虑到跨大洲流量的延迟增加。 若要控制重新连接 UI 的外观，请参阅 ASP.NET 核心 BlazorSignalR 指南。
• 请考虑使用 Azure SignalR 服务。

具有 SDK SignalR 或更高版本的 Azure 服务支持 SignalR 有状态重新连接 (WithStatefulReconnect)。

Azure 容器应用

若要深入了解如何在 Azure 容器应用服务上缩放服务器端 Blazor 应用，请参阅 在 Azure 上缩放 ASP.NET 核心应用。 本教程介绍如何创建和集成在 Azure 容器应用上托管应用所需的服务。 本节中还提供了基本步骤。

1. 按照 Azure 容器应用（Azure 文档）中的会话相关性中的指导，为会话关联配置 Azure 容器应用服务。

2. 必须将 ASP.NET Core Data Protection （DP） 服务配置为将所有容器实例都可访问的集中位置保存密钥。 密钥可以存储在 Azure Blob 存储中，并使用 Azure Key Vault 进行保护。 DP 服务使用密钥反序列化 Razor 组件。 若要将 DP 服务配置为使用 Azure Blob 存储和 Azure Key Vault，请引用以下 NuGet 包：

   • Azure.Identity：提供用于 Azure 标识和访问管理服务的类。
   • Microsoft.Extensions.Azure：提供有用的扩展方法来执行核心 Azure 配置。
   • Azure.Extensions.AspNetCore.DataProtection.Blobs：允许在 Azure Blob 存储中存储 ASP.NET 核心数据保护密钥，以便可以在 Web 应用的多个实例之间共享密钥。
   • Azure.Extensions.AspNetCore.DataProtection.Keys：使用 Azure Key Vault 密钥加密/包装功能启用静态密钥保护。

   注释

   有关将包添加到 .NET 应用的指南，请参阅包使用工作流（NuGet 文档）中“安装和管理包”下的文章。 在 NuGet.org 中确认正确的包版本。

3. 使用以下突出显示的代码更新 Program.cs：

   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();
   

   上述更改允许应用使用集中式可缩放体系结构管理 DP 服务。 DefaultAzureCredential 将代码部署到 Azure 后发现容器应用托管标识，并使用它连接到 Blob 存储和应用的密钥保管库。

4. 若要创建容器应用托管标识并向其授予对 Blob 存储和密钥保管库的访问权限，请完成以下步骤：

   1. 在 Azure 门户中，导航到容器应用的概述页。
   2. 从左侧导航中选择 服务连接器 。
   3. 从顶部导航中选择 “+ 创建 ”。
   4. 在 “创建连接 ”浮出控件菜单中，输入以下值：
      • 容器：选择您创建的容器应用来托管您的应用。
      • 服务类型：选择 Blob 存储器。
      • 订阅：选择拥有容器应用的订阅。
      • 连接名称：输入名称scalablerazorstorage。
      • 客户端类型：选择 .NET ，然后选择“ 下一步”。
   5. 选择 系统分配的托管标识 ，然后选择“ 下一步”。
   6. 使用默认网络设置并选择“ 下一步”。
   7. Azure 验证设置后，选择“创建”。

   对密钥保管库重复上述设置。 在 “基本信息 ”选项卡中选择相应的密钥保管库服务和密钥。

@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();
        }
    }
}