Více hostovaných aplikací ASP.NET Core Blazor WebAssembly

Tento článek vysvětluje, jak nakonfigurovat hostované Blazor WebAssembly aplikace pro hostování více Blazor WebAssembly aplikací.

Konfigurace

Vyberte verzi tohoto článku, která odpovídá vašim požadavkům na hostování, buď hostování portů nebo domén (například:5001/:5002) nebo firstapp.comsecondapp.com/směrování hostování dílčích cest (například /FirstApp a)./SecondApp

Příklady uvedené v tomto článku vyžadují další konfiguraci pro:

• Přístup k aplikacím přímo v ukázkových doménách hostitelů firstapp.com a secondapp.com.
• Certifikáty pro klientské aplikace pro povolení zabezpečení TLS/HTTPS
• Konfigurace serverové aplikace jako Razor aplikace Pages pro následující funkce:
  • Razor Integrace komponent do stránek nebo zobrazení
  • Prerendering Razor components.

Předchozí konfigurace jsou nad rámec tohoto článku. Další informace naleznete v následujících zdrojích:

• Články o hostování a nasazení
• Vynucení HTTPS v ASP.NET Core
• Předběžné vykreslování a integrace komponent ASP.NET Core Razor

Použijte existující hostované řešení nebo vytvořte nové hostované Blazor WebAssembly řešení ze Blazor WebAssembly šablony projektu předáním -ho|--hosted možnosti, pokud používáte .NET CLI nebo při vytváření projektu v integrovaném vývojovém prostředí (IDE) zaškrtněte políčko ASP.NET Core Hostované v sadě Visual Studio. Blazor WebAssembly

Použijte složku pro řešení s názvem MultipleBlazorApps a pojmenujte projekt MultipleBlazorApps.

Vytvořte novou složku v řešení s názvem SecondClient. Do nové složky přidejte druhou Blazor WebAssembly klientskou aplikaci s názvem MultipleBlazorApps.SecondClient. Přidejte projekt jako samostatnou Blazor WebAssembly aplikaci. Pokud chcete vytvořit samostatnou Blazor WebAssembly aplikaci, nepředávejte -ho|--hosted tuto možnost, pokud používáte .NET CLI nebo nepoužívejte zaškrtávací políčko ASP.NET Core Hostované , pokud používáte Visual Studio.

Proveďte v projektu následující změny MultipleBlazorApps.SecondClient :

• Zkopírujte komponentu FetchData Client/Pages (Pages/FetchData.razor) ze složky do SecondClient/Pages složky. Tento krok je povinný, protože samostatná Blazor WebAssembly aplikace nevolá Server kontroler projektu pro data o počasí, používá statický datový soubor. Zkopírováním FetchData komponenty do přidaného projektu druhá klientská aplikace také provede volání webového rozhraní API na serverové rozhraní API pro data o počasí.
• SecondClient/wwwroot/sample-data Odstraňte složku, protože weather.json se soubor ve složce nepoužívá.

Následující tabulka popisuje složky a názvy projektů řešení po SecondClient přidání složky a MultipleBlazorApps.SecondClient projektu.

Projekt MultipleBlazorApps.Server obsluhuje dvě Blazor WebAssembly klientské aplikace a poskytuje data o počasí komponentám klientských aplikací FetchData prostřednictvím kontroleru MVC. MultipleBlazorApps.Server Volitelně může projekt také obsluhovat stránky nebo zobrazení jako tradiční Razor aplikace Pages nebo MVC. Postup povolení obsluhy stránek nebo zobrazení najdete dále v tomto článku.

V souboru projektu první klientské aplikace (MultipleBlazorApps.Client.csproj) přidejte <StaticWebAssetBasePath> vlastnost s <PropertyGroup> hodnotou FirstApp nastavení základní cesty pro statické prostředky projektu:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient V souboru projektu aplikace (MultipleBlazorApps.SecondClient.csproj):

• <StaticWebAssetBasePath> Přidejte vlastnost k hodnotě <PropertyGroup> SecondApp:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Přidejte odkaz na MultipleBlazorApps.Shared projekt pro projekt do <ItemGroup>:

  <ItemGroup>
    <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
  </ItemGroup>
  

V souboru projektu serverové aplikace (Server/MultipleBlazorApps.Server.csproj) vytvořte odkaz na projekt pro přidanou MultipleBlazorApps.SecondClient klientskou aplikaci v :<ItemGroup>

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

"applicationUrl": "https://localhost:5001;https://localhost:5002",

V souboru serverové Program.cs aplikace odeberte následující kód, který se zobrazí po volání UseHttpsRedirection:

• Pokud plánujete obsluhovat stránky nebo zobrazení ze serverové aplikace, odstraňte následující řádky kódu:

  - app.UseBlazorFrameworkFiles();
  

  - app.MapFallbackToFile("index.html");
  

