ASP.NET Core Blazor 環境

この記事では、 アプリでBlazorを構成して読み取る方法について説明します。

アプリをローカルで実行すると、環境は既定で Developmentされます。 アプリが発行されると、環境は既定で Productionされます。

次の規則をお勧めします。

• ローカル開発には常に "Development" 環境名を使用します。 これは、ASP.NET Core フレームワークは、アプリのローカル開発実行用にアプリとツールを構成するときに、その名前を正確に想定しているためです。

• テスト、ステージング、運用環境の場合は、常にアプリを発行してデプロイします。 発行されたアプリに必要な任意の環境名前付けスキームを使用できますが、常に、環境名と完全に一致する環境セグメントの大文字と小文字を区別してアプリ設定ファイル名を使用します。 ステージングの場合は、環境名として "Staging" (大文字の "S") を使用し、一致するアプリ設定ファイルに名前を付けます (appsettings.Staging.json)。 運用環境では、環境名として "Production" (大文字の "P") を使用し、一致するアプリ設定ファイルに名前を付けます (appsettings.Production.json)。

環境を設定する

環境は、次のいずれかの方法を使用して設定されます。

• Blazor Web App または Blazor Server: 一般的な ASP.NET Core アプリの ASP.NET Core ランタイム環境 で説明されている方法のいずれかを使用します。
• 任意のBlazor アプリ: 構成を開始Blazor
• スタンドアロン Blazor WebAssembly: <WasmApplicationEnvironmentName> プロパティ

Blazor Web Appのクライアントでは、開発者が操作しない HTML コメントを使用して、サーバーから環境が決定されます。

<!--Blazor-WebAssembly:{"environmentName":"Development", ...}-->

スタンドアロン Blazor WebAssembly アプリの場合は、アプリのプロジェクト ファイル (<WasmApplicationEnvironmentName>) で .csproj MSBuild プロパティを使用して環境を設定します。 次の例では、 Staging 環境を設定します。

<WasmApplicationEnvironmentName>Staging</WasmApplicationEnvironmentName>

既定の環境は、ビルド用が Development で、発行用が Production です。

ビルド/発行操作中にスタンドアロン Blazor WebAssembly アプリで環境を設定する方法と、クライアントで起動または実行するアプリの 1 つの方法があります。

• dotnet buildまたはdotnet publishの実行時にプロパティ値を設定します。 次の例では、アプリの発行時に環境を Staging に設定します。

  dotnet publish -p:WasmApplicationEnvironmentName=Staging
  

• Visual Studio でのアプリの構成に基づいて、ビルド中または発行中にプロパティを設定します。 次のプロパティ グループは、アプリのプロジェクト ファイルまたは任意の発行構成ファイル (.pubxml) で使用できます。 他のビルド構成で使用するプロパティ グループを追加します。

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <WasmApplicationEnvironmentName>Development</WasmApplicationEnvironmentName>
  </PropertyGroup>
  
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <WasmApplicationEnvironmentName>Production</WasmApplicationEnvironmentName>
  </PropertyGroup>
  

• この環境は、発行プロファイルの使用に基づいて設定できます。 次の例では、最初の条件は発行プロファイルが使用されていない場合に環境を Development に設定します (プロファイルを使用しないビルド操作と発行操作の両方に適用されます)。2 番目の条件では、発行プロファイルが使用されたときに環境を Production に設定します。

  <PropertyGroup Condition="'$(PublishProfile)' == ''">
    <WasmApplicationEnvironmentName>Development</WasmApplicationEnvironmentName>
  </PropertyGroup>
  
  <PropertyGroup Condition="'$(PublishProfile)' != ''">
    <WasmApplicationEnvironmentName>Production</WasmApplicationEnvironmentName>
  </PropertyGroup>
  

• カスタム サーバー側 Web API エンドポイントを作成します。 スタンドアロン Blazor WebAssembly アプリは、実行中にアプリの起動時またはオンデマンドで Web API から環境を要求します。 値は、 WebAssemblyStartOptions または withApplicationEnvironmentで渡す必要があります。

  注

  通常、.NET 参照ソースへのドキュメント リンクを使用すると、リポジトリの既定のブランチが読み込まれます。このブランチは、.NET の次回リリースに向けて行われている現在の開発を表します。 特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウン リストを使います。 詳細については、「ASP.NET Core ソース コードのバージョン タグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。

開発中にアプリがローカルで実行されている場合、アプリは既定で Development 環境に設定されます。 アプリを発行すると、既定で環境が Productionされます。

スタートアップ構成を使用してクライアント側環境 Blazor 設定する

