základní cesta aplikace ASP.NET Core Blazor

Tento článek vysvětluje základní cestu aplikace v aplikacích ASP.NET Core Blazor , včetně pokynů ke konfiguraci.

Základní cesta aplikace je kořenová cesta URL aplikace. Úspěšné směrování v Blazor aplikacích vyžaduje konfiguraci architektury pro jakoukoli kořenovou cestu URL, která není na výchozí základní cestě /aplikace .

Představte si následující aplikaci ASP.NET Core a dílčí aplikaci Blazor:

• Aplikace ASP.NET Core má název MyApp:
  • Aplikace se fyzicky nachází v cestě d:/MyApp.
  • Žádosti se přijímají na adrese https://www.contoso.com/{MYAPP RESOURCE}.
• Aplikace Blazor s názvem CoolApp je dílčí aplikací MyApp:
  • Dílčí aplikace se fyzicky nachází v cestě d:/MyApp/CoolApp.
  • Žádosti se přijímají na adrese https://www.contoso.com/CoolApp/{COOLAPP RESOURCE}.

Bez zadání další konfigurace pro aplikaci CoolApp nemá v tomto scénáři dílčí aplikace žádné znalosti o tom, kde se nachází na serveru. Aplikace například nemůže vytvořit správné relativní adresy URL pro své prostředky, pokud neví, že se nachází na relativní cestě URL /CoolApp/. Tento scénář platí také v různých scénářích hostování a reverzního proxy serveru, kdy aplikace není hostovaná v kořenové cestě URL.

Pozadí

Cíl značky ukotvení (href) se dá skládat s některým ze dvou koncových bodů:

• Absolutní umístění, která obsahují schéma (ve výchozím nastavení je schéma stránky vynecháno), hostitel, port a cesta nebo pouze lomítko (/) následované cestou.

  Příklady: https://example.com/a/b/c nebo /a/b/c

• Relativní umístění, která obsahují pouze cestu, a nezačínejte lomítkem (/). Tyto hodnoty se překládají vzhledem k adrese URL aktuálního <base> dokumentu nebo hodnotě značky, pokud je zadána.

  Příklad: a/b/c

Přítomnost koncového lomítka (/) v nakonfigurované základní cestě aplikace je důležitá pro výpočet základní cesty pro adresy URL aplikace. Například https://example.com/a má základní cestu https://example.com/, zatímco https://example.com/a/ s koncové lomítko má základní cestu https://example.com/a.

Zdroje odkazů, které se týkají Blazor v aplikacích ASP.NET Core:

• Adresy URL v Razor komponentách (.razor) jsou obvykle relativní.
• Adresy URL ve skriptech, jako Blazor jsou skripty (blazor.*.js), jsou relativní vzhledem k dokumentu.

Pokud vykreslujete Blazor aplikaci z různých dokumentů (například /Admin/B/C/ a /Admin/D/E/), musíte vzít v úvahu základní cestu aplikace nebo se základní cesta liší, když se aplikace vykreslí v každém dokumentu a prostředky se načítají z nesprávných adres URL.

Existují dva přístupy ke správnému řešení problémů s řešením relativních odkazů:

• Namapujte prostředky dynamicky pomocí dokumentu, na který byly vykresleny jako kořen.
• Nastavte konzistentní základní cestu pro dokument a namapujte prostředky v rámci této základní cesty.

První možnost je složitější a není nejběžnějším přístupem, protože navigace se pro každý dokument liší. Při vykreslování stránky /Something/Elsezvažte následující příklad:

• Vykresleno pod /Admin/B/C/, stránka je vykreslena s cestou ./Admin/B/C/Something/Else
• Vykresleno pod /Admin/D/E/, stránka je vykreslena na stejné cestě/Admin/B/C/Something/Else.

V rámci prvního přístupu nabízí IDynamicEndpointMetadata směrování a MatcherPolicykteré v kombinaci mohou být základem pro implementaci zcela dynamického řešení, které určuje za běhu o způsobu směrování požadavků.

U druhé možnosti, což je obvyklý přístup, nastaví aplikace základní cestu v dokumentu a mapuje koncové body serveru na cesty pod základnou. Tento přístup přijímá následující doprovodné materiály.

Na straně serveru Blazor

Namapujte SignalR centrum aplikace na straně Blazor serveru předáním cesty k MapBlazorHub souboru Program :

