Hosten und Bereitstellen serverseitiger Blazor Apps

Blazor WebAssembly Vorladen statischer Ressourcen

Die ResourcePreloader-Komponente im Kopfinhalt der App-Komponente (App.razor) wird verwendet, um auf Blazor statische Assets zu verweisen. Die Komponente wird nach dem Basis-URL-Tag (<base>) platziert.

<ResourcePreloader />

Anstelle von Razor Elementen wird eine <link> Komponente verwendet, da:

• Die Komponente erlaubt es, mithilfe des Basis-URL-Attributwerts (<base> Tag href) den Stamm der Blazor-App innerhalb einer ASP.NET Core-App korrekt zu identifizieren.
• Das Feature kann entfernt werden, indem das ResourcePreloader Komponenten-Tag aus der App Komponente entfernt wird. Dies ist in Fällen hilfreich, in denen die App einen loadBootResource Rückruf zum Ändern von URLs verwendet.

Transporte

Blazor funktioniert am besten, wenn WebSockets als SignalR Transport aufgrund geringerer Latenz, besserer Zuverlässigkeit und verbesserter Sicherheit verwendet werden. Long Polling wird von SignalR verwendet, wenn WebSockets nicht verfügbar ist oder wenn die App explizit so konfiguriert ist, dass Long Polling verwendet wird.

Eine Konsolenwarnung wird angezeigt, wenn Long Polling verwendet wird:

Fehler beim Herstellen einer Verbindung über WebSockets mithilfe des Long Polling-Fallbacktransports. Dies kann auf ein VPN oder einen Proxy zurückzuführen sein, der die Verbindung blockiert.

Globale Bereitstellungs- und Verbindungsfehler

Empfehlungen für globale Bereitstellungen in geografischen Rechenzentren:

• Stellen Sie die App in den Regionen bereit, in denen sich die meisten Benutzer befinden.
• Berücksichtigen Sie die erhöhte Latenz für Datenverkehr über Kontinente hinweg. Informationen zum Steuern der Darstellung der Benutzeroberfläche für die erneute Verbindung finden Sie unter ASP.NET Core-AnleitungBlazorSignalR.
• Erwägen Sie die Verwendung des Azure-DienstsSignalR.

Der Azure SignalR-Dienst mit SDK v1.26.1 oder höher unterstützt SignalR statusbasiertes Wiederverbinden (WithStatefulReconnect).

Azure Container Apps – ein Dienst für containerbasierte Anwendungen

Eine tiefere Erkundung der Skalierung serverseitiger Blazor Apps im Azure-Container-Apps-Dienst finden Sie unter Skalierung ASP.NET Core Apps in Azure. Im Lernprogramm wird erläutert, wie Sie die dienste erstellen und integrieren, die zum Hosten von Apps in Azure-Container-Apps erforderlich sind. Grundlegende Schritte werden auch in diesem Abschnitt beschrieben.

1. Konfigurieren Sie den Azure-Container-Apps-Dienst für die Sitzungsaffinität, indem Sie die Anleitung in der Sitzungsaffinität in Azure-Container-Apps (Azure-Dokumentation) ausführen.

2. Der ASP.NET Core Data Protection (DP)-Dienst muss so konfiguriert werden, dass Schlüssel an einem zentralen Speicherort beibehalten werden, auf den alle Containerinstanzen zugreifen können. Die Schlüssel können in Azure Blob Storage gespeichert und mit Azure Key Vault geschützt werden. Der DP-Dienst verwendet die Schlüssel, um Razor Komponenten zu deserialisieren. Um den DP-Dienst für die Verwendung von Azure Blob Storage und Azure Key Vault zu konfigurieren, verweisen Sie auf die folgenden NuGet-Pakete:

   • Azure.Identity: Stellt Klassen für die Arbeit mit den Azure-Identitäts- und Zugriffsverwaltungsdiensten bereit.
   • Microsoft.Extensions.Azure: Stellt hilfreiche Erweiterungsmethoden zum Ausführen von Azure-Kernkonfigurationen bereit.
   • Azure.Extensions.AspNetCore.DataProtection.Blobs: Ermöglicht das Speichern von ASP.NET Kerndatenschutzschlüsseln in Azure Blob Storage, sodass Schlüssel über mehrere Instanzen einer Web-App hinweg freigegeben werden können.
   • Azure.Extensions.AspNetCore.DataProtection.Keys: Ermöglicht den Schutz ruhender Schlüssel mithilfe der Azure Key Vault Key Encryption/Wrapping-Funktion.

   Hinweis

   Eine Anleitung zum Hinzufügen von Paketen zu .NET-Anwendungen finden Sie in den Artikeln unter Pakete installieren und verwalten unter Workflow für die Paketnutzung (NuGet-Dokumentation). Überprüfen Sie unter NuGet.org, ob die richtige Paketversion verwendet wird.

3. Aktualisieren Sie Program.cs mit dem folgenden hervorgehobenen 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();
   

   Mit den vorherigen Änderungen kann die App den DP-Dienst mithilfe einer zentralen, skalierbaren Architektur verwalten. DefaultAzureCredential ermittelt die verwaltete Identität der Container-App, nachdem der Code in Azure bereitgestellt wurde, und verwendet sie, um eine Verbindung mit Blob Storage und dem Schlüsseltresor der App herzustellen.

4. Führen Sie die folgenden Schritte aus, um die verwaltete Identität der Container-App zu erstellen und ihr Zugriff auf Blobspeicher und einen Schlüsseltresor zu gewähren:

   1. Navigieren Sie im Azure-Portal zur Übersichtsseite der Container-App.
   2. Wählen Sie "Service Connector" aus der linken Navigation aus.
   3. Wählen Sie +Erstellen aus der oberen Navigationsleiste aus.
   4. Geben Sie im Flyoutmenü "Verbindung erstellen " die folgenden Werte ein:
      • Container: Wählen Sie die Container-App aus, die Sie zum Hosten Ihrer App erstellt haben.
      • Diensttyp: Wählen Sie Blob Storage aus.
      • Abonnement: Wählen Sie das Abonnement aus, das der Container-App gehört.
      • Verbindungsname: Geben Sie einen Namen von scalablerazorstorage.
      • Clienttyp: Wählen Sie .NET und dann "Weiter" aus.
   5. Wählen Sie "Vom System zugewiesene verwaltete Identität " und dann "Weiter" aus.
   6. Verwenden Sie die Standardnetzwerkeinstellungen, und wählen Sie "Weiter" aus.
   7. Wählen Sie Erstellen aus, nachdem Azure die Einstellungen überprüft hat.

   Wiederholen Sie die vorherigen Einstellungen für den Schlüsseltresor. Wählen Sie den entsprechenden Schlüsseltresordienst und Schlüssel auf der Registerkarte Grundlagen aus.

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