Hostowanie i wdrażanie aplikacji po stronie Blazor serwera

Blazor WebAssembly wstępne ładowanie zasobów statycznych

Składnik ResourcePreloader w zawartości head składnika App (App.razor) jest używany do odwołania do statycznych zasobów Blazor. Składnik jest umieszczany po tagu podstawowego adresu URL (<base>):

<ResourcePreloader />

Składnik Razor jest używany zamiast elementów, <link> ponieważ:

• Składnik umożliwia bazowemu adresowi URL (wartości atrybutu <base> tagu href) poprawne zidentyfikowanie korzenia aplikacji Blazor w aplikacji ASP.NET Core.
• Tę funkcję można usunąć, usuwając ResourcePreloader tag składnika ze App składnika. Jest to przydatne w przypadkach, gdy aplikacja używa wywołania zwrotnegoloadBootResource do modyfikowania adresów URL.

Transport

Blazor działa najlepiej w przypadku korzystania z obiektów WebSocket jako SignalR transportu ze względu na mniejsze opóźnienia, lepszą niezawodność i lepsze zabezpieczenia. Długie sondowanie jest używane, SignalR gdy zestawy WebSocket nie są dostępne lub gdy aplikacja jest jawnie skonfigurowana do korzystania z długiego sondowania.

Jeśli jest używane długie sondowanie, zostanie wyświetlone ostrzeżenie konsoli:

Nie można nawiązać połączenia za pośrednictwem obiektów WebSocket przy użyciu transportu rezerwowego Long Polling. Może to być spowodowane blokowaniem połączenia przez sieć VPN lub serwer proxy.

Globalne błędy wdrażania i połączenia

Zalecenia dotyczące wdrożeń globalnych w centrach danych geograficznych:

• Wdróż aplikację w regionach, w których większość użytkowników mieszka.
• Weź pod uwagę zwiększone opóźnienie ruchu na różnych kontynentach. Aby kontrolować wygląd interfejsu użytkownika ponownego łączenia, zobacz Blazor ASP.NET CoreSignalR.
• Rozważ użycie usługiSignalRAzure.

Usługa Azure SignalR z SDK w wersji 1.26.1 lub nowszej obsługuje SignalR łączenie z zachowaniem stanu (WithStatefulReconnect).

Azure Container Apps

Aby dowiedzieć się więcej na temat skalowania aplikacji po stronie Blazor serwera w usłudze Azure Container Apps, zobacz Scaling ASP.NET Core Apps on Azure (Skalowanie aplikacji ASP.NET Core Apps na platformie Azure). W tym samouczku wyjaśniono, jak tworzyć i integrować usługi wymagane do hostowania aplikacji w usłudze Azure Container Apps. Podstawowe kroki są również dostępne w tej sekcji.

1. Skonfiguruj usługę Azure Container Apps pod kątem koligacji sesji, postępując zgodnie ze wskazówkami w temacie Koligacja sesji w usłudze Azure Container Apps (dokumentacja platformy Azure).

2. Usługa ASP.NET Core Data Protection (DP) musi być skonfigurowana do utrwalania kluczy w scentralizowanej lokalizacji, do których mogą uzyskiwać dostęp wszystkie wystąpienia kontenerów. Klucze mogą być przechowywane w usłudze Azure Blob Storage i chronione za pomocą usługi Azure Key Vault. Usługa DP używa kluczy do deserializacji Razor składników. Aby skonfigurować usługę DP do korzystania z usług Azure Blob Storage i Azure Key Vault, zapoznaj się z następującymi pakietami NuGet:

   • Azure.Identity: udostępnia klasy do pracy z usługami zarządzania tożsamościami i dostępem platformy Azure.
   • Microsoft.Extensions.Azure: Udostępnia przydatne metody rozszerzenia do wykonywania podstawowych konfiguracji platformy Azure.
   • Azure.Extensions.AspNetCore.DataProtection.Blobs: umożliwia przechowywanie ASP.NET podstawowych kluczy ochrony danych w usłudze Azure Blob Storage, dzięki czemu klucze mogą być współużytkowane przez kilka wystąpień aplikacji internetowej.
   • Azure.Extensions.AspNetCore.DataProtection.Keys: umożliwia ochronę kluczy magazynowanych przy użyciu funkcji szyfrowania/opakowowania kluczy usługi Azure Key Vault.

   Uwaga / Notatka

   Aby uzyskać wskazówki dotyczące dodawania pakietów do aplikacji .NET, zobacz artykuły w Instalowanie i zarządzanie pakietami oraz w proces korzystania z pakietów (dokumentacja NuGet). Sprawdź prawidłowe wersje pakietów pod adresem NuGet.org.

3. Zaktualizuj Program.cs za pomocą następującego wyróżnionego kodu:

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

   Powyższe zmiany umożliwiają aplikacji zarządzanie usługą DP przy użyciu scentralizowanej, skalowalnej architektury. DefaultAzureCredential odkrywa zarządzaną tożsamość aplikacji kontenera po wdrożeniu kodu na platformie Azure i wykorzystuje ją do połączenia się z magazynem obiektów blob oraz skarbcem kluczy aplikacji.

4. Aby utworzyć zarządzaną tożsamość aplikacji kontenerowej i przyznać jej dostęp do magazynu obiektów Blob oraz magazynu Key Vault, wykonaj następujące kroki:

   1. W witrynie Azure Portal przejdź do strony przeglądu aplikacji kontenera.
   2. Wybierz pozycję Łącznik usługi w obszarze nawigacji po lewej stronie.
   3. Wybierz pozycję + Utwórz z górnej nawigacji.
   4. W menu wysuwany Tworzenie połączenia wprowadź następujące wartości:
      • Kontener: wybierz utworzoną aplikację kontenera do hostowania aplikacji.
      • Typ usługi: wybierz pozycję Blob Storage.
      • Subskrypcja: wybierz subskrypcję, która jest właścicielem aplikacji kontenera.
      • Nazwa połączenia: wprowadź nazwę scalablerazorstorage.
      • Typ klienta: wybierz pozycję .NET , a następnie wybierz przycisk Dalej.
   5. Wybierz pozycję Tożsamość zarządzana przypisana przez system i wybierz pozycję Dalej.
   6. Użyj domyślnych ustawień sieciowych i wybierz pozycję Dalej.
   7. Po zweryfikowaniu ustawień przez platformę Azure wybierz pozycję Utwórz.

   Powtórz powyższe ustawienia dla magazynu kluczy. Wybierz odpowiednią usługę i klucz magazynu kluczy na karcie Podstawy .

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