ASP.NET Core-Blazor hosten en implementeren

In dit artikel wordt uitgelegd hoe u Blazor apps host en implementeert.

De app publiceren

Apps worden gepubliceerd voor implementatie in de releaseconfiguratie.

Visual Studio

1. Selecteer de opdracht Publish in het menu Build, waarbij de {APPLICATION} tijdelijke aanduiding staat voor de naam van de app.
2. Selecteer het publicatiedoel. Als u lokaal wilt publiceren, selecteert u Map.
3. Accepteer de standaardlocatie in de Kies een map veld of geef een andere locatie op. Selecteer de knop Publish.

.NET CLI

Gebruik de opdracht dotnet publish om de app te publiceren met een releaseconfiguratie:

dotnet publish -c Release

Als u de app publiceert, wordt een herstel van de afhankelijkheden van het project geactiveerd en het project bouwt voordat u de assets voor implementatie maakt. Als onderdeel van het buildproces worden ongebruikte methoden en assembly's verwijderd om de downloadgrootte en laadtijden van apps te verminderen.

Locaties publiceren:

• Blazor Web App: de app wordt gepubliceerd in de map /bin/Release/{TARGET FRAMEWORK}/publish, waarbij de tijdelijke aanduiding {TARGET FRAMEWORK} het doelframework is. Implementeer de inhoud van de map publish op de host.
• De zelfstandige applicatie Blazor WebAssemblywordt gepubliceerd in de map bin\Release\{TARGET FRAMEWORK}\browser-wasm\publish\. Als u de app wilt implementeren als een statische site, kopieert u de inhoud van de map wwwroot naar de statische sitehost.

IIS

Als u een Blazor-app in IIS wilt hosten, raadpleegt u de volgende bronnen:

• IIS-hosting
  • Een ASP.NET Core-app publiceren naar IIS-
  • Host ASP.NET Core op Windows met IIS