次の例では、ホスト名にBlazorが含まれている場合、Staging環境でlocalhostを開始します。 それ以外の場合、環境は既定値に設定されます。

Blazor Web App:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  if (window.location.hostname.includes("localhost")) {
    Blazor.start({
      webAssembly: {
        environment: "Staging"
      }
    });
  } else {
    Blazor.start();
  }
</script>

前の例の {BLAZOR SCRIPT} プレースホルダーは、Blazor スクリプトのパスとファイル名です。 スクリプトの場所については、「ASP.NET Core Blazor プロジェクトの構造」を参照してください。

注

Blazor Web App構成で webAssembly>environment プロパティを設定するBlazor.startの場合は、サーバー側環境を environment プロパティに設定された環境と一致させるのが賢明です。 それ以外の場合、サーバーでのプリレンダリングは、クライアントでのレンダリングとは異なる環境で動作し、結果として任意の効果が得られます。 Blazor Web Appの環境の設定に関する一般的なガイダンスについては、「ASP.NET Core ランタイム環境」を参照してください。

スタンドアロン Blazor WebAssembly:

<script src="{BLAZOR SCRIPT}" autostart="false"></script>
<script>
  if (window.location.hostname.includes("localhost")) {
    Blazor.start({
      environment: "Staging"
    });
  } else {
    Blazor.start();
  }
</script>

前の例の {BLAZOR SCRIPT} プレースホルダーは、Blazor スクリプトのパスとファイル名です。 スクリプトの場所については、「ASP.NET Core Blazor プロジェクトの構造」を参照してください。

スタンドアロン Blazor WebAssembly アプリまたは.ClientのBlazor Web App プロジェクトのいずれかで環境をコンソールに記録するには、ProgramでWebAssemblyHostが作成された後、プロジェクトをビルドして実行する行の前に次の C# コードをWebAssemblyHostBuilder.CreateDefault ファイルに配置します (await builder.Build().RunAsync();)。

Console.WriteLine(
    $"Client Hosting Environment: {builder.HostEnvironment.Environment}");

Blazor の起動の詳細については、「ASP.NET Core Blazor の起動」をご覧ください。

Blazor WebAssembly アプリで環境を読み取る

IWebAssemblyHostEnvironmentを挿入し、Environment プロパティを読み取って、コンポーネント内のアプリの環境を取得します。

ReadEnvironment.razor:

@page "/read-environment"
@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IWebAssemblyHostEnvironment Env

<h1>Environment example</h1>

<p>Environment: @Env.Environment</p>

Blazor Web App で、環境クライアント側を読み取ります。

コンポーネントまたはアプリに対してプリレンダリングが無効になっていないと仮定すると、 .Client プロジェクト内のコンポーネントがサーバー上でプリレンダリングされます。 サーバーには登録済みの IWebAssemblyHostEnvironment サービスがないため、サーバーのプリレンダリング中にサービスを挿入し、サービス実装のホスト環境拡張メソッドとプロパティを使用することはできません。 対話型 WebAssembly または対話型自動コンポーネントにサービスを挿入すると、次のランタイム エラーが発生します。

There is no registered service of type 'Microsoft.AspNetCore.Components.WebAssembly.Hosting.IWebAssemblyHostEnvironment'.

これに対処するには、サーバー上の IWebAssemblyHostEnvironment 用のカスタム サービス実装を作成します。 詳細と実装例については、prerendering に関する記事の「サーバー上のカスタム サービスの実装」セクションを参照してください。これは、Blazorドキュメントの後半で説明します。

起動時にクライアント側環境を読み取る

起動時に、WebAssemblyHostBuilderは IWebAssemblyHostEnvironment プロパティを介してHostEnvironmentを公開します。これにより、ホスト ビルダー コードで環境固有のロジックが有効になります。

Program ファイルで次の操作を行います。

if (builder.HostEnvironment.Environment == "Custom")
{
    ...
};

WebAssemblyHostEnvironmentExtensionsによって提供される次の便利な拡張メソッドでは、現在の環境でDevelopment、Production、Staging、カスタム環境の名前を確認できます。

• IsDevelopment
• IsProduction
• IsStaging
• IsEnvironment

Program ファイルで次の操作を行います。

if (builder.HostEnvironment.IsStaging())
{
    ...
};

if (builder.HostEnvironment.IsEnvironment("Custom"))
{
    ...
};

IWebAssemblyHostEnvironment.BaseAddress プロパティは、NavigationManager サービスが使用できない場合に起動時に使用できます。

その他のリソース

• ASP.NET Core Blazor の起動
• ASP.NET Core ランタイム環境
• Blazor サンプル GitHub リポジトリ (dotnet/blazor-samples) (ダウンロード方法)