Размещение и развертывание серверных Blazor приложений

Blazor WebAssembly Предварительная загрузка статических активов

Компонент ResourcePreloader в содержимом головного компонента App используется для ссылки на статические ресурсы App.razor. Компонент помещается после базового тега URL-адреса (<base>):

<ResourcePreloader />

Компонент Razor используется вместо <link> элементов, так как:

• Компонент позволяет базовому URL-адресу (<base> значению атрибута тега href ) правильно определить корневой каталог Blazor приложения в приложении ASP.NET Core.
• Эту функцию можно удалить, удалив ResourcePreloader тег компонента из App компонента. Это полезно в случаях, когда приложение использует обратныйloadBootResource вызов для изменения URL-адресов.

Транспорты

Blazor Лучше всего использовать WebSockets в качестве SignalR транспорта из-за снижения задержки, повышения надежности и повышения безопасности. Длинный опрос используется, SignalR когда WebSockets недоступен или когда приложение явно настроено на использование Long Polling.

При использовании долгого опрашивания появится предупреждение в консоли.

Не удалось подключиться через WebSockets, поэтому используется резервный транспорт Long Polling. Это может быть связано с VPN или прокси-сервером, блокирующим подключение.

Глобальные сбои развертывания и подключения

Рекомендации по глобальным развертываниям в географических центрах обработки данных:

• Разверните приложение в регионах, где проживает большинство пользователей.
• Учитывайте повышенную задержку трафика на разных континентах. Сведения об управлении внешним видом пользовательского интерфейса повторного подключения см. в ASP.NET BlazorSignalR основных руководствах.
• Рассмотрите возможность использования службы AzureSignalR.

Служба Azure SignalR с пакетом SDK версии 1.26.1 или более поздней версии поддерживает SignalR повторное подключение с отслеживанием состояния (WithStatefulReconnect).

Приложения контейнеров Azure

Более подробное изучение масштабируемых серверных Blazor приложений в службе "Приложения контейнеров Azure" см. в статье "Масштабирование ASP.NET Core Apps в Azure". В этом руководстве объясняется, как создавать и интегрировать службы, необходимые для размещения приложений в приложениях контейнеров Azure. Основные шаги также приведены в этом разделе.

1. Настройте службу приложений контейнеров Azure для сопоставления сеансов, следуя инструкциям в руководстве по сопоставлению сеансов в приложениях контейнеров Azure (документация Azure).

2. Служба ASP.NET Core Data Protection (DP) должна быть настроена для сохранения ключей в централизованном расположении, к которому могут получить доступ все экземпляры контейнеров. Ключи можно хранить в хранилище BLOB-объектов Azure и защищать с помощью Azure Key Vault. Служба DP использует ключи для десериализации Razor компонентов. Чтобы настроить службу DP для использования Azure Blob Storage и Azure Key Vault, обратитесь к следующим пакетам NuGet:

   • Azure.Identity: предоставляет классы для работы со службами управления идентификацией и доступом Azure.
   • Microsoft.Extensions.Azure: предоставляет полезные методы расширения для выполнения основных конфигураций Azure.
   • Azure.Extensions.AspNetCore.DataProtection.Blobs: позволяет хранить ключи ASP.NET Core Data Protection в хранилище BLOB-объектов Azure, чтобы ключи могли совместно использоваться в нескольких экземплярах веб-приложения.
   • 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 Storage.
      • Подписка: выберите подписку, которая владеет приложением-контейнером.
      • Имя подключения: введите имя 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();
        }
    }
}