• Pokud plánujete, aby serverová aplikace sloužila Blazor WebAssembly jenom klientským aplikacím, odstraňte následující kód:

  - app.UseBlazorFrameworkFiles();
  
  ...
  
  - app.UseRouting();
  
  - app.MapRazorPages();
  - app.MapControllers();
  - app.MapFallbackToFile("index.html");
  

  Nechte statický middleware souborů na místě:

  app.UseStaticFiles();
  

Další informace najdete UseStaticFilesv tématu ASP.NET Základní Blazor statické soubory.

Další informace o UseBlazorFrameworkFiles těchto MapFallbackToFilezdrojích najdete v následujících zdrojích informací:

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (referenční zdroj)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (referenční zdroj)

Požadavky z klientských aplikací do rozhraní API serveru jsou buď do /WeatherForecast /FirstApp/WeatherForecast , nebo /SecondApp/WeatherForecast v závislosti na tom, do které klientské aplikace požadavek odešle. Proto trasy kontroleru, které vrací data o počasí z rozhraní API serveru, vyžadují úpravu tak, aby zahrnovaly segmenty cesty.

V kontroleru předpovědi počasí serverové aplikace (Controllers/WeatherForecastController.cs) nahraďte stávající trasu ([Route("[controller]")]) WeatherForecastController následujícími trasami, které berou v úvahu cesty požadavků klienta:

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

Pokud plánujete obsluhovat stránky ze serverové aplikace, přidejte IndexRazor stránku do Pages složky serverové aplikace:

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Pokud plánujete obsluhovat zobrazení MVC ze serverové aplikace, přidejte Index zobrazení a Home kontroler:

Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index() => View();
}

Další informace o používání Razor komponent z klientských aplikací na stránkách nebo zobrazeních serverové aplikace najdete v tématu Prerender a integrace ASP.NET základních Razor komponent.

Spustit aplikaci

MultipleBlazorApps.Server Spusťte projekt:

Statické prostředky

Pokud je prostředek ve složce klientské aplikace wwwroot , zadejte cestu k žádosti o statický prostředek v komponentách:

<img alt="..." src="{PATH AND FILE NAME}" />

Zástupný symbol {PATH AND FILE NAME} je cesta a název souboru v části wwwroot.

Například zdroj image Jeepu (jeep-yj.png) ve vehicle složce wwwroot:

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

Podpora knihovny tříd Razor (RCL)

Přidejte do řešení knihovnu Razor tříd (RCL) jako nový projekt:

• Klikněte pravým tlačítkem na řešení v Průzkumník řešení a vyberte Přidat>nový projekt.
• Razor Pomocí šablony projektu Knihovna tříd vytvořte projekt. Příklady v této části používají název ComponentLibraryprojektu, což je také název sestavení RCL. Nezaškrtávejte políčko Stránky podpory a zobrazení .

Pro každou hostované Blazor WebAssembly klientskou aplikaci vytvořte odkaz na projekt RCL tak, že v Průzkumník řešení kliknete pravým tlačítkem na každý projekt klienta a vyberete Přidat>odkaz na projekt.

V klientskýchaplikacích

• @using Umístěte direktivu na začátek komponenty pro obor názvů RCL a přidejte Razor syntaxi pro komponentu. Následující příklad je pro seznam RCL s názvem ComponentLibrarysestavení:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Zadejte obor názvů RCL spolu se Razor syntaxí komponenty. Tento přístup nevyžaduje direktivu @using v horní části souboru komponenty. Následující příklad je pro seznam RCL s názvem ComponentLibrarysestavení:

  <ComponentLibrary.Component1 />
  

Pokud je jakýkoli jiný statický prostředek ve wwwroot složce seznamu RCL, odkazujte na statický prostředek v klientské aplikaci podle pokynů v opakovaně použitelném Razor uživatelském rozhraní v knihovnách tříd s ASP.NET Core:

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

Zástupný {PACKAGE ID} symbol je ID balíčku RCL. Pokud v souboru projektu není zadaný parametr <PackageId>, jako ID balíčku se ve výchozím nastavení použije název sestavení projektu. Zástupný {PATH AND FILE NAME} symbol je cesta a název souboru v části wwwroot.

Následující příklad ukazuje kód image Jeepu (jeep-yj.png) ve vehicle složce složky RCL wwwroot . Následující příklad je pro seznam RCL s názvem ComponentLibrarysestavení:

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

Další materiály

• Využívání komponent ASP.NET Core Razor v knihovně tříd Razor (RCL)
• Opakovaně použitelné uživatelské rozhraní Razor v knihovnách tříd s využitím ASP.NET Core
• Blazor izolace základní šablon stylů CSS ASP.NET