ASP.NET Core Blazor の構成

注意

このトピックの対象は、Blazor WebAssembly です。 ASP.NET Core アプリの構成に関する一般的なガイダンスについては、「ASP.NET Core の構成」を参照してください。

Blazor WebAssembly を使用すると、既定で次のアプリ設定ファイルから構成が読み込まれます。

  • wwwroot/appsettings.json.
  • wwwroot/appsettings.{ENVIRONMENT}.json。ここで、{ENVIRONMENT} プレースホルダーはアプリのランタイム環境です。

アプリによって登録されたその他の構成プロバイダーで構成を指定することもできますが、すべてのプロバイダーやプロバイダーの機能が Blazor WebAssembly アプリに適しているわけではありません。

  • Azure Key Vault 構成プロバイダー: クライアント シークレットのシナリオでは、プロバイダーはマネージド ID およびアプリケーション ID (クライアント ID) に対してはサポートされていません。 クライアント シークレットを使用したアプリケーション ID は、ASP.NET Core アプリ、特に Blazor WebAssembly アプリでは推奨されません。これは、クライアント シークレットを Azure Key Vault サービスにアクセスするためにクライアント側ではセキュリティで保護できないためです。
  • Azure App Configuration プロバイダー: このプロバイダーは Blazor WebAssembly アプリに適していません。これは、Blazor WebAssembly アプリは Azure 内のサーバー上では実行されないためです。

警告

Blazor WebAssembly アプリの構成および設定ファイルは、ユーザーに表示されます。 アプリのシークレット、資格情報、その他の機微なデータを Blazor WebAssembly アプリの構成またはファイルに格納しないでください。

構成プロバイダーの詳細については、「ASP.NET Core の構成」を参照してください。

アプリ設定の構成

アプリ設定ファイルの構成は既定で読み込まれます。 次の例では、UI 構成値がアプリ設定ファイルに格納され、Blazor フレームワークによって自動的に読み込まれます。 その値はコンポーネントによって読み取られます。

wwwroot/appsettings.json:

{
  "h1FontSize": "50px"
}

構成データにアクセスするために、コンポーネントに IConfiguration インスタンスを挿入します。

Pages/ConfigurationExample.razor:

@page "/configuration-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example
</h1>

クライアントのセキュリティ制限により、アプリ構成の設定ファイルなどのファイルへの直接アクセスが防止されます。 appsettings.json/appsettings.{ENVIRONMENT}.json に加えて構成ファイルを wwwroot フォルダーから構成に読み取るには、HttpClient を使用します。

警告

Blazor WebAssembly アプリの構成および設定ファイルは、ユーザーに表示されます。 アプリのシークレット、資格情報、その他の機微なデータを Blazor WebAssembly アプリの構成またはファイルに格納しないでください。

次の例では、構成ファイル (cars.json) をアプリの構成に読み取ります。

wwwroot/cars.json:

{
    "size": "tiny"
}

Program.csMicrosoft.Extensions.Configuration の名前空間を追加します。

using Microsoft.Extensions.Configuration;

Program.cs では、クライアントを使用してファイルを読み取るように、既存の HttpClient サービス登録を変更します。

var http = new HttpClient()
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
};

builder.Services.AddScoped(sp => http);

using var response = await http.GetAsync("cars.json");
using var stream = await response.Content.ReadAsStreamAsync();

builder.Configuration.AddJsonStream(stream);

メモリ構成のソース

次の例では、Program.csMemoryConfigurationSource を使用して追加の構成を指定します。

Program.csMicrosoft.Extensions.Configuration.Memory の名前空間を追加します。

using Microsoft.Extensions.Configuration.Memory;

Program.csの場合:

var vehicleData = new Dictionary<string, string>()
{
    { "color", "blue" },
    { "type", "car" },
    { "wheels:count", "3" },
    { "wheels:brand", "Blazin" },
    { "wheels:brand:type", "rally" },
    { "wheels:year", "2008" },
};

var memoryConfig = new MemoryConfigurationSource { InitialData = vehicleData };

builder.Configuration.Add(memoryConfig);

構成データにアクセスするために、コンポーネントに IConfiguration インスタンスを挿入します。

