Apps aan de serverzijde Blazor hosten en implementeren

Blazor WebAssembly statische asset vooraf laden

Het ResourcePreloader onderdeel in de hoofdinhoud van het App onderdeel (App.razor) wordt gebruikt om te verwijzen naar Blazor statische assets. Het onderdeel wordt geplaatst na de basis-URL-tag (<base>):

<ResourcePreloader />

Een Razor onderdeel wordt gebruikt in plaats van <link> elementen omdat:

• Met het onderdeel kan de basis-URL (de kenmerkwaarde <base> van de tag) de hoofdmap van de href app binnen een ASP.NET Core-app correct herkennen.
• De functie kan worden verwijderd door de ResourcePreloader onderdeeltag uit het App onderdeel te verwijderen. Dit is handig in gevallen waarin de app een loadBootResource callback gebruikt om URL's te wijzigen.

Transporten

Blazor werkt het beste bij het gebruik van WebSockets als transport SignalR vanwege een lagere latentie, betere betrouwbaarheid en verbeterde beveiliging. Long Polling wordt gebruikt SignalR wanneer WebSockets niet beschikbaar is of wanneer de app expliciet is geconfigureerd voor het gebruik van Long Polling.

Er wordt een consolewaarschuwing weergegeven als Long Polling wordt gebruikt:

Aansluiting via WebSockets is mislukt, wordt gebruik gemaakt van long polling als back-uptransport. Dit kan het gevolg zijn van een VPN of proxy die de verbinding blokkeert.

Algemene implementatie- en verbindingsfouten

Aanbevelingen voor wereldwijde implementaties naar geografische datacenters:

• Implementeer de app in de regio's waar de meeste gebruikers zich bevinden.
• Let op de toegenomen latentie voor verkeer over continenten. Zie ASP.NET Core-richtlijnen BlazorSignalRvoor het beheren van het uiterlijk van de gebruikersinterface voor opnieuw verbinden.
• Overweeg het gebruik van de Azure-serviceSignalR.

De Azure SignalR-service met SDK v1.26.1 of hoger ondersteunt SignalR opnieuw verbinden met toestandsbehoud (WithStatefulReconnect).

Azure Container Apps - een dienst van Microsoft waarmee je containers kunt uitvoeren en beheren in de cloud.

Zie Blazor voor meer informatie over het schalen van apps aan de serverzijde in de Azure Container Apps-service. In de zelfstudie wordt uitgelegd hoe u de services maakt en integreert die nodig zijn voor het hosten van apps in Azure Container Apps. In deze sectie vindt u ook basisstappen.

1. Configureer de Azure Container Apps-service voor sessieaffiniteit door de richtlijnen in sessieaffiniteit in Azure Container Apps (Azure-documentatie) te volgen.

2. De service ASP.NET Core Data Protection (DP) moet worden geconfigureerd om sleutels te behouden op een centrale locatie waartoe alle containerinstanties toegang hebben. De sleutels kunnen worden opgeslagen in Azure Blob Storage en worden beveiligd met Azure Key Vault. De DP-service gebruikt de sleutels om Razor-onderdelen te deserialiseren. Raadpleeg de volgende NuGet-pakketten om de DP-service te configureren voor het gebruik van Azure Blob Storage en Azure Key Vault:

   • Azure.Identity: biedt klassen om te werken met de Azure-services voor identiteits- en toegangsbeheer.
   • Microsoft.Extensions.Azure: Biedt nuttige uitbreidingsmethoden voor het uitvoeren van kernconfiguraties van Azure.
   • Azure.Extensions.AspNetCore.DataProtection.Blobs: Hiermee kunt u ASP.NET Core Data Protection-sleutels opslaan in Azure Blob Storage, zodat sleutels kunnen worden gedeeld in verschillende exemplaren van een web-app.
   • Azure.Extensions.AspNetCore.DataProtection.Keys: Schakelt het beveiligen van sleutels in rust in met behulp van de azure Key Vault-sleutelversleuteling/wrapping-functie.

   Opmerking

   Zie de artikelen onder Pakketten installeren en beheren bij Verbruikswerkstroom voor pakketten (NuGet-documentatie)voor begeleiding bij het toevoegen van pakketten in .NET-apps. Bevestig de juiste pakketversies op NuGet.org.

3. Werk Program.cs bij met de volgende gemarkeerde code:

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

   Met de voorgaande wijzigingen kan de app de DP-service beheren met behulp van een gecentraliseerde, schaalbare architectuur. DefaultAzureCredential detecteert de beheerde identiteit van de container-app nadat de code is geïmplementeerd in Azure en gebruikt deze om verbinding te maken met blobopslag en de sleutelkluis van de app.

4. Voer de volgende stappen uit om de beheerde identiteit voor de container-app te creëren en toegang te verlenen tot blobopslag en een sleutelkluis:

   1. Navigeer in Azure Portal naar de overzichtspagina van de container-app.
   2. Selecteer ServiceConnector in het linkernavigatievenster.
   3. Selecteer + Maken in de bovenste navigatiebalk.
   4. Voer in het flyoutmenu Verbinding maken de volgende waarden in:
      • Container: Selecteer de container-app die u hebt gemaakt om uw app te hosten.
      • Servicetype: Selecteer Blob Storage.
      • Abonnement: Selecteer het abonnement dat eigenaar is van de container-app.
      • Verbindingsnaam: Voer een naam in van scalablerazorstorage.
      • Clienttype: Selecteer .NET en selecteer vervolgens 'Volgende'.
   5. Selecteer Door het systeem toegewezen beheerde identiteit en selecteer Volgende.
   6. Gebruik de standaardnetwerkinstellingen en selecteer Volgende.
   7. Nadat Azure de instellingen heeft gevalideerd, selecteert u maken.

   Herhaal de voorgaande instellingen voor de Key Vault. Selecteer de juiste sleutelkluisservice en -sleutel op het tabblad Basisbeginselen .

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