演習 - ASP.NET Core アプリの機能を制御する機能フラグを実装する

  • 12 分

この演習では、機能フラグを実装して、アプリケーションの季節営業バナーを切り替えます。 機能フラグを使用すると、アプリを再デプロイせずに機能の可用性を切り替えることができます。

.NET 機能フラグ ライブラリの 機能管理 を使用します。 このライブラリには、アプリに機能フラグを実装するためのヘルパーが用意されています。 このライブラリでは、条件付きルートやアクション フィルターの追加など、より高度なシナリオに対する条件付きステートメントなどの単純なユース ケースがサポートされています。 さらに、機能フィルターがサポートされており、特定のパラメーターに基づいて機能を有効にすることができます。 このようなパラメーターの例には、ウィンドウ時間、パーセンテージ、またはユーザーのサブセットが含まれます。

このユニットでは、次のことを行います。

  • Azure App Configuration インスタンスを作成します。
  • App Configuration ストアに機能フラグを追加します。
  • アプリを App Configuration ストアに接続します。
  • 機能フラグを使用するようにアプリケーションを修正します。
  • 販売バナーを表示するように製品ページを変更します。
  • アプリをビルドしてテストします。

開発環境を開く

演習をホストする GitHub codespace を使うか、Visual Studio Code でローカルで演習を完了するかを選択できます。

コードスペースを使用するには、この Codespace 作成リンクを使用して、事前構成済みの GitHub Codespace を作成します。

GitHub では、コードスペースの作成と構成に数分かかります。 完了すると、演習のコード ファイルが表示されます。 このモジュールの残りの部分で使用されるコードは 、/dotnet-feature-flags ディレクトリにあります。

Visual Studio Code を使用するには、https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative リポジトリをローカル コンピューターに複製します。 その後、以下を実行します。

  1. Visual Studio Code で Dev Container を実行するための システムの前提条件 をインストールします。
  2. Docker が動作していることを確認します。
  3. 新しい Visual Studio Code ウィンドウで、クローンされたリポジトリのフォルダーを開きます
  4. Ctrl++キーを押してコマンド パレットを開きます。
  5. 検索: >Dev Containers:コンテナーでリビルドして再度開く
  6. ドロップダウンから eShopLite - dotnet-feature-flags を選択します。 Visual Studio Code により、ローカルで開発コンテナーが作成されます。

App Configuration インスタンスを作成する

Azure サブスクリプションに App Configuration インスタンスを作成するには、次の手順を実行します。

  1. 新しいターミナル ウィンドウで、Azure CLI にサインインします。

    az login --use-device-code

  2. 選択した Azure サブスクリプションを表示します。

    az account show -o table

    間違ったサブスクリプションが選択されている場合は、 az account set コマンドを使用して正しいサブスクリプションを選択します。

  3. 次の Azure CLI コマンドを実行して、Azure リージョンの一覧と、それに関連付けられている名前を取得します。

    az account list-locations -o table

    最も近いリージョンを見つけて、次の手順でそれを使用して置き換えます [Closest Azure region]

  4. 次の Azure CLI コマンドを実行して、App Configuration インスタンスを作成します。

    export LOCATION=[Closest Azure region]
