Hosten und Bereitstellen von ASP.NET Core Blazor

In diesem Artikel wird erläutert, wie Sie Blazor-Apps hosten und bereitstellen.

Veröffentlichen der App

Apps werden für die Bereitstellung in Releasekonfigurationen veröffentlicht.

Visual Studio

1. Wählen Sie den Befehl {APPLICATION} veröffentlichen aus dem Menü Build aus. (Der Platzhalter {APPLICATION} ist der Name der App.)
2. Wählen Sie das Veröffentlichungsziel aus. Um lokal zu veröffentlichen, wählen Sie Ordner aus. Wählen Sie Weiteraus.
3. Akzeptieren Sie beim lokalen Veröffentlichen den Standardordner, oder geben Sie einen anderen Ort an. Wählen Sie "Fertig stellen" aus, um das Profil zu speichern. Wählen Sie Schließen aus.
4. Um den Veröffentlichungsordner des Ziels vor der Veröffentlichung der App zu bereinigen, wählen Sie "Alle Einstellungen anzeigen" aus. Wählen Sie "Einstellungen"">>" aus, um alle vorhandenen Dateien vor der Veröffentlichung zu löschen. Wählen Sie Speichern aus.
5. Wählen Sie die Schaltfläche Veröffentlichen aus.

Visual Studio Code und .NET CLI

Öffnen Sie eine Befehlsshell im Stammverzeichnis des Projekts.

Verwenden Sie den dotnet publish Befehl, um die App zu veröffentlichen:

dotnet publish

Vor .NET 8 ist Debugdie Standardveröffentlichungskonfiguration . Zur Veröffentlichung einer App, die auf .NET 7 oder früher ausgerichtet ist, übergeben Sie die -c|--configuration Option an den Befehl mit "Release" zur Veröffentlichung in Release Konfiguration:

dotnet publish -c Release

Das Veröffentlichen einer App löst eine Wiederherstellung der Abhängigkeiten des Projekts aus und erstellt das Projekt, bevor die Objekte für die Bereitstellung erstellt werden. Im Rahmen des Buildprozesses werden nicht verwendete Methoden und Assemblys entfernt, um die Downloadgröße und Ladezeiten von Apps zu reduzieren.

Leeren des Zielveröffentlichungsordners

Wenn Sie den dotnet publish Befehl in einer Befehlsshell zum Veröffentlichen einer App verwenden, generiert der Befehl die erforderlichen Dateien für die Bereitstellung basierend auf dem aktuellen Status des Projekts und platziert die Dateien in den angegebenen Ausgabeordner. Der Befehl bereinigt den Zielordner nicht automatisch, bevor die App veröffentlicht wird.

Um den Zielordner automatisch zu leeren, bevor die App veröffentlicht wird, fügen Sie das folgende MSBuild-Ziel zur Projektdatei der App (.csproj) unter dem Stammelement <Project> hinzu:

<Target Name="_RemovePublishDirBeforePublishing" BeforeTargets="BeforePublish">
  <RemoveDir Directories="$(PublishDir)" Condition="'$(PublishDir)' != ''" />
</Target>

Standardveröffentlichungsorte

• Blazor Web App: Die App wird im Ordner /bin/Release/{TARGET FRAMEWORK}/publish veröffentlicht, in dem der Platzhalter {TARGET FRAMEWORK} das Zielframework ist. Stellen Sie die Inhalte des Ordners publish auf dem Host bereit.
• Selbstständig Blazor WebAssembly: Die App wird im Ordner bin/Release/{TARGET FRAMEWORK}/publish oder bin/Release/{TARGET FRAMEWORK}/browser-wasm/publish veröffentlicht. Zum Bereitstellen der App als statische Website kopieren Sie den Inhalt des Ordners wwwroot auf den Host der statischen Website.

IIS

Informationen zum Hosten einer Blazor-App in IIS finden Sie in den folgenden Ressourcen:

• IIS-Hosting
  • Veröffentlichen einer ASP.NET Core-App in IIS
  • Hosten Sie ASP.NET Core unter Windows mit IIS