app.MapBlazorHub("base/path");

Výhodou použití MapBlazorHub je, že můžete mapovat vzory, například "{tenant}" a ne jenom konkrétní cesty.

Centrum můžete také mapovat SignalR , když je aplikace ve virtuální složce s kanálem větveného middlewaru. V následujícím příkladu se požadavky /base/path/ na zpracování zpracovávají centremBlazorSignalR:

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

<base> Nakonfigurujte značku podle pokynů v části Konfigurace základní cesty aplikace.

Samostatný Blazor WebAssembly

V samostatné Blazor WebAssembly aplikaci je nakonfigurovaná pouze <base> značka podle pokynů v části Konfigurace základní cesty aplikace.

Konfigurace základní cesty aplikace

Pokud chcete poskytnout konfiguraci Blazor základní cesty https://www.contoso.com/CoolApp/aplikace , nastavte základní cestu aplikace (<base>), která se také nazývá relativní kořenová cesta.

Když nakonfigurujete základní cestu aplikace, komponenta, která není v kořenovém adresáři, může vytvořit adresy URL vzhledem ke kořenové cestě aplikace. Komponenty na různých úrovních adresářové struktury můžou vytvářet odkazy na jiné prostředky v umístěních v rámci celé aplikace. Základní cesta aplikace se také používá k zachycení vybraných hypertextových odkazů, kde cíl odkazu href je v prostoru URI základní cesty aplikace. Komponenta Router zpracovává interní navigaci.

Umístěte tag <base> do tagu <head> (umístění <head> obsahu) před všechny prvky s atributy, jejichž hodnoty jsou adresami URL, jako například atributy href v prvcích <link>.

V mnoha scénářích hostování je relativní cesta URL aplikace kořenem aplikace. V těchto výchozích případech je / základní cesta relativní adresy URL aplikace nakonfigurovaná jako <base href="/" /> v <head> obsahu.

Poznámka:

V některých scénářích hostování, jako jsou GitHub Pages a dílčí aplikace IIS, musí být základní cesta aplikace nastavená na relativní cestu URL serveru aplikace.

