注
これは、この記事の最新バージョンではありません。 この記事の最新バージョンについては、 .NET 7 のバージョンを参照してください。
この記事では、複数のBlazor WebAssembly アプリをホストするようにホステッド Blazor WebAssembly アプリを構成する方法について説明します。
コンフィギュレーション
ホスト要件に一致するバージョン (ポート/ドメイン ホスティング ( :5001/:5002 や firstapp.com/secondapp.comなど) またはルート サブパス ホスティング ( /FirstApp や /SecondAppなど) を選択します。
現在のホスティングの選択では、この記事ではポート/ドメインホスティング ( :5001/:5002 や firstapp.com/secondapp.comなど) について説明します。
次の例では、
- ホストされているBlazor WebAssembly アプリのプロジェクト名は、
MultipleBlazorAppsという名前のフォルダーにMultipleBlazorApps。 - 2 つ目のクライアント アプリが追加される前のソリューションの 3 つのプロジェクトは、
MultipleBlazorApps.Clientフォルダー、ClientフォルダーにMultipleBlazorApps.Server、ServerフォルダーにMultipleBlazorApps.SharedSharedされます。 - 初期 (最初の) クライアント アプリは、 Blazor WebAssembly プロジェクト テンプレートから作成されたソリューションの既定のクライアント プロジェクトです。
- 2 つ目のクライアント アプリがソリューションに追加され、
MultipleBlazorApps.SecondClientという名前のフォルダーにSecondClientされます。 - 必要に応じて、サーバー プロジェクト (
MultipleBlazorApps.Server) は、ページまたはビューを Razor Pages または MVC アプリとして提供できます。 - 1 つ目のクライアント アプリは、ブラウザーのポート 5001 またはホストの
firstapp.comでアクセスできます。 2 つ目のクライアント アプリは、ブラウザーのポート 5002 またはホストのsecondapp.comでアクセスできます。
現在の選択では、この記事ではルート サブパスのホスティングについて説明します (たとえば、 /FirstApp と /SecondApp)。
次の例では、
- ホストされているBlazor WebAssembly アプリのプロジェクト名は、
MultipleBlazorAppsという名前のフォルダーにMultipleBlazorApps。 - 2 つ目のクライアント アプリが追加される前のソリューションの 3 つのプロジェクトは、
MultipleBlazorApps.Clientフォルダー、ClientフォルダーにMultipleBlazorApps.Server、ServerフォルダーにMultipleBlazorApps.SharedSharedされます。 - 初期 (最初の) クライアント アプリは、 Blazor WebAssembly プロジェクト テンプレートから作成されたソリューションの既定のクライアント プロジェクトです。
- 2 つ目のクライアント アプリがソリューションに追加され、
MultipleBlazorApps.SecondClientという名前のフォルダーにSecondClientされます。 - 必要に応じて、サーバー プロジェクト (
MultipleBlazorApps.Server) は、正式な Razor Pages または MVC アプリとしてページまたはビューを提供できます。 - どちらのクライアント アプリも、
MultipleBlazorApps.ServerプロジェクトのProperties/launchSettings.jsonファイルによって定義された既定のポートをapplicationUrl値で使用します。 最初のクライアント アプリは、/FirstAppサブパスのブラウザーでアクセスできます。 2 番目のクライアント アプリは、/SecondAppサブパスのブラウザーでアクセスできます。
この記事に示す例では、次の追加の構成が必要です。
- 例のホスト ドメイン、
firstapp.com、secondapp.comでアプリに直接アクセスする。 - TLS/HTTPS セキュリティを有効にするクライアント アプリの証明書。
- 次の機能のために、サーバー アプリを Razor Pages アプリとして構成します。
- Razor コンポーネントのページまたはビューへの統合。
- Razorコンポーネントのプリレンダリング。
上記の構成は、この記事の範囲外です。 詳細については、次のリソースを参照してください。
- ASP.NET Core のホストとデプロイ
- ASP.NET Core で HTTPS を適用する
- ホストRazor ソリューション ASP.NET MVC または Razor Pages とコア Blazor WebAssembly コンポーネントを統合する
既存のホステッド Blazor WebAssemblyソリューションを使用するか、Blazor WebAssembly プロジェクト テンプレートからを作成します。.NET CLI を使用する場合は Blazor WebAssembly オプションを渡すか、IDE でプロジェクトを作成するときに Visual Studio で -ho|--hosted] チェック ボックスをオンにします。
MultipleBlazorAppsという名前のソリューションのフォルダーを使用し、プロジェクトにMultipleBlazorAppsという名前を付けます。
ソリューションに SecondClient という名前の新しいフォルダーを作成します。 新しいフォルダーに、Blazor WebAssemblyという名前の 2 つ目MultipleBlazorApps.SecondClientクライアント アプリを追加します。 スタンドアロン Blazor WebAssembly アプリとしてプロジェクトを追加します。 スタンドアロン Blazor WebAssembly アプリを作成するには、.NET CLI を使用する場合は -ho|--hosted オプションを渡さないでください。Visual Studio を使用している場合は 、ASP.NET Core Hosted チェックボックスを使用しないでください。
MultipleBlazorApps.SecondClient プロジェクトに次の変更を加えます。
-
FetchDataコンポーネント (Pages/FetchData.razor) をClient/PagesフォルダーからSecondClient/Pagesフォルダーにコピーします。 スタンドアロン Blazor WebAssembly アプリでは気象データ用に Server プロジェクトのコントローラーを呼び出せず、静的データ ファイルを使用するため、この手順が必要です。FetchDataコンポーネントを追加されたプロジェクトにコピーすることで、2 番目のクライアント アプリは気象データ用のサーバー API への Web API 呼び出しも行います。 - フォルダー内の
SecondClient/wwwroot/sample-dataファイルが使用されていないため、weather.jsonフォルダーを削除します。
次の表では、 SecondClient フォルダーと MultipleBlazorApps.SecondClient プロジェクトが追加された後のソリューションのフォルダーとプロジェクト名について説明します。
| 物理フォルダー | プロジェクト名 | Description |
|---|---|---|
Client |
MultipleBlazorApps.Client |
Blazor WebAssembly クライアント アプリ |
SecondClient |
MultipleBlazorApps.SecondClient |
Blazor WebAssembly クライアント アプリ |
Server |
MultipleBlazorApps.Server |
ASP.NET Core サーバー アプリ |
Shared |
MultipleBlazorApps.Shared |
共有リソース プロジェクト |
MultipleBlazorApps.Server プロジェクトは、2 つのBlazor WebAssembly クライアント アプリにサービスを提供し、MVC コントローラーを介してクライアント アプリのFetchData コンポーネントに気象データを提供します。 必要に応じて、 MultipleBlazorApps.Server プロジェクトは、従来の Razor Pages または MVC アプリとしてページまたはビューを提供することもできます。 ページまたはビューの提供を有効にする手順については、この記事の後半で説明します。
注
この記事のデモでは、FirstApp プロジェクトのMultipleBlazorApps.Clientの静的 Web アセット パス名と、SecondApp プロジェクトのMultipleBlazorApps.SecondClientを使用します。 "FirstApp" と "SecondApp" という名前は、単なるデモンストレーション用です。 その他の名前は、 App1/App2、 Client1/Client2、 1/2、または同様の名前付けスキームなど、クライアント アプリを区別するために使用できます。
ポートまたはドメインによってクライアント アプリに要求をルーティングする場合、"FirstApp" と "SecondApp" は 内部的に 使用され、静的資産に対する要求のルーティングと応答の処理が行われ、ブラウザーのアドレス バーには表示されません。
注
この記事のデモでは、FirstApp プロジェクトのMultipleBlazorApps.Clientの静的 Web アセット パス名と、SecondApp プロジェクトのMultipleBlazorApps.SecondClientを使用します。 "FirstApp" と "SecondApp" という名前は、単なるデモンストレーション用です。 その他の名前は、 App1/App2、 Client1/Client2、 1/2、または同様の名前付けスキームなど、クライアント アプリを区別するために使用できます。
要求はこれらの名前を使用して 2 つのクライアント アプリにルーティングされるため、"FirstApp" と "SecondApp" もブラウザーのアドレス バーに表示されます。 その他の有効な URL ルート セグメントがサポートされており、ルート セグメントは、静的 Web 資産を内部的にルーティングするために使用される名前と厳密に一致する必要はありません。 内部の静的資産ルーティングとアプリ要求ルーティングの両方に対して "FirstApp" と "SecondApp" を使用することは、この記事の例で単に説明します。
最初のクライアント アプリのプロジェクト ファイル (MultipleBlazorApps.Client.csproj) で、<StaticWebAssetBasePath>を追加し、値を指定して、プロジェクトの静的アセットのベース パスを設定します。
<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>
MultipleBlazorApps.SecondClient アプリのプロジェクト ファイル (MultipleBlazorApps.SecondClient.csproj):
<StaticWebAssetBasePath>の値を持つ<PropertyGroup>にSecondAppプロパティを追加します。<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" />
サーバー アプリのProperties/launchSettings.json ファイルで、ポート 5001 と 5002 でクライアント アプリにアクセスするようにapplicationUrl プロファイル (Kestrel) のMultipleBlazorApps.Serverを構成します。 ドメインの例を使用するようにローカル環境を構成した場合、 applicationUrl の URL は firstapp.com と secondapp.com を使用でき、ポートは使用できません。
注
このデモでポートを使用すると、ローカル ブラウザーでクライアント プロジェクトにアクセスでき、Web ブラウザーがホスト構成、 firstapp.com 、 secondapp.comを介してクライアント アプリにアクセスできるように、ローカル ホスティング環境を構成する必要はありません。 運用シナリオでは、一般的な構成は、サブドメインを使用してクライアント アプリを区別することです。
例えば次が挙げられます。
- ポートは、このデモの構成から削除されます。
- ホストは、サイト訪問者の
www.contoso.comや管理者のadmin.contoso.comなど、サブドメインを使用するように変更されます。 - 追加のクライアント アプリには追加のホストを含めることができます。サーバー アプリがページまたはビューを提供する Razor Pages または MVC アプリでもある場合は、少なくとも 1 つのホストが必要です。
サーバー アプリからページまたはビューを提供する場合は、applicationUrl ファイルで次のProperties/launchSettings.json設定を使用します。この設定により、次のアクセスが許可されます。
- 必要に応じて、 Razor Pages または MVC アプリ (
MultipleBlazorApps.Serverプロジェクト) がポート 5000 の要求に応答します。 - 最初のクライアント (
MultipleBlazorApps.Clientプロジェクト) の要求に対する応答は、ポート 5001 にあります。 - 2 番目のクライアント (
MultipleBlazorApps.SecondClientプロジェクト) の要求に対する応答は、ポート 5002 にあります。
"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",
サーバー アプリがページまたはビューを提供し、 Blazor WebAssembly クライアント アプリのみを提供することを計画していない場合は、次の設定を使用して、次のアクセスを許可します。
- 最初のクライアント アプリはポート 5001 で応答します。
- 2 番目のクライアント アプリはポート 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();
クライアント アプリに要求をマップするミドルウェアを追加します。 次の例では、要求ポートが最初のクライアント アプリの場合は 5001、2 番目のクライアント アプリの場合は 5002、または要求ホストが最初のクライアント アプリに対して
firstapp.comまたは 2 番目のクライアント アプリのsecondapp.comである場合に実行するようにミドルウェアを構成します。注
ローカル ブラウザーでローカル システムでホスト (
firstapp.com/secondapp.com) を使用するには、この記事の範囲外の追加の構成が必要です。 このシナリオのローカル テストでは、ポートを使用することをお勧めします。 一般的な実稼働アプリは、サイト訪問者のwww.contoso.comや管理者のadmin.contoso.comなど、サブドメインを使用するように構成されます。 この記事の範囲を超え、使用されているテクノロジに依存する適切な DNS とサーバー構成では、アプリは次のコードで指定されているホストの要求に応答します。app.UseBlazorFrameworkFiles();からProgram.cs行を削除した場所に、次のコードを配置します。app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || ctx.Request.Host.Equals("firstapp.com"), first => { first.Use((ctx, nxt) => { ctx.Request.Path = "/FirstApp" + ctx.Request.Path; return nxt(); }); first.UseBlazorFrameworkFiles("/FirstApp"); first.UseStaticFiles(); first.UseStaticFiles("/FirstApp"); first.UseRouting(); first.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", "FirstApp/index.html"); }); }); app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || ctx.Request.Host.Equals("secondapp.com"), second => { second.Use((ctx, nxt) => { ctx.Request.Path = "/SecondApp" + ctx.Request.Path; return nxt(); }); second.UseBlazorFrameworkFiles("/SecondApp"); second.UseStaticFiles(); second.UseStaticFiles("/SecondApp"); second.UseRouting(); second.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", "SecondApp/index.html"); }); });Warnung
、HttpRequest.Host などのRequireHostに依存する API は、クライアントによるスプーフィングの対象になる可能性があります。
ホストとポートのスプーフィングを防ぐには、次のいずれかの方法を使用します。
- ポートがチェックされる場所で HttpContext.Connection (ConnectionInfo.LocalPort) を使用します。
- ホスト フィルタリングを採用します。
クライアント アプリに要求をマップするミドルウェアを追加します。 次の例では、要求サブパスが最初のクライアント アプリまたは 2 番目のクライアント アプリの
/FirstAppに/SecondAppされたときに実行するようにミドルウェアを構成します。app.UseBlazorFrameworkFiles();からProgram.cs行を削除した場所に、次のコードを配置します。app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", StringComparison.OrdinalIgnoreCase), first => { first.UseBlazorFrameworkFiles("/FirstApp"); first.UseStaticFiles(); first.UseStaticFiles("/FirstApp"); first.UseRouting(); first.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", "FirstApp/index.html"); }); }); app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", StringComparison.OrdinalIgnoreCase), second => { second.UseBlazorFrameworkFiles("/SecondApp"); second.UseStaticFiles(); second.UseStaticFiles("/SecondApp"); second.UseRouting(); second.UseEndpoints(endpoints => { endpoints.MapControllers(); endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", "SecondApp/index.html"); }); });各クライアント アプリでベース パスを設定します。
最初のクライアント アプリの
index.htmlファイル (Client/wwwroot/index.html) で、サブパスを反映するように<base>タグ値を更新します。 末尾のスラッシュが必要です。<base href="/FirstApp/" />2 番目のクライアント アプリの
index.htmlファイル (SecondClient/wwwroot/index.html) で、サブパスを反映するように<base>タグ値を更新します。 末尾のスラッシュが必要です。<base href="/SecondApp/" />
UseStaticFilesの詳細については、ASP.NET Core Blazor静的ファイルに関するページを参照してください。
UseBlazorFrameworkFilesとMapFallbackToFileの詳細については、次のリソースを参照してください。
- Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (参照ソース)
- Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (参照ソース)
注
通常、.NET 参照ソースへのドキュメント リンクを使用すると、リポジトリの既定のブランチが読み込まれます。このブランチは、.NET の次回リリースに向けて行われている現在の開発を表します。 特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウン リストを使います。 詳細については、「ASP.NET Core ソース コードのバージョン タグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。
クライアント アプリからサーバー API に /WeatherForecast する要求は、要求を行うクライアント アプリに応じて /FirstApp/WeatherForecast または /SecondApp/WeatherForecast されます。 そのため、サーバー API から気象データを返すコントローラー ルートには、パス セグメントを含める変更が必要です。
サーバー アプリの天気予報コントローラー (Controllers/WeatherForecastController.cs) で、既存のルート ([Route("[controller]")]) を WeatherForecastController に置き換え、クライアント要求パスを考慮に入れる次のルートに置き換えます。
[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]
サーバー アプリからページを提供する場合は、サーバー アプリの Index フォルダーにRazorPages ページを追加します。
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()
{
}
}
}
注
上記の Index ページは、デモンストレーションを目的とした最小限の例です。 レイアウト、スタイル、スクリプト、インポートなどの追加の Razor Pages アセットがアプリに必要な場合は、 Razor Pages プロジェクト テンプレートから作成されたアプリから取得します。 詳細については、「ASP.NET Core のRazor ページのアーキテクチャと概念」を参照してください。
サーバー アプリから 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();
}
注
上記の Index ビューは、デモンストレーションを目的とした最小限の例です。 アプリに追加の MVC アセット (レイアウト、スタイル、スクリプト、インポートなど) が必要な場合は、MVC プロジェクト テンプレートから作成されたアプリから取得します。 詳細については、「 ASP.NET Core MVC の概要」を参照してください。
サーバー アプリのページまたはビューでクライアント アプリのいずれかの Razor コンポーネントを使用する方法の詳細については、「 ASP.NET Core Razor コンポーネントと MVC または Razor Pages をホスト Blazor WebAssembly ソリューションに統合する」を参照してください。
アプリを実行する
MultipleBlazorApps.Server プロジェクトを実行します。
-
https://localhost:5001で初期クライアント アプリにアクセスします。 -
https://localhost:5002で追加されたクライアント アプリにアクセスします。 - サーバー アプリがページまたはビューを提供するように構成されている場合は、
Indexページまたはビュー (https://localhost:5000) にアクセスします。
-
https://localhost:{DEFAULT PORT}/FirstAppで初期クライアント アプリにアクセスします。 -
https://localhost:{DEFAULT PORT}/SecondAppで追加されたクライアント アプリにアクセスします。 - サーバー アプリがページまたはビューを提供するように構成されている場合は、
Indexページまたはビュー (https://localhost:{DEFAULT PORT}) にアクセスします。
前の URL の例では、 {DEFAULT PORT} プレースホルダーは、 MultipleBlazorApps.Server プロジェクトの Properties/launchSettings.json ファイルの applicationUrl 値で定義されている既定のポートです。
Important
dotnet watch (またはdotnet run) コマンド (.NET CLI) を使用してアプリを実行する場合は、ソリューションのServer フォルダーでコマンド シェルが開かれていることを確認します。
Visual Studio のスタート ボタンを使用してアプリを実行する場合は、 MultipleBlazorApps.Server プロジェクトがスタートアップ プロジェクトとして設定されていることを確認します (ソリューション エクスプローラーで強調表示されています)。
静的アセット
資産がクライアント アプリの wwwroot フォルダーにある場合は、コンポーネントに静的資産要求パスを指定します。
<img alt="..." src="{PATH AND FILE NAME}" />
{PATH AND FILE NAME} プレースホルダーは、wwwroot の下のパスとファイル名です。
たとえば、jeep-yj.pngのvehicle フォルダー内のジープ イメージ (wwwroot) のソースは次のとおりです。
<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />
Razor クラス ライブラリ (RCL) のサポート
Razor クラス ライブラリ (RCL) を新しいプロジェクトとしてソリューションに追加します。
- ソリューション エクスプローラーでソリューションを右クリックし、[追加>新しいプロジェクト] を選択します。
-
Razor クラス ライブラリ プロジェクト テンプレートを使用して、プロジェクトを作成します。 このセクションの例では、プロジェクト名
ComponentLibraryを使用します。これは RCL のアセンブリ名でもあります。 [ サポート ページとビュー ] チェック ボックスをオンにしないでください。
ホストBlazor WebAssemblyクライアント アプリごとに、ソリューション エクスプローラーで各クライアント プロジェクトを右クリックし、[追加]、[プロジェクト参照]の順に選択して、RCL プロジェクトのプロジェクト>作成します。
次のいずれかの方法で、クライアント アプリで RCL のコンポーネントを使用します。
RCL の名前空間のコンポーネントの先頭に
@usingディレクティブを配置し、コンポーネントの構文 Razor 追加します。 次の例は、アセンブリ名がComponentLibraryRCL の場合です。@using ComponentLibrary ... <Component1 />RCL の名前空間と、コンポーネントの Razor 構文を指定します。 この方法では、コンポーネント ファイルの先頭に
@usingディレクティブは必要ありません。 次の例は、アセンブリ名がComponentLibraryRCL の場合です。<ComponentLibrary.Component1 />
注
@using ディレクティブを各クライアント アプリの_Import.razor ファイルに配置することもできます。これにより、RCL の名前空間をそのプロジェクト内のコンポーネントでグローバルに使用できるようになります。
他の静的アセットが 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 の jeep-yj.png フォルダーのvehicle フォルダー内のジープ イメージ (wwwroot) のマークアップを示しています。 次の例は、アセンブリ名が ComponentLibrary RCL の場合です。
<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />
その他のリソース
ASP.NET Core