Pages/MemoryConfig.razor:

@page "/memory-config"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1>Memory configuration example</h1>

<h2>General specifications</h2>

<ul>
    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>
</ul>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

IConfiguration.GetSectionで C# コード内の構成セクションを取得します。 次の例では、前の例の構成の wheels セクションを取得します。

@code {
    protected override void OnInitialized()
    {
        var wheelsSection = Configuration.GetSection("wheels");

        ...
    }
}

認証の構成

アプリ設定ファイルで認証構成を指定します。

wwwroot/appsettings.json:

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Program.csConfigurationBinder.Bind を使用して、Identity プロバイダーの構成を読み込みます。 次の例では、OIDC プロバイダーの構成を読み込みます。

Program.cs:

builder.Services.AddOidcAuthentication(options =>
    builder.Configuration.Bind("Local", options.ProviderOptions));

ログの構成

アプリのプロジェクト ファイルに、Microsoft.Extensions.Logging.Configuration のパッケージ参照を追加します。

<PackageReference Include="Microsoft.Extensions.Logging.Configuration" Version="{VERSION}" />

前の例では、プレースホルダー {VERSION} はパッケージのバージョンです。 パッケージのバージョンについては NuGet.org を参照してください。

アプリ設定ファイルで、ログ構成を指定します。 ログ構成は Program.cs に読み込まれます。

wwwroot/appsettings.json:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}

Program.csMicrosoft.Extensions.Logging の名前空間を追加します。

using Microsoft.Extensions.Logging;

Program.csの場合:

builder.Logging.AddConfiguration(
    builder.Configuration.GetSection("Logging"));

ホスト ビルダーの構成

Program.csWebAssemblyHostBuilder.Configuration のホスト ビルダーの構成を読み取ります。

Program.csの場合:

var hostname = builder.Configuration["HostName"];

キャッシュされた構成

構成ファイルは、オフラインで使用できるようにキャッシュされます。 プログレッシブ Web アプリケーション (PWA) では、新しい展開を作成するときにのみ構成ファイルを更新できます。 次の理由により、展開間で構成ファイルを編集しても意味がありません。

  • ユーザーには、引き続き使用するファイルのキャッシュされたバージョンがあります。
  • PWA の service-worker.jsservice-worker-assets.js のファイルは、コンパイル時に再構築される必要があります。これにより、ユーザーの次回のオンライン アクセス時に、アプリが再展開されたことが通知されます。

PWA によるバックグラウンド更新の処理方法の詳細については、「ASP.NET Core Blazor WebAssembly を使用してプログレッシブ Web アプリケーションをビルドする」を参照してください。

注意

このトピックの対象は、Blazor WebAssembly です。 ASP.NET Core アプリの構成に関する一般的なガイダンスについては、「ASP.NET Core の構成」を参照してください。

Blazor WebAssembly を使用すると、既定で次のアプリ設定ファイルから構成が読み込まれます。

  • wwwroot/appsettings.json.
  • wwwroot/appsettings.{ENVIRONMENT}.json。ここで、{ENVIRONMENT} プレースホルダーはアプリのランタイム環境です。

アプリによって登録されたその他の構成プロバイダーで構成を指定することもできますが、すべてのプロバイダーやプロバイダーの機能が Blazor WebAssembly アプリに適しているわけではありません。

  • Azure Key Vault 構成プロバイダー: クライアント シークレットのシナリオでは、プロバイダーはマネージド ID およびアプリケーション ID (クライアント ID) に対してはサポートされていません。 クライアント シークレットを使用したアプリケーション ID は、ASP.NET Core アプリ、特に Blazor WebAssembly アプリでは推奨されません。これは、クライアント シークレットを Azure Key Vault サービスにアクセスするためにクライアント側ではセキュリティで保護できないためです。
  • Azure App Configuration プロバイダー: このプロバイダーは Blazor WebAssembly アプリに適していません。これは、Blazor WebAssembly アプリは Azure 内のサーバー上では実行されないためです。

警告

Blazor WebAssembly アプリの構成および設定ファイルは、ユーザーに表示されます。 アプリのシークレット、資格情報、その他の機微なデータを Blazor WebAssembly アプリの構成またはファイルに格納しないでください。

