複数のホストされた ASP.NET Core Blazor WebAssembly アプリ

この記事では、ホストされた Blazor WebAssembly アプリを複数の Blazor WebAssembly アプリをホストするように構成する方法について説明します。

構成

ポート/ドメイン ホスティング (:5001/:5002 や firstapp.com/secondapp.com など) またはルート サブパス ホスティング (/FirstApp や /SecondApp など) のいずれかで、この記事のホスティング要件に合ったバージョンを選択します。

この記事に示す例では、次の追加の構成が必要です。

• 例のホスト ドメイン firstapp.com および secondapp.com でアプリに直接アクセスする。
• クライアント アプリで TLS/HTTPS セキュリティを有効にするための証明書。
• 次の機能のために、サーバー アプリを Razor Pages アプリとして構成する。
  • ページまたはビューへの Razor コンポーネントの統合。
  • Razor コンポーネントのプリレンダリング。

上記の構成は、この記事の範囲を超えています。 詳細については、次のリソースを参照してください。

• ホストとデプロイに関する記事
• ASP.NET Core で HTTPS を適用する
• ASP.NET Core Razor コンポーネントのプリレンダリングと統合を行う

既存のホストされた Blazor WebAssembly ソリューションを使うか、Blazor WebAssembly プロジェクト テンプレートから新しいホストされた Blazor WebAssembly ソリューションを作成します。.NET CLI を使用する場合は -ho|--hosted オプションを渡し、IDE にプロジェクトが作成されている場合は Visual Studio で [ホストされている ASP.NET Core] チェックボックスをオンにします。

MultipleBlazorApps という名前のソリューションのフォルダーを使用して、プロジェクトに MultipleBlazorApps という名前を付けます。

SecondClient という名前のソリューションに新しいフォルダーを作成します。 この新しいフォルダーに、Blazor WebAssembly という名前の 2 番目の MultipleBlazorApps.SecondClientクライアント アプリを追加します。 プロジェクトをスタンドアロン Blazor WebAssembly アプリとして追加します。 スタンドアロンの Blazor WebAssembly アプリを作成するには、.NET CLI を使用する場合は -ho|--hosted オプションを渡さないでください。また、Visual Studio を使用する場合は [ホストされている ASP.NET Core] チェックボックスを使用しないでください。

MultipleBlazorApps.SecondClient プロジェクトに次の変更を適用します。

• Client/Pages フォルダーから SecondClient/Pages フォルダーに FetchData コンポーネント (Pages/FetchData.razor) をコピーします。 スタンドアロンの Blazor WebAssembly アプリで気象データ用に Server プロジェクトのコントローラーを呼び出さず、静的データ ファイルを使用するため、この手順が必要です。 FetchData コンポーネントを追加されたプロジェクトにコピーすることで、2 番目のクライアント アプリも、気象データ用のサーバー API への Web API 呼び出しを行います。
• SecondClient/wwwroot/sample-data フォルダー内の weather.json ファイルが使用されていないため、フォルダーを削除します。

次の表は、SecondClient フォルダーと MultipleBlazorApps.SecondClient プロジェクトが追加された後のソリューションのフォルダーとプロジェクト名を示しています。

MultipleBlazorApps.Server プロジェクトは、2 つの Blazor WebAssembly クライアント アプリを提供し、MVC コントローラーを介してクライアント アプリの FetchData コンポーネントに気象データを提供します。 必要に応じて、MultipleBlazorApps.Server プロジェクトで、従来の Razor Pages または MVC アプリとしてページまたはビューを提供することもできます。 ページまたはビューの提供を有効にする手順については、この記事で後述します。

クライアント アプリの最初のプロジェクト ファイル (MultipleBlazorApps.Client.csproj) で、<PropertyGroup> に値が FirstApp の <StaticWebAssetBasePath> プロパティを追加して、プロジェクトの静的資産の基本パスを設定します。

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

MultipleBlazorApps.SecondClient アプリのプロジェクト ファイル (MultipleBlazorApps.SecondClient.csproj) 内で:

• 値が SecondApp の <StaticWebAssetBasePath> プロパティを <PropertyGroup> に追加します。

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• MultipleBlazorApps.Shared のプロジェクト参照を <ItemGroup> に追加します。

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

サーバー アプリのプロジェクト ファイル (Server/MultipleBlazorApps.Server.csproj) で、追加した MultipleBlazorApps.SecondClient クライアント アプリに対するプロジェクト参照を <ItemGroup> に作成します。

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

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

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

サーバー アプリの Program.cs ファイルで、UseHttpsRedirection の呼び出しの後に現れる次のコードを削除します。

