Hosta och distribuera appar på server-sidan Blazor

Blazor WebAssembly förhandsladdning av statiska resurser

Komponenten ResourcePreloader i komponentens App huvudinnehåll (App.razor) används för att referera Blazor till statiska tillgångar. Komponenten placeras efter bas-URL-taggen (<base>):

<ResourcePreloader />

En Razor komponent används i stället för <link> element eftersom:

• Komponenten gör det möjligt för bas-URL:en (<base> taggens href attributvärde) att korrekt identifiera roten av Blazor-appen inom en ASP.NET Core-app.
• Funktionen kan tas bort genom att ta bort komponenttaggen ResourcePreloader från komponenten App . Det här är användbart i fall där appen använder ett loadBootResource återanrop för att ändra URL:er.

Transporter

Blazor fungerar bäst när du använder WebSockets som SignalR transport på grund av lägre svarstid, bättre tillförlitlighet och förbättrad säkerhet. Long Polling används av SignalR när WebSockets inte är tillgängligt eller när appen uttryckligen har konfigurerats för att använda Long Polling.

En konsolvarning visas om Long Polling används:

Det gick inte att ansluta via WebSockets, så fallback-transportmetoden Long Polling används. Detta kan bero på att ett VPN eller en proxy blockerar anslutningen.

Globala distributions- och anslutningsfel

Rekommendationer för globala distributioner till geografiska datacenter:

• Distribuera appen till de regioner där de flesta användare finns.
• Ta hänsyn till den ökade svarstiden för trafik över kontinenter. Information om hur du styr utseendet på återanslutningsgränssnittet finns i ASP.NET Core-vägledningBlazorSignalR.
• Överväg att använda Azure SignalR Service.

Azure SignalR Service med SDK v1.26.1 eller senare stöder SignalR tillståndskänslig återanslutning (WithStatefulReconnect).

Azure Container-appar

En djupare undersökning av skalning av appar på serversidan Blazor i Azure Container Apps-tjänsten finns i Skala ASP.NET Core Apps i Azure. Handledningen förklarar hur du skapar och integrerar de tjänster som krävs för att hosta appar i Azure Container Apps. Grundläggande steg finns också i det här avsnittet.

1. Konfigurera Azure Container Apps-tjänsten för sessionstillhörighet genom att följa riktlinjerna i Sessionstillhörighet i Azure Container Apps (Azure-dokumentation).

2. Tjänsten ASP.NET Core Data Protection (DP) måste konfigureras för att bevara nycklar på en central plats som alla containerinstanser kan komma åt. Nycklarna kan lagras i Azure Blob Storage och skyddas med Azure Key Vault. DP-tjänsten använder nycklarna för att deserialisera Razor komponenter. Om du vill konfigurera DP-tjänsten att använda Azure Blob Storage och Azure Key Vault refererar du till följande NuGet-paket:

   • Azure.Identity: Tillhandahåller klasser för att arbeta med Azures identitets- och åtkomsthanteringstjänster.
   • Microsoft.Extensions.Azure: Tillhandahåller användbara tilläggsmetoder för att utföra grundläggande Azure-konfigurationer.
   • Azure.Extensions.AspNetCore.DataProtection.Blobs: Tillåter lagring av ASP.NET Core Data Protection-nycklar i Azure Blob Storage så att nycklar kan delas mellan flera instanser av en webbapp.
   • Azure.Extensions.AspNetCore.DataProtection.Keys: Aktiverar skydd av vilande nycklar med hjälp av nyckelkryptering/omslutningsfunktionen i Azure Key Vault.

   Anmärkning

   Mer information om hur du lägger till paket i .NET-appar finns i artiklarna under Installera och hantera paket på Arbetsflöde för paketförbrukning (NuGet-dokumentation). Bekräfta rätt paketversioner på NuGet.org.

3. Uppdatera Program.cs med följande markerade kod:

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

   De föregående ändringarna gör det möjligt för appen att hantera DP-tjänsten med hjälp av en centraliserad, skalbar arkitektur. DefaultAzureCredential identifierar den hanterade identiteten för containerappen när koden har distribuerats till Azure och använder den för att ansluta till bloblagring och appens nyckelvalv.

4. Utför följande steg för att skapa den hanterade identiteten för containerappen och ge den åtkomst till bloblagring och ett nyckelvalv:

   1. I Azure-portalen går du till översiktssidan för containerappen.
   2. Välj Tjänstanslutning i det vänstra navigeringsfältet.
   3. Välj + Skapa i det övre navigeringsfönstret.
   4. I den utfällbara menyn Skapa anslutning anger du följande värden:
      • Container: Välj den containerapp som du skapade som värd för din app.
      • Tjänsttyp: Välj Blob Storage.
      • Prenumeration: Välj den prenumeration som äger containerappen.
      • Anslutningsnamn: Ange namnet scalablerazorstorage.
      • Klienttyp: Välj .NET och välj sedan Nästa.
   5. Välj Systemtilldelad hanterad identitet och välj Nästa.
   6. Använd standardinställningarna för nätverket och välj Nästa.
   7. När Azure har verifierat inställningarna väljer du Skapa.

   Upprepa de föregående inställningarna för nyckelvalvet. Välj lämplig nyckelvalvstjänst och nyckel på fliken Grundläggande .

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