• 12 分

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

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

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

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

開発環境を開く

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

codespace を使用するには、こちらの codespace 作成リンクを使用して、事前構成済みの GitHub codespace を作成します。

GitHub による codespace の作成と構成には数分かかります。 終わると、演習用のコード ファイルが表示されます。 このモジュールの残りの部分で使われるコードは、/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+Shift+P キーを押して、コマンド パレットを開きます。
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/7eebce2a-0884-4df2-8d1d-2a3c051e47fe/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 プロジェクトで、環境変数構成プロバイダーがその値を読み取ります。

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. ターミナル ウィンドウで、Store フォルダーに移動します。

   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. このコードを // Add the AddAzureAppConfiguration code (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 メソッドを使用すると、Feature Management ライブラリが App Configuration ストアから機能フラグを読み取れるようになります。
   • この 2 つの builder.Services 呼び出しにより、Feature Management ライブラリのサービスがアプリの依存関係挿入コンテナーに登録されます。

6. ファイルの下部にある、// Add the App Configuration middleware (App Configuration ミドルウェアを追加する) の下に、次のコードを追加します。

   app.UseAzureAppConfiguration();
   

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

販売バナーを有効にする

お使いのアプリで機能フラグを読み取れるようになりましたが、セールが開催されていることを示すために製品ページを更新する必要があります。 次の手順を実行します。

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

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

   @using Microsoft.FeatureManagement
   @inject IFeatureManager FeatureManager
   

   前のコードは、Feature Management ライブラリの名前空間をインポートし、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
   

機能フラグをテストする

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

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

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

Azure portal で、機能フラグを有効および無効にし、製品ページを更新すれば、フラグの動作を確認できます。