• Hosten und Bereitstellen von serverseitigen ASP.NET Core Blazor Apps: Blazor Web Apps (.NET 8 oder höher) und Blazor Server Apps (.NET 7 oder früher), die auf IIS ausgeführt werden, einschließlich IIS mit Azure Virtual Machines (VMs) auf dem Windows-Betriebssystem und Azure App Service.
• Hosten und Bereitstellen ASP.NET Core Blazor WebAssembly mit IIS: Eigenständige Blazor WebAssembly Apps (alle .NET-Versionen) und gehostete Blazor WebAssembly Apps (.NET 7 oder früher).
• IIS-Hosting untergeordneter Anwendungen
  • Folgen Sie den Anleitungen für den App-Basispfad vor der Veröffentlichung der App. In den Beispielen wird der App-Basispfad /CoolApp verwendet und gezeigt, wie Sie den Basispfad aus App-Einstellungen oder anderen Konfigurationsanbietern abrufen.
  • Folgen Sie der Anleitung zum Konfigurieren untergeordneter Anwendungen unter Erweiterte Konfiguration. Der Ordnerpfad der untergeordneten App unter der Stammwebsite wird zum virtuellen Pfad der untergeordneten App. Bei einem App-Basispfad wie /CoolApp wird die Blazor-App in einem Ordner mit dem Namen CoolApp unter der Stammwebsite platziert, und die untergeordnete App verwendet einen virtuellen Pfad (/CoolApp).

Das Freigeben eines App-Pools zwischen ASP.NET Core-Apps wird nicht unterstützt, auch nicht für Blazor-Apps. Verwenden Sie beim Hosten mit IIS einen App-Pool pro App, und vermeiden Sie die Verwendung der virtuellen IIS-Verzeichnisse zum Hosten mehrerer Apps.

JavaScript-Bundlerunterstützung

Die Blazor Laufzeit basiert auf JavaScript-Dateien (JS), der .NET-Laufzeit, die in WebAssembly-Code kompiliert wurde, und verwalteten Assemblys, die als WebAssembly-Dateien verpackt sind. Wenn eine Blazor App erstellt wird, hängt die Blazor Laufzeit von diesen Dateien von verschiedenen Buildspeicherorten ab. Aufgrund dieser Einschränkung Blazorist die Buildausgabe nicht mit JS Bundlern wie Gulp, Webpack und Rollup kompatibel.

Um während JS mit Bundlern kompatible Buildausgabe zu erstellen, legen Sie die WasmBundlerFriendlyBootConfig MSBuild-Eigenschaft true in der Projektdatei der App fest:

<WasmBundlerFriendlyBootConfig>true</WasmBundlerFriendlyBootConfig>

Wichtig

Dieses Feature erzeugt beim Veröffentlichen der App nur die bundlerfreundliche Ausgabe.

Die Ausgabe kann nicht direkt im Browser ausgeführt werden, kann aber von JS Tools verwendet werden, um Dateien mit den restlichen vom Entwickler bereitgestellten Skripts zu bündeln JS .

Wenn WasmBundlerFriendlyBootConfig diese Option aktiviert ist, enthält die produzierte JS Datei import Direktiven für alle Ressourcen in der App, wodurch die Abhängigkeiten für den Bundler sichtbar sind. Viele der Ressourcen können vom Browser nicht geladen werden, aber Bundler können in der Regel so konfiguriert werden, dass sie die Ressourcen anhand ihres Dateityps erkennen, um das Laden zu verarbeiten. Ausführliche Informationen zum Konfigurieren Des Bundlers finden Sie in der Dokumentation des Bundlers.

Hinweis

Die Bündelung der Buildausgabe sollte durch Zuordnen von Importen zu einzelnen Dateispeicherorten mithilfe eines JS benutzerdefinierten Bundler-Plug-Ins möglich sein. Wir stellen derzeit kein solches Plug-In bereit.

Hinweis

Das Ersetzen des files Plug-Ins durch url, alle Dateien der App JS , einschließlich der Blazor-WebAssembly-Laufzeit (base64 codiert in der JS), werden in der Ausgabe gebündelt. Die Größe der Datei ist erheblich größer (z. B. 300% größer), als wenn die Dateien mit dem files Plug-In zusammengestellt werden. Daher wird die Verwendung des url Plug-Ins nicht als allgemeine Methode empfohlen, wenn sie eine bundlerfreundliche Ausgabe für JS die Bundlerverarbeitung erzeugen.

Die folgenden Beispiel-Apps basieren auf Rollup. Ähnliche Konzepte gelten bei verwendung anderer JS Bundler.

