演習 - Azure App Configuration インスタンスに構成設定を実装する

完了

アプリケーションの新しい要件では、機能フラグで製品の割引を制御できるようにする必要があります。 この演習では、その方法を示します。

• Azure App Configuration インスタンスに構成設定を追加します。
• 新しい設定を使用して製品価格を割引するコードを追加します。
• アプリをビルドしてテストします。

App Configuration ストアに構成設定を追加する

Azure App Configuration で、販売割引率を格納する新しいキーと値のペアを作成します。 次の手順を実行します :

1. 別のブラウザー タブで、Azure CLI と同じアカウントとディレクトリを使用して Azure portal にサインインします。
2. 検索ボックスを使用して、 eshop-app-featuresのプレフィックスが付いた App Configuration リソースを見つけて開きます。
3. [ 操作 ] セクションで、[ 構成エクスプローラー] を選択します。
4. 上部のメニューで 、[ + 作成 ] を選択し、[ キーと値] を選択します。
5. [ キー ] テキスト ボックスに「 eShopLite__Store__DiscountPercent」と入力します。
6. [ 値 ] テキスト ボックスに「 0.8」と入力します。
7. [ 適用] を選択します。

新しい構成設定を使用するコードを追加する

新しい構成設定を使用するには、製品ページを更新する必要があります。 次の手順を実行します :

1. Visual Studio Code で、 Store/Components/Pages/Products.razor ファイルを開きます。

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

   private decimal discountPercentage;  
   

3. OnInitializedAsync メソッドで、次のコードを追加して、構成設定の値を取得します。

   if (saleOn) {
     discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
   }
   

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

   protected override async Task OnInitializedAsync()
   {
       saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");
   
       // Simulate asynchronous loading to demonstrate streaming rendering
       products = await ProductService.GetProducts();
   
       if (saleOn) {
         discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
       }
   }
   

   上記のコードでは、Configuration オブジェクトを使用して構成設定の値を取得します。 この値は、10 進数として discountPercentage 変数に格納されます。

割引価格を表示する

割引価格を表示するには、製品ページを更新する必要があります。 次の手順を実行します :

1. <td>@product.Price</td>を次のコードに置き換えます。

   <td>
     @if (saleOn) {
       <strike>@(product.Price)</strike><br>
       @((product.Price * discountPercentage).ToString("#.##"))
     } else {
       @product.Price
     }
   </td>
   

   上記のコードでは、季節販売が有効になっているかどうかを確認します。 有効になっている場合は、元の価格が取り消し線付きで表示され、その下に割引価格が表示されます。 季節販売が有効になっていない場合は、元の価格が表示されます。

アプリをビルドする

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

   dotnet publish /p:PublishProfile=DefaultContainer 
   

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

   docker compose up
   

価格割引機能をテストする

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

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

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

機能フラグが季節販売を制御することをテストするには、次の手順を実行します。

1. Azure portal で、プレフィックスに eshop-app-features が付いた Azure App Configuration リソースに移動します。

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

3. この機能をオフにするには、SeasonalDiscount トグルを無効にします。

   

4. ブラウザーで、アプリケーションに戻ります。

5. [ホーム] ページを選択し、[製品] ページを選択します。

   

キャッシュがクリアされるまでに最大 30 秒かかることがあります。 販売バナーがまだ表示されている場合は、数秒待ってからページを再び更新します。