構成プロバイダーの詳細については、「ASP.NET Core の構成」を参照してください。

アプリ設定の構成

アプリ設定ファイルの構成は既定で読み込まれます。 次の例では、UI 構成値がアプリ設定ファイルに格納され、Blazor フレームワークによって自動的に読み込まれます。 その値はコンポーネントによって読み取られます。

wwwroot/appsettings.json:

{
  "h1FontSize": "50px"
}

構成データにアクセスするために、コンポーネントに IConfiguration インスタンスを挿入します。

Pages/ConfigurationExample.razor:

@page "/configuration-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example
</h1>

クライアントのセキュリティ制限により、アプリ構成の設定ファイルなどのファイルへの直接アクセスが防止されます。 appsettings.json/appsettings.{ENVIRONMENT}.json に加えて構成ファイルを wwwroot フォルダーから構成に読み取るには、HttpClient を使用します。

警告

Blazor WebAssembly アプリの構成および設定ファイルは、ユーザーに表示されます。 アプリのシークレット、資格情報、その他の機微なデータを Blazor WebAssembly アプリの構成またはファイルに格納しないでください。

次の例では、構成ファイル (cars.json) をアプリの構成に読み取ります。

wwwroot/cars.json:

{
    "size": "tiny"
}

Program.csMicrosoft.Extensions.Configuration の名前空間を追加します。

using Microsoft.Extensions.Configuration;

Program.cs では、クライアントを使用してファイルを読み取るように、既存の HttpClient サービス登録を変更します。

var http = new HttpClient()
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
};

builder.Services.AddScoped(sp => http);

using var response = await http.GetAsync("cars.json");
using var stream = await response.Content.ReadAsStreamAsync();

builder.Configuration.AddJsonStream(stream);

メモリ構成のソース

次の例では、Program.csMemoryConfigurationSource を使用して追加の構成を指定します。

Program.csMicrosoft.Extensions.Configuration.Memory の名前空間を追加します。

using Microsoft.Extensions.Configuration.Memory;

Program.csの場合:

var vehicleData = new Dictionary<string, string>()
{
    { "color", "blue" },
    { "type", "car" },
    { "wheels:count", "3" },
    { "wheels:brand", "Blazin" },
    { "wheels:brand:type", "rally" },
    { "wheels:year", "2008" },
};

var memoryConfig = new MemoryConfigurationSource { InitialData = vehicleData };

builder.Configuration.Add(memoryConfig);

構成データにアクセスするために、コンポーネントに IConfiguration インスタンスを挿入します。

Pages/MemoryConfig.razor:

@page "/memory-config"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1>Memory configuration example</h1>

<h2>General specifications</h2>

<ul>
    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>
</ul>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

IConfiguration.GetSectionで C# コード内の構成セクションを取得します。 次の例では、前の例の構成の wheels セクションを取得します。

@code {
    protected override void OnInitialized()
    {
        var wheelsSection = Configuration.GetSection("wheels");

        ...
    }
}

認証の構成

アプリ設定ファイルで認証構成を指定します。

wwwroot/appsettings.json:

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Program.csConfigurationBinder.Bind を使用して、Identity プロバイダーの構成を読み込みます。 次の例では、OIDC プロバイダーの構成を読み込みます。

Program.cs:

builder.Services.AddOidcAuthentication(options =>
    builder.Configuration.Bind("Local", options.ProviderOptions));

ログの構成

アプリのプロジェクト ファイルに、Microsoft.Extensions.Logging.Configuration のパッケージ参照を追加します。

<PackageReference Include="Microsoft.Extensions.Logging.Configuration" Version="{VERSION}" />

前の例では、プレースホルダー {VERSION} はパッケージのバージョンです。 パッケージのバージョンについては NuGet.org を参照してください。

アプリ設定ファイルで、ログ構成を指定します。 ログ構成は Program.cs に読み込まれます。

wwwroot/appsettings.json:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  }
}

Program.csMicrosoft.Extensions.Logging の名前空間を追加します。

using Microsoft.Extensions.Logging;

Program.csの場合:

builder.Logging.AddConfiguration(
    builder.Configuration.GetSection("Logging"));

ホスト ビルダーの構成

Program.csWebAssemblyHostBuilder.Configuration のホスト ビルダーの構成を読み取ります。

Program.csの場合:

var hostname = builder.Configuration["HostName"];

キャッシュされた構成

構成ファイルは、オフラインで使用できるようにキャッシュされます。 プログレッシブ Web アプリケーション (PWA) では、新しい展開を作成するときにのみ構成ファイルを更新できます。 次の理由により、展開間で構成ファイルを編集しても意味がありません。

  • ユーザーには、引き続き使用するファイルのキャッシュされたバージョンがあります。
  • PWA の service-worker.jsservice-worker-assets.js のファイルは、コンパイル時に再構築される必要があります。これにより、ユーザーの次回のオンライン アクセス時に、アプリが再展開されたことが通知されます。

PWA によるバックグラウンド更新の処理方法の詳細については、「ASP.NET Core Blazor WebAssembly を使用してプログレッシブ Web アプリケーションをビルドする」を参照してください。

注意

このトピックの対象は、Blazor WebAssembly です。 ASP.NET Core アプリの構成に関する一般的なガイダンスについては、「ASP.NET Core の構成」を参照してください。

Blazor WebAssembly を使用すると、既定で次のアプリ設定ファイルから構成が読み込まれます。

  • wwwroot/appsettings.json.
  • wwwroot/appsettings.{ENVIRONMENT}.json。ここで、{ENVIRONMENT} プレースホルダーはアプリのランタイム環境です。

アプリによって登録されたその他の構成プロバイダーで構成を指定することもできますが、すべてのプロバイダーやプロバイダーの機能が Blazor WebAssembly アプリに適しているわけではありません。

  • Azure Key Vault 構成プロバイダー: クライアント シークレットのシナリオでは、プロバイダーはマネージド ID およびアプリケーション ID (クライアント ID) に対してはサポートされていません。 クライアント シークレットを使用したアプリケーション ID は、ASP.NET Core アプリ、特に Blazor WebAssembly アプリでは推奨されません。これは、クライアント シークレットを Azure Key Vault サービスにアクセスするためにクライアント側ではセキュリティで保護できないためです。
  • Azure App Configuration プロバイダー: このプロバイダーは Blazor WebAssembly アプリに適していません。これは、Blazor WebAssembly アプリは Azure 内のサーバー上では実行されないためです。

警告

Blazor WebAssembly アプリの構成および設定ファイルは、ユーザーに表示されます。 アプリのシークレット、資格情報、その他の機微なデータを Blazor WebAssembly アプリの構成またはファイルに格納しないでください。

構成プロバイダーの詳細については、「ASP.NET Core の構成」を参照してください。

アプリ設定の構成

アプリ設定ファイルの構成は既定で読み込まれます。 次の例では、UI 構成値がアプリ設定ファイルに格納され、Blazor フレームワークによって自動的に読み込まれます。 その値はコンポーネントによって読み取られます。

wwwroot/appsettings.json:

{
  "h1FontSize": "50px"
}

構成データにアクセスするために、コンポーネントに IConfiguration インスタンスを挿入します。

Pages/ConfigurationExample.razor:

@page "/configuration-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1 style="font-size:@Configuration["h1FontSize"]">
    Configuration example
</h1>

クライアントのセキュリティ制限により、アプリ構成の設定ファイルなどのファイルへの直接アクセスが防止されます。 appsettings.json/appsettings.{ENVIRONMENT}.json に加えて構成ファイルを wwwroot フォルダーから構成に読み取るには、HttpClient を使用します。

警告

Blazor WebAssembly アプリの構成および設定ファイルは、ユーザーに表示されます。 アプリのシークレット、資格情報、その他の機微なデータを Blazor WebAssembly アプリの構成またはファイルに格納しないでください。

次の例では、構成ファイル (cars.json) をアプリの構成に読み取ります。

wwwroot/cars.json:

{
    "size": "tiny"
}

Program.csMicrosoft.Extensions.Configuration の名前空間を追加します。

using Microsoft.Extensions.Configuration;