export RESOURCE_GROUP=rg-eshop
export CONFIG_NAME=eshop-app-features$SRANDOM

    LOCATION を、近くの Azure リージョン (eastus など) に変更する必要があります。 リソース グループまたはアプリ構成に別の名前を付けたい場合は、上記の値を変更します。

  5. 次のコマンドを実行して、Azure リソース グループを作成します。

    az group create --name $RESOURCE_GROUP --location $LOCATION

  6. 次のコマンドを実行して、App Configuration インスタンスを作成します。

    az appconfig create --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --location $LOCATION --sku Free

    次に示す出力の一例が表示されます。

    {
  "createMode": null,
  "creationDate": "2023-10-31T15:40:10+00:00",
  "disableLocalAuth": false,
  "enablePurgeProtection": false,
  "encryption": {
    "keyVaultProperties": null
  },
  "endpoint": "https://eshop-app-features1168054702.azconfig.io",
  "id": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/rg-eshop/providers/Microsoft.AppConfiguration/configurationStores/eshop-app-features1168054702",
  "identity": null,

  7. 次のコマンドを実行して、App Configuration インスタンスの接続文字列を取得します。

    az appconfig credential list --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --query [0].connectionString --output tsv

    Endpoint=プレフィックスが付いたこの文字列は、App Configuration ストアの接続文字列を表します。

  8. 接続文字列をコピーします。 これはすぐに使用します。

App Configuration 接続文字列を格納する

次に、App Configuration 接続文字列をアプリケーションに追加します。 次の手順を実行します :

  1. /dotnet-feature-flags/docker-compose.yml ファイルを開きます。

  2. 13 行目に新しい環境変数を追加します。

    - ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

    docker-compose.ymlは次の YAML のようになります。

    environment: 
  - ProductEndpoint=http://backend:8080
  - ConnectionStrings:AppConfig=Endpoint=https://eshop-app-features1168054702.azconfig.io;Id=<ID>;Secret=<Secret value>

前の行はキーと値のペアを表し、 ConnectionStrings:AppConfig は環境変数の名前です。 Store プロジェクトでは、環境変数構成プロバイダーがその値を読み取ります。

ヒント

Azure App Configuration 接続文字列にはプレーンテキスト シークレットが含まれています。 実際のアプリでは、シークレットのセキュリティで保護されたストレージのために、App Configuration と Azure Key Vault の統合を検討してください。 Key Vault はこのモジュールの範囲外ですが、ガイダンスについてはチュートリアル : ASP.NET Core アプリで Key Vault 参照を使用する方法に関する記事を参照してください。

App Configuration ストアに機能フラグを追加する

Azure App Configuration で、キーと値のペアを作成し、機能フラグとして扱えるようにします。 次の手順を実行します :

  1. 別のブラウザー タブで、Azure CLI と同じアカウントとディレクトリを使用して Azure portal にサインインします。

  2. 検索ボックスを使用して、 eshop-app-featuresのプレフィックスが付いた App Configuration リソースを見つけて開きます。

  3. [ 操作 ] セクションで、[ 機能マネージャー] を選択します。

  4. 上部のメニューで、[ + 作成] を選択します。

  5. [ 機能フラグを有効にする ] チェック ボックスをオンにします。

  6. [ 機能フラグ名 ] テキスト ボックスに「 SeasonalDiscount」と入力します。

  7. [ 適用] を選択します。

    新しく追加された機能フラグのスクリーンショット。

    App Configuration ストアに機能フラグが存在するため、 Store プロジェクトでは読み取りにいくつかの変更が必要になります。

コードのレビュー

IDE のエクスプローラー ウィンドウでディレクトリを確認します。 DataEntities、Products、Storeの 3 つのプロジェクトがあることに注意してください。 Store プロジェクトは Blazor アプリです。 Products プロジェクトは、製品サービスを含む .NET Standard ライブラリです。 DataEntities プロジェクトは、製品モデルを含む .NET Standard ライブラリです。

アプリを App Configuration ストアに接続する

ASP.NET Core アプリの App Configuration ストアから値にアクセスするには、App Configuration の構成プロバイダーが必要です。

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

  1. ターミナル ウィンドウで、ストア フォルダーに移動します。

    cd dotnet-feature-flags/Store

  2. 次のコマンドを実行して、App Configuration サービスの .NET 構成プロバイダーを含む NuGet パッケージをインストールします。

    dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
dotnet add package Microsoft.FeatureManagement.AspNetCore
dotnet add package Microsoft.Extensions.Configuration.AzureAppConfiguration

  3. Store/Program.cs ファイルを開きます。

  4. ファイルの先頭に新しいパッケージ参照を追加します。

    using Microsoft.FeatureManagement;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Configuration.AzureAppConfiguration;

  5. // AddAzureAppConfiguration コードのコメントの下にこのコードを追加してください。

    // Retrieve the connection string
var connectionString = builder.Configuration.GetConnectionString("AppConfig");

// Load configuration from Azure App Configuration
builder.Configuration.AddAzureAppConfiguration(options => {
  options.Connect(connectionString)
    .UseFeatureFlags();
});

// Register the Feature Management library's services
builder.Services.AddFeatureManagement();
builder.Services.AddAzureAppConfiguration();

    前のコード スニペットでは、次のようになります。

    • Connectメソッドは、App Configuration ストアに対して認証します。 接続文字列が環境変数 ConnectionStrings:AppConfigとして渡されていることを思い出してください。
    • UseFeatureFlags メソッドを使用すると、機能管理ライブラリは App Configuration ストアから機能フラグを読み取ります。
    • 2 つの builder.Services 呼び出しによって、フィーチャー管理ライブラリのサービスがアプリの依存関係挿入コンテナーに登録されます。

  6. ファイルの下部にある [ アプリ構成ミドルウェアの追加] の下に、次のコードを追加します。

    app.UseAzureAppConfiguration();

    上記のコードは、App Configuration ミドルウェアを要求パイプラインに追加します。 ミドルウェアは、すべての受信要求の機能管理パラメーターの更新操作をトリガーします。 次に、更新設定に基づいて、実際にストアに接続して値を取得するタイミングを決定するのは、 AzureAppConfiguration プロバイダー次第です。

販売バナーを有効にする

アプリは機能フラグを読み取れるようになりましたが、販売中であることを示すために製品ページを更新する必要があります。 次の手順を実行します :

  1. Store/Components/Pages/Products.razor ファイルを開きます。

  2. ファイルの先頭に、次のコードを追加します。

    @using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager

    前のコードは、フィーチャー管理ライブラリの名前空間をインポートし、 IFeatureManager インターフェイスをコンポーネントに挿入します。

  3. @code セクションで、次の変数を追加して、機能フラグの状態を格納します。

    private bool saleOn = false;

  4. OnInitializedAsync メソッドで、次のコードを追加します。

    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    メソッドは次のコードのようになります。

    protected override async Task OnInitializedAsync()
{
    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    // Simulate asynchronous loading to demonstrate streaming rendering
    products = await ProductService.GetProducts();
}

  5. 26 行目の <!-- Add a sales alert for customers --> コメントの下に、次のコードを追加します。

    <!-- Add a sales alert for customers -->
@if (saleOn)
{
<div class="alert alert-success" role="alert">
  Our sale is now on.
</div>
}

    前のコードでは、機能フラグが有効になっている場合に販売アラートが表示されます。

アプリのビルド

  1. すべての変更を保存し、 dotnet-feature-flags ディレクトリにあることを確認します。 ターミナルで、次のコマンドを実行します。

    dotnet publish /p:PublishProfile=DefaultContainer

  2. Docker を使用してアプリを実行します。

    docker compose up

機能フラグをテストする

コードスペースで機能フラグが期待どおりに動作することを確認するには、次の手順を実行します。

  1. [ポート] タブに切り替え、フロントエンド ポートのローカル アドレスの右側にある地球アイコンを選択します。 ブラウザーがホームページに新しいタブを開きます。
  2. [ 製品] を選択します。

Visual Studio Code をローカルで使用している場合は、 http://localhost:32000/productsを開きます。

製品ページの販売アラートを示すスクリーンショット。

Azure portal では、機能フラグを有効または無効にし、製品ページを更新して、フラグの動作を確認できます。