• サーバー アプリからページまたはビューを提供する予定の場合は、次のコード行を削除します。

  - app.UseBlazorFrameworkFiles();
  

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

• サーバー アプリで Blazor WebAssembly クライアント アプリのみを提供する予定の場合は、次のコードを削除します。

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

  静的ファイル ミドルウェアはそのままにします。

  app.UseStaticFiles();
  

UseStaticFiles について詳しくは、「ASP.NET Core Blazor の静的ファイル」をご覧ください。

UseBlazorFrameworkFiles および MapFallbackToFile の詳細については、次のリソースを参照してください。

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (参照ソース)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (参照ソース)

クライアント アプリからサーバー API 内の /WeatherForecast への要求は、どのクライアント アプリが要求を行うかによって、/FirstApp/WeatherForecast または /SecondApp/WeatherForecast のいずれかになります。 そのため、サーバー API から気象データを返すコントローラー ルートに、パス セグメントを含める変更が必要です。

サーバー アプリの天気予報コントローラー (Controllers/WeatherForecastController.cs) で、WeatherForecastController への既存のルート ([Route("[controller]")]) をクライアント要求パスを考慮した次のルートに置き換えます。

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

サーバー アプリからページを提供する予定の場合は、サーバー アプリの Pages フォルダーに IndexRazor ページを追加します。

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()
        {
        }
    }
}

サーバー アプリから MVC ビューを提供する予定の場合は、Index ビューと Home コントローラーを追加します。

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

いずれかのクライアント アプリからサーバー アプリのページまたはビューで Razor コンポーネントを使用する方法について詳しくは、「ASP.NET Core Razor コンポーネントのプリレンダリングと統合を行う」を参照してください。

アプリを実行する

MultipleBlazorApps.Server プロジェクトを実行します。

静的な資産

資産がクライアント アプリの wwwroot フォルダー内にある場合は、コンポーネントに静的な資産の要求パスを指定します。

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

{PATH AND FILE NAME} プレースホルダーは、wwwroot の下のパスとファイル名です。

たとえば、wwwroot の vehicle フォルダー内にある Jeep の画像 (jeep-yj.png) のソースは次のようになります。

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

Razor クラス ライブラリ (RCL) のサポート

新しいプロジェクトとしてソリューションに Razor クラス ライブラリ (RCL) を追加します。

• ソリューション エクスプローラーで、ソリューションを右クリックし、[追加]>[新しいプロジェクト] の順に選択します。
• Razor クラス ライブラリ プロジェクト テンプレートを使用して、プロジェクトを作成します。 このセクションの例では、プロジェクト名 ComponentLibrary を使用します。これは RCL のアセンブリ名でもあります。 [サポート ページとビュー] チェックボックスはオンにしないでください。

ホストされた Blazor WebAssembly クライアント アプリごとに、RCL プロジェクトのプロジェクト参照を作成します。それには、ソリューション エクスプローラーで各クライアント プロジェクトを右クリックし、[追加]>[プロジェクト参照] の順に選択します。

次のいずれかの方法で、クライアント アプリで RCL のコンポーネントを使用します。

• RCL の名前空間用にコンポーネントの先頭に @using ディレクティブを配置し、コンポーネントの Razor 構文を追加します。 ComponentLibrary というアセンブリ名を持つ RCL の例を次に示します。

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• コンポーネントの Razor 構文と共に RCL の名前空間を指定します。 この方法では、コンポーネント ファイルの先頭に @using ディレクティブは必要ありません。 ComponentLibrary というアセンブリ名を持つ RCL の例を次に示します。

  <ComponentLibrary.Component1 />
  

他の静的な資産が RCL の wwwroot フォルダー内にある場合は、ASP.NET Core でのクラス ライブラリの再利用可能な Razor UI に関する記事のガイダンスに従って、クライアント アプリで静的な資産を参照します。

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

{PACKAGE ID} プレースホルダーは、RCL のパッケージ ID です。 プロジェクト ファイルで <PackageId> が指定されていない場合、パッケージ ID の既定値はプロジェクトのアセンブリ名になります。 {PATH AND FILE NAME} プレースホルダーは、wwwroot の下のパスとファイル名です。

次の例は、RCL の wwwroot フォルダーの vehicle フォルダー内にある Jeep 画像 (jeep-yj.png) のマークアップを示しています。 ComponentLibrary というアセンブリ名を持つ RCL の例を次に示します。

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

その他のリソース

• ASP.NET Core Razor コンポーネントを Razor クラス ライブラリ (RCL) から使用する
• ASP.NET Core のクラス ライブラリの再利用可能 Razor UI
• ASP.NET Core Blazor の CSS の分離