Program.cs では、クライアントを使用してファイルを読み取るように、既存の HttpClient サービス登録を変更します。

var http = new HttpClient()
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
};

builder.Services.AddScoped(sp => http);

using var response = await http.GetAsync("cars.json");
using var stream = await response.Content.ReadAsStreamAsync();

builder.Configuration.AddJsonStream(stream);

メモリ構成のソース

次の例では、Program.csMemoryConfigurationSource を使用して追加の構成を指定します。

Program.csMicrosoft.Extensions.Configuration.Memory の名前空間を追加します。

using Microsoft.Extensions.Configuration.Memory;

Program.csの場合:

var vehicleData = new Dictionary<string, string>()
{
    { "color", "blue" },
    { "type", "car" },
    { "wheels:count", "3" },
    { "wheels:brand", "Blazin" },
    { "wheels:brand:type", "rally" },
    { "wheels:year", "2008" },
};

var memoryConfig = new MemoryConfigurationSource { InitialData = vehicleData };

builder.Configuration.Add(memoryConfig);

構成データにアクセスするために、コンポーネントに IConfiguration インスタンスを挿入します。

Pages/MemoryConfig.razor:

@page "/memory-config"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1>Memory configuration example</h1>

<h2>General specifications</h2>

<ul>
    <li>Color: @Configuration["color"]</li>
    <li>Type: @Configuration["type"]</li>
</ul>

<h2>Wheels</h2>

<ul>
    <li>Count: @Configuration["wheels:count"]</li>
    <li>Brand: @Configuration["wheels:brand"]</li>
    <li>Type: @Configuration["wheels:brand:type"]</li>
    <li>Year: @Configuration["wheels:year"]</li>
</ul>

IConfiguration.GetSectionで C# コード内の構成セクションを取得します。 次の例では、前の例の構成の wheels セクションを取得します。

@code {
    protected override void OnInitialized()
    {
        var wheelsSection = Configuration.GetSection("wheels");

        ...
    }
}

認証の構成

アプリ設定ファイルで認証構成を指定します。

wwwroot/appsettings.json:

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Program.csConfigurationBinder.Bind を使用して、Identity プロバイダーの構成を読み込みます。 次の例では、OIDC プロバイダーの構成を読み込みます。

Program.cs:

builder.Services.AddOidcAuthentication(options =>
    builder.Configuration.Bind("Local", options.ProviderOptions));

ログの構成

アプリのプロジェクト ファイルに、Microsoft.Extensions.Logging.Configuration のパッケージ参照を追加します。

<PackageReference Include="Microsoft.Extensions.Logging.Configuration" Version="{VERSION}" />

前の例では、プレースホルダー {VERSION} はパッケージのバージョンです。 パッケージのバージョンについては NuGet.org を参照してください。

アプリ設定ファイルで、ログ構成を指定します。 ログ構成は Program.cs に読み込まれます。

wwwroot/appsettings.json:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  }
}

Program.csMicrosoft.Extensions.Logging の名前空間を追加します。

using Microsoft.Extensions.Logging;

Program.csの場合:

builder.Logging.AddConfiguration(
    builder.Configuration.GetSection("Logging"));

ホスト ビルダーの構成

Program.csWebAssemblyHostBuilder.Configuration のホスト ビルダーの構成を読み取ります。

Program.csの場合:

var hostname = builder.Configuration["HostName"];

キャッシュされた構成

構成ファイルは、オフラインで使用できるようにキャッシュされます。 プログレッシブ Web アプリケーション (PWA) では、新しい展開を作成するときにのみ構成ファイルを更新できます。 次の理由により、展開間で構成ファイルを編集しても意味がありません。

  • ユーザーには、引き続き使用するファイルのキャッシュされたバージョンがあります。
  • PWA の service-worker.jsservice-worker-assets.js のファイルは、コンパイル時に再構築される必要があります。これにより、ユーザーの次回のオンライン アクセス時に、アプリが再展開されたことが通知されます。

PWA によるバックグラウンド更新の処理方法の詳細については、「ASP.NET Core Blazor WebAssembly を使用してプログレッシブ Web アプリケーションをビルドする」を参照してください。