Demo-Beispiel-Apps für Blazor WebAssembly eine React-App (BlazorWebAssemblyReact) und .NET auf WebAssembly in einer React-App (DotNetWebAssemblyReact) für .NET 10 oder höher sind im Blazor Beispiel-GitHub-Repository (dotnet/blazor-samples)verfügbar.

Aspekte der Blazor WebAssembly Zwischenspeicherung gelten für Blazor Web Apps

Blazor Anleitungen zur Zwischenspeicherung und HTTP-Zwischenspeicherung im Blazor WebAssembly Knoten konzentrieren sich auf eigenständige Blazor WebAssembly Apps, aber mehrere Aspekte der clientseitigen Zwischenspeicherung in diesen Artikeln gelten auch für Blazor Web AppFeatures, die interaktive WebAssembly- oder interaktive Auto-Rendermodi übernehmen. Wenn bei einem Blazor Web App Rendering von Inhalten auf der Clientseite ein Problem mit statischen Asset- oder Bündel-Caching auftritt, lesen Sie die Anleitungen in den folgenden Artikeln, um das Problem zu beheben.

• ASP.NET Core Blazor WebAssembly Fehler beim Caching und Integritätsprüfungsfehler
• Vermeidung von HTTP-Zwischenspeicherungsprobleme beim Upgrade von ASP.NET Core-AppsBlazor

Blazor Server MapFallbackToPage Konfiguration

Dieser Abschnitt gilt nur für Blazor Server-Apps. MapFallbackToPage wird nicht in Blazor Web App- und Blazor WebAssembly -Apps unterstützt.

Falls eine App einen separaten Bereich mit benutzerdefinierten Ressourcen und Razor-Komponenten erfordert:

• Erstellen Sie im Ordner Pages der App einen Ordner für die Ressourcen. Der Administratorbereich einer App wird beispielsweise in einem Ordner namens Admin (Pages/Admin) erstellt.

• Erstellen Sie eine Stammseite (_Host.cshtml) für den Bereich. Erstellen Sie beispielsweise eine Pages/Admin/_Host.cshtml-Datei aus der Hauptstammseite der App (Pages/_Host.cshtml). Geben Sie auf der @page-Seite für Administrator*innen keine _Host-Anweisung an.

• Fügen Sie dem Ordner des Bereichs ein Layout hinzu (z. B. Pages/Admin/_Layout.razor). Legen Sie das <base>-Tag href im Layout für den separaten Bereich so fest, dass es mit dem Ordner des Bereichs übereinstimmt (z. B. <base href="/Admin/" />). Fügen Sie zu Demonstrationszwecken ~/ zu den statischen Ressourcen auf der Seite hinzu. Zum Beispiel:

  • ~/css/bootstrap/bootstrap.min.css
  • ~/css/site.css
  • ~/BlazorSample.styles.css (der Namespace der Beispiel-App lautet BlazorSample)
  • ~/_framework/blazor.server.js (Blazor Script)

• Wenn der Bereich über einen eigenen Ordner für statische Ressourcen verfügen soll, fügen Sie einen Ordner hinzu, und geben Sie dessen Speicherort in der Middleware für statische Dateien in Program.cs (z. B. app.UseStaticFiles("/Admin/wwwroot")) an.

• Razor-Komponenten werden dem Ordner des Bereichs hinzugefügt. Fügen Sie dem Bereichsordner mindestens eine Index-Komponente mit der richtigen @page-Anweisung für den Bereich hinzu. Fügen Sie beispielsweise eine Pages/Admin/Index.razor-Datei hinzu, die auf der Pages/Index.razor-Standarddatei der App basiert. Geben Sie den Bereich Admin als Routenvorlage am Anfang der Datei an (@page "/admin"). Fügen Sie bei Bedarf zusätzliche Komponenten hinzu. Geben Sie beispielsweise Pages/Admin/Component1.razor mit einer @page-Anweisung und der Routenvorlage @page "/admin/component1 an.

• Rufen Sie in Program.cs die Methode MapFallbackToPage für den Anforderungspfad des Bereichs unmittelbar vor dem Pfad der Fallbackstammseite auf die _Host-Seite auf:

  ...
  app.UseRouting();
  
  app.MapBlazorHub();
  app.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/Admin/_Host");
  app.MapFallbackToPage("/_Host");
  
  app.Run();