• V aplikaci na straně Blazor serveru použijte některý z následujících přístupů:

  • Možnost 1: Pomocí značky <base> nastavte základní cestu aplikace (umístění <head> obsahu):

    <base href="/CoolApp/">
    

    Koncové lomítko se vyžaduje.

  • Možnost 2: NejprveUsePathBasev kanálu zpracování žádostí aplikace (Program.cs) hned po sestavení WebApplicationBuilder (builder.Build()) a nakonfigurujte základní cestu pro jakýkoli následující middleware, který komunikuje s cestou požadavku:

    app.UsePathBase("/CoolApp");
    

    Volání UsePathBase se doporučuje, pokud chcete aplikaci Blazor Server spustit místně. Zadejte například adresu URL pro spuštění v souboru Properties/launchSettings.json:

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

    Zástupný symbol {PORT} v předchozím příkladu je port, který odpovídá zabezpečenému portu v cestě konfigurace applicationUrl. Následující příklad ukazuje úplný spouštěcí profil aplikace na portu 7279:

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

    Další informace o launchSettings.json souboru najdete v tématu prostředí runtime ASP.NET Core. Další informace o Blazor základních cestách a hostování aplikací najdete v tématu <base href="/" /> nebo alternativě základní značky pro Blazor integraci MVC (dotnet/aspnetcore #43191).

• Blazor WebAssembly Samostatný (wwwroot/index.html):

  <base href="/CoolApp/">
  

  Koncové lomítko se vyžaduje.

Poznámka:

Při použití WebApplication (viz Migrace z ASP.NET Core v .NET 5 na .NET 6) musí být app.UseRouting volána po UsePathBase, aby směrovací middleware mohl sledovat upravenou cestu před odpovídáním trasám. Jinak se trasy shodují před přepsáním cesty pomocí UsePathBase, jak je popsáno v článcích Řazení middlewaru a Směrování.

Nepoužívejte předpony odkazů v celé aplikaci lomítkem. Buď se vyhněte použití oddělovače segmentů cesty, nebo použijte zápis relativní cesty pomocí tečky a lomítka (./):

• ❌ Nesprávně: <a href="/account">
• ✔️ Správný: <a href="account">
• ✔️ Správný: <a href="./account">

V Blazor WebAssemblyHttpClient ověřte, že pomocné rutiny JSON () nemají předpony adres URL s lomítkem (HttpClientJsonExtensions):

• ❌ Nesprávně: var rsp = await client.GetFromJsonAsync("/api/Account");
• ✔️ Správný: var rsp = await client.GetFromJsonAsync("api/Account");

Nepoužívejte předponu relativních odkazů navigačního správce lomítkem. Buď se vyhněte použití oddělovače segmentů cesty, nebo použijte dot-slash (./) relativní notaci cesty (Navigation je vložena NavigationManager):

• ❌ Nesprávně: Navigation.NavigateTo("/other");
• ✔️ Správný: Navigation.NavigateTo("other");
• ✔️ Správný: Navigation.NavigateTo("./other");

V typických konfiguracích pro hostování Azure/IIS obvykle není nutná další konfigurace. V některýchscénářch

• Správné obsluhování statických souborů (například app.UseStaticFiles("/CoolApp");).
• Pro obsluhu Blazor skriptu (_framework/blazor.*.js). Další informace najdete v tématu ASP.NET Core Blazor statických souborů.

V případě aplikace Blazor WebAssembly s nekořenovou relativní cestou URL (například <base href="/CoolApp/">) se aplikaci při místním spuštění nepodaří najít prostředky. Chcete-li tento problém při místním vývoji a testování překonat, můžete zadat argument základní cesty, který odpovídá hodnotě href značky <base> za běhu. Nezahrnujte koncové lomítko. Pokud chcete předat základní argument cesty při místním spuštění aplikace, spusťte dotnet watch příkaz (nebo dotnet run) z adresáře aplikace s --pathbase možností:

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

Pro aplikaci Blazor WebAssembly s relativní cestou /CoolApp/ url (<base href="/CoolApp/">) je příkaz následující:

dotnet watch --pathbase=/CoolApp

Pokud raději nakonfigurujete spouštěcí profil aplikace tak, aby místo ručního pathbase nastavení dotnet watch vlastnosti dotnet runzadal (nebocommandLineArgs) Properties/launchSettings.json automaticky . Následující kód také nakonfiguruje adresu URL pro spuštění (launchUrl):

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

Použití CoolApp jako příkladu:

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

dotnet watch Pomocí možnosti nebo dotnet run--pathbase konfigurace spouštěcího profilu, která nastaví základní cestu, Blazor WebAssembly aplikace reaguje místně na http://localhost:port/CoolAppadrese .

Další informace o launchSettings.json souboru najdete v tématu prostředí runtime ASP.NET Core. Další informace o Blazor základních cestách a hostování aplikací najdete v tématu <base href="/" /> nebo alternativě základní značky pro Blazor integraci MVC (dotnet/aspnetcore #43191).

Získání základní cesty aplikace z konfigurace

Následující doprovodné materiály vysvětlují, jak získat cestu ke <base> značce ze souboru nastavení aplikace pro různá prostředí.

Přidejte do aplikace soubor nastavení aplikace. Následující příklad je pro Staging prostředí (appsettings.Staging.json):

{
  "AppBasePath": "staging/"
}

V aplikaci na straně Blazor serveru načtěte základní cestu z konfigurace v <head> obsahu:

@inject IConfiguration Config

...

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

Alternativně může aplikace na straně serveru získat hodnotu z konfigurace pro UsePathBase. Nejprve umístěte následující kód Následující příklad používá konfigurační klíč AppBasePath:

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

V aplikaci na straně Blazor WebAssembly klienta:

• <base> Odeberte značku zwwwroot/index.html:

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

• Zadejte základní cestu aplikace prostřednictvím HeadContent komponenty v komponentě App (App.razor):

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

Pokud neexistuje žádná hodnota konfigurace, která by se načetla, například v přípravných prostředích, předchozí href přeloží na kořenovou cestu /.

Příklady v této části se zaměřují na poskytování základní cesty aplikace z nastavení aplikace, ale přístup ke čtení cesty z IConfiguration tohoto umístění je platný pro libovolného zprostředkovatele konfigurace. Další informace najdete v následujících zdrojích informací:

• Konfigurace Blazor pro ASP.NET Core
• Konfigurace v ASP.NET Core