• Host en implementeer ASP.NET Core-Blazor-apps: Server-apps die worden uitgevoerd op IIS, waaronder IIS met Virtuele Machines (VM's) met Windows OS en Azure App Service.
• Host en implementeer ASP.NET Core Blazor WebAssembly: bevat aanvullende richtlijnen voor Blazor WebAssembly apps die worden gehost op IIS, waaronder hosting van statische sites, aangepaste web.config bestanden, URL-herschrijven, sub-apps, compressie en het hosten van statische Azure Storage-bestanden.
• Hosting van IIS-subtoepassingen
  • Volg de richtlijnen in de sectie App-basispad voor de Blazor app voordat u de app publiceert. In de voorbeelden wordt een app-basispad van /CoolApp gebruikt en wordt uitgelegd hoe u het basispad kunt verkrijgen van app-instellingen of andere configuratieproviders.
  • Volg de richtlijnen voor subtoepassingsconfiguratie in Geavanceerde configuratie. Het mappad van de sub-app onder de hoofdsite wordt het virtuele pad van de sub-app. Voor een app-basispad van /CoolAppwordt de Blazor app geplaatst in een map met de naam CoolApp onder de hoofdsite en neemt de sub-app een virtueel pad van /CoolAppop.

Het delen van een app-pool tussen ASP.NET Core-apps wordt niet ondersteund, waaronder voor Blazor-apps. Gebruik één app-pool per app bij het hosten met IIS en vermijd het gebruik van de virtuele mappen van IIS voor het hosten van meerdere apps.

Basispad van app

Het basispad van de app is het root-URL-pad van de app. Voor geslaagde routering in Blazor-apps is frameworkconfiguratie vereist voor elk hoofd-URL-pad dat zich niet op het standaard-app-basispad bevindt /.

Houd rekening met de volgende ASP.NET Core-app en Blazor sub-app:

• De ASP.NET Core-app heeft de naam MyApp:
  • De app bevindt zich fysiek op d:/MyApp.
  • Aanvragen worden ontvangen op https://www.contoso.com/{MYAPP RESOURCE}.
• Een Blazor-app met de naam CoolApp is een sub-app van MyApp:
  • De sub-app bevindt zich fysiek op d:/MyApp/CoolApp.
  • Aanvragen worden ontvangen op https://www.contoso.com/CoolApp/{COOLAPP RESOURCE}.

Zonder aanvullende configuratie voor CoolAppop te geven, heeft de sub-app in dit scenario geen kennis van waar deze zich op de server bevindt. De app kan bijvoorbeeld geen juiste relatieve URL's maken voor de resources zonder te weten dat deze zich bevindt op het relatieve URL-pad /CoolApp/. Dit scenario is ook van toepassing in verschillende scenario's voor hosting en omgekeerde proxy wanneer een app niet wordt gehost op een hoofd-URL-pad.

Achtergrond

De bestemming van een ankertag (href) kan worden samengesteld met een van de twee eindpunten:

• Absolute locaties die een schema bevatten (standaard ingesteld op het schema van de pagina als het wordt weggelaten), host, poort, en pad of alleen een schuine streep (/) gevolgd door het pad.

  Voorbeelden: https://example.com/a/b/c of /a/b/c

• Relatieve locaties die alleen een pad bevatten en niet beginnen met een slash (/). Deze worden omgezet ten opzichte van de URL van het huidige document of de waarde van de <base>-tag, indien opgegeven.

  Voorbeeld: a/b/c

De aanwezigheid van een afsluitende slash (/) in een geconfigureerd app-basispad is belangrijk om het basispad voor URL's van de app te berekenen. https://example.com/a heeft bijvoorbeeld een basispad van https://example.com/, terwijl https://example.com/a/ met een afsluitende slash een basispad van https://example.com/aheeft.

Voor de bronnen van koppelingen die betrekking hebben op Blazor in ASP.NET Core-apps:

• URL's in Razor onderdelen (.razor) zijn doorgaans relatief.
• URL's in scripts, zoals de Blazor scripts (blazor.*.js), zijn relatief ten opzichte van het document.

Als u een Blazor-app uit verschillende documenten weergeeft (bijvoorbeeld /Admin/B/C/ en /Admin/D/E/), moet u rekening houden met het basispad van de app of het basispad verschilt wanneer de app in elk document wordt weergegeven en de resources worden opgehaald uit de verkeerde URL's.

Er zijn twee manieren om de uitdaging aan te pakken om relatieve koppelingen correct op te lossen:

• Wijs de resources dynamisch toe door het document waarop ze werden weergegeven als basis te gebruiken.
• Stel een consistent basispad in voor het document en wijs de resources onder dat basispad toe.

De eerste optie is ingewikkelder en is niet de meest gebruikelijke benadering, omdat het navigatie voor elk document anders maakt. Bekijk het volgende voorbeeld voor het weergeven van een pagina /Something/Else:

• Weergegeven onder /Admin/B/C/, wordt de pagina weergegeven met een pad van /Admin/B/C/Something/Else.
• Onder /Admin/D/E/wordt de pagina weergegeven op hetzelfde pad van /Admin/B/C/Something/Else.

Onder de eerste benadering biedt routering IDynamicEndpointMetadata en MatcherPolicy, die in combinatie de basis kan zijn voor het implementeren van een volledig dynamische oplossing die tijdens runtime bepaalt hoe aanvragen worden gerouteerd.

Voor de tweede optie, de gebruikelijke benadering, stelt de app het basispad in het document in en wijst de servereindpunten toe aan paden onder de basis. In de volgende richtlijnen wordt deze aanpak gebruikt.

Blazor aan de serverzijde

Wijs de SignalR hub van een Blazor-app aan de serverzijde toe door het pad door te geven naar MapBlazorHub in het Program bestand:

app.MapBlazorHub("base/path");

Het voordeel van het gebruik van MapBlazorHub is dat u patronen kunt toewijzen, zoals "{tenant}" en niet alleen concrete paden.

U kunt de SignalR-hub ook toewijzen wanneer de app zich in een virtuele map bevindt met een vertakte middleware-pijplijn. In het volgende voorbeeld worden aanvragen voor /base/path/ verwerkt door de Blazor-hub van SignalR:

app.Map("/base/path/", subapp => {
    subapp.UsePathBase("/base/path/");
    subapp.UseRouting();
    subapp.UseEndpoints(endpoints => endpoints.MapBlazorHub());
});

Configureer de <base>-tag volgens de richtlijnen in de Het basispad van de app configureren sectie.

Zelfstandige Blazor WebAssembly

In een zelfstandige Blazor WebAssembly-app wordt alleen de <base>-tag geconfigureerd volgens de richtlijnen in de sectie Het basispad van de app configureren.

Het basispad voor de app configureren

Als u configuratie wilt opgeven voor het basispad van de Blazor-app van https://www.contoso.com/CoolApp/, stelt u het app-basispad (<base>)in, dat ook wel het relatieve hoofdpad wordt genoemd.

Door het basispad van de app te configureren, kan een onderdeel dat zich niet in de hoofdmap bevindt URL's samenstellen ten opzichte van het hoofdpad van de app. Onderdelen op verschillende niveaus van de mapstructuur kunnen koppelingen maken naar andere resources op locaties in de app. Het basispad van de app wordt ook gebruikt om geselecteerde hyperlinks te onderscheppen waarbij het href doel van de koppeling zich binnen de URI-ruimte van het basispad van de app bevindt. Het Router onderdeel verwerkt de interne navigatie.

Plaats de <base> tag in <head> markeringen (locatie van <head> inhoud) vóór elementen met kenmerkwaarden die URL's zijn, zoals de href kenmerken van <link> elementen.

In veel hostingscenario's is het relatieve URL-pad naar de app de root van de app. In deze standaard gevallen wordt het relatieve URL-basispad van de app / geconfigureerd als <base href="/" /> in <head> inhoud.

Notitie

In sommige hostingscenario's, zoals GitHub Pages en IIS-sub-apps, moet het basispad van de app worden ingesteld op het relatieve URL-pad van de server van de app.

• Gebruik in een Blazor-app aan de serverzijde van de volgende methoden:

  • Optie 1: gebruik de <base>-tag om het basispad van de app in te stellen (locatie van <head> inhoud):

    <base href="/CoolApp/">
    

    De afsluitende slash is vereist.

  • Optie 2: roep UsePathBaseeerste aan in de aanvraagverwerkingspijplijn van de app (Program.cs) direct nadat de WebApplicationBuilder is gebouwd (builder.Build()) om het basispad te configureren voor de volgende middleware die communiceert met het aanvraagpad:

    app.UsePathBase("/CoolApp");
    

    Het aanroepen van UsePathBase wordt aanbevolen wanneer u de Blazor Server-app ook lokaal wilt uitvoeren. Geef bijvoorbeeld de start-URL op in Properties/launchSettings.json:

    "launchUrl": "https://localhost:{PORT}/CoolApp",
    

    De tijdelijke aanduiding {PORT} in het vorige voorbeeld is de poort die overeenkomt met de beveiligde poort in het applicationUrl configuratiepad. In het volgende voorbeeld ziet u het volledige startprofiel voor een app op poort 7279:

    "BlazorSample": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7279;http://localhost:5279",
      "launchUrl": "https://localhost:7279/CoolApp",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
    }
    

    Zie Meerdere omgevingen gebruiken in ASP.NET Corevoor meer informatie over het bestand launchSettings.json. Voor meer informatie over Blazor basispaden en hosting, zie <base href="/" /> of een basistag-alternatief voor Blazor MVC-integratie (dotnet/aspnetcore #43191).

• Zelfstandige Blazor WebAssembly (wwwroot/index.html):

  <base href="/CoolApp/">
  

  De afsluitende slash is vereist.

Notitie

Wanneer u WebApplication gebruikt (zie Migreren van ASP.NET Core 5.0 naar 6.0), moet app.UseRouting worden aangeroepen na UsePathBase, zodat de middleware voor routering het gewijzigde pad kan observeren vóór overeenkomende routes. Anders worden routes vergeleken voordat het pad wordt herschreven door UsePathBase zoals beschreven in de artikelen Middleware Ordering en Routing.

Voeg geen voorvoegselkoppelingen toe in de app met een slash. Vermijd het gebruik van een scheidingsteken voor padsegmenten of gebruik een punt-slash (./) voor relatieve padnotatie.

• ❌ Onjuist: <a href="/account">
• ✔️ Juist: <a href="account">
• ✔️ Juist: <a href="./account">

Controleer in Blazor WebAssembly web-API-aanvragen met de HttpClient-serviceof JSON-helpers (HttpClientJsonExtensions) geen forward slash toevoegen aan URL's (/):

• ❌ Onjuist: var rsp = await client.GetFromJsonAsync("/api/Account");
• ✔️ Juist: var rsp = await client.GetFromJsonAsync("api/Account");

Voeg geen voorvoegsel toe Navigatiebeheer relatieve koppelingen met een slash. Vermijd het gebruik van een padsegmentscheidingsteken of gebruik een punt-slash (./) voor relatieve padnotatie (Navigation is een geïnjecteerde NavigationManager).

• ❌ Onjuist: Navigation.NavigateTo("/other");
• ✔️ Juist: Navigation.NavigateTo("other");
• ✔️ Juist: Navigation.NavigateTo("./other");

In typische configuraties voor Azure/IIS-hosting is doorgaans geen aanvullende configuratie vereist. In sommige scenario's voor niet-IIS-hosting en omgekeerde proxyhosting is mogelijk aanvullende configuratie van statische bestands-middleware vereist:

• Statische bestanden correct verwerken (bijvoorbeeld app.UseStaticFiles("/CoolApp");).
• Het Blazor-script (_framework/blazor.*.js) serveren. Zie ASP.NET Core Blazor statische bestandenvoor meer informatie.

Voor een Blazor WebAssembly-app met een niet-hoofd-RELATIEF URL-pad (bijvoorbeeld <base href="/CoolApp/">), kan de app de resources niet vinden wanneer deze lokaalwordt uitgevoerd. Als u dit probleem wilt oplossen tijdens het ontwikkelen en testen, kunt u tijdens runtime een padbasis opgeven argument dat overeenkomt met de href waarde van de <base>-tag. Neem geen afsluitende slash op. Als u het padbasisargument wilt doorgeven wanneer u de app lokaal uitvoert, voert u de opdracht dotnet watch (of dotnet run) uit vanuit de map van de app met de optie --pathbase:

dotnet watch --pathbase=/{RELATIVE URL PATH (no trailing slash)}

Voor een Blazor WebAssembly-app met een relatief URL-pad van /CoolApp/ (<base href="/CoolApp/">), is de opdracht:

dotnet watch --pathbase=/CoolApp

Als u het startprofiel van de app liever configureert om de pathbase automatisch op te geven in plaats van handmatig met dotnet watch (of dotnet run), stelt u de eigenschap commandLineArgs in Properties/launchSettings.jsonin. Hieronder wordt ook de start-URL (launchUrl) geconfigureerd:

"commandLineArgs": "--pathbase=/{RELATIVE URL PATH (no trailing slash)}",
"launchUrl": "{RELATIVE URL PATH (no trailing slash)}",

Gebruik CoolApp als voorbeeld:

"commandLineArgs": "--pathbase=/CoolApp",
"launchUrl": "CoolApp",

Met behulp van dotnet watch (of dotnet run) met de optie --pathbase of een startprofielconfiguratie waarmee het basispad wordt ingesteld, reageert de Blazor WebAssembly app lokaal op http://localhost:port/CoolApp.

Zie Meerdere omgevingen gebruiken in ASP.NET Corevoor meer informatie over het bestand launchSettings.json. Voor meer informatie over Blazor basispaden en hosting, zie <base href="/" /> of een basistag-alternatief voor Blazor MVC-integratie (dotnet/aspnetcore #43191).

Het basispad van de app ophalen uit de configuratie

In de volgende richtlijnen wordt uitgelegd hoe u het pad voor de <base>-tag ophaalt uit een app-instellingenbestand voor verschillende omgevingen.

Voeg het app-instellingenbestand toe aan de app. Het volgende voorbeeld is voor de Staging-omgeving (appsettings.Staging.json):

{
  "AppBasePath": "staging/"
}

Laad in een Blazor-app aan de serverzijde het basispad uit de configuratie in <head> inhoud:

@inject IConfiguration Config

...

<head>
    ...
    <base href="/@(Config.GetValue<string>("AppBasePath"))" />
    ...
</head>

Een app aan de serverzijde kan ook de waarde verkrijgen uit de configuratie voor UsePathBase. Plaats de volgende code eerste in de pijplijn voor aanvraagverwerking (Program.cs) van de app direct nadat de WebApplicationBuilder is gebouwd (builder.Build()). In het volgende voorbeeld wordt de configuratiesleutel gebruikt AppBasePath:

app.UsePathBase($"/{app.Configuration.GetValue<string>("AppBasePath")}");

In een Blazor WebAssembly-app aan de clientzijde:

• Verwijder de tag <base> uit wwwroot/index.html:

  - <base href="..." />
  

• Geef het basispad van de app op via een HeadContent-onderdeel in het App-onderdeel (App.razor):

  @inject IConfiguration Config
  
  ...
  
  <HeadContent>
      <base href="/@(Config.GetValue<string>("AppBasePath"))" />
  </HeadContent>
  

Als er geen configuratiewaarde is om te laden, bijvoorbeeld in niet-faseringsomgevingen, wordt de voorgaande href omgezet in het hoofdpad /.

De voorbeelden in deze sectie richten zich op het opgeven van het basispad van de app vanuit app-instellingen, maar de benadering van het lezen van het pad uit IConfiguration is geldig voor elke configuratieprovider. Zie de volgende bronnen voor meer informatie:

• ASP.NET Core Blazor-configuratie
• Configureren in ASP.NET Core

configuratie van Blazor ServerMapFallbackToPage

Deze sectie is alleen van toepassing op Blazor Server apps. MapFallbackToPage wordt niet ondersteund in Blazor Web App- en Blazor WebAssembly-apps.

In scenario's waarin een app een afzonderlijk gebied met aangepaste resources en Razor onderdelen vereist:

• Maak een map in de Pages map van de app om de resources op te slaan. Een beheerderssectie van een app wordt bijvoorbeeld gemaakt in een nieuwe map met de naam Admin (Pages/Admin).

• Maak een hoofdpagina (_Host.cshtml) voor het gebied. Maak bijvoorbeeld een Pages/Admin/_Host.cshtml bestand op basis van de hoofdpagina van de app (Pages/_Host.cshtml). Geef geen @page-instructie op de Beheer-pagina _Host.

• Voeg een indeling toe aan de map van het gebied (bijvoorbeeld Pages/Admin/_Layout.razor). Stel in de indeling voor het aparte gebied de <base>-tag op href zodat deze past bij de map van het gebied (bijvoorbeeld <base href="/Admin/" />). Voeg voor demonstratiedoeleinden ~/ toe aan de statische resources op de pagina. Bijvoorbeeld:

  • ~/css/bootstrap/bootstrap.min.css
  • ~/css/site.css
  • ~/BlazorSample.styles.css (de naamruimte van de voorbeeld-app is BlazorSample)
  • ~/_framework/blazor.server.js (Blazor script)

• Als het gebied een eigen statische assetmap moet hebben, voegt u de map toe en geeft u de locatie op aan Static File Middleware in Program.cs (bijvoorbeeld app.UseStaticFiles("/Admin/wwwroot")).

• Razor-onderdelen worden toegevoegd aan de map voor dit gebied. Voeg minimaal een Index onderdeel toe aan de gebiedsmap met de juiste @page instructie voor het gebied. Voeg bijvoorbeeld een Pages/Admin/Index.razor-bestand toe op basis van het standaardbestand Pages/Index.razor van de app. Geef het beheergebied aan als de routesjabloon boven aan het bestand (@page "/admin"). Voeg indien nodig extra onderdelen toe. Bijvoorbeeld Pages/Admin/Component1.razor met een @page richtlijn en routesjabloon van @page "/admin/component1.

• Roep in Program.csMapFallbackToPage aan voor het aanvraagpad van het gebied direct voor het pad naar de terugvalhoofdpagina naar de _Host pagina:

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

Implementatie

Zie de volgende onderwerpen voor implementatierichtlijnen:

• Host en implementeer ASP.NET Core Blazor WebAssembly
• Host en implementeer ASP.NET Core server-side Blazor-toepassingen