練習 - 實作功能旗標來控制 ASP.NET Core 應用程式功能

  • 12 分鐘

在此練習中，可實作功能旗標來切換應用程式的季節性銷售橫幅。 功能旗標可讓您切換功能可用性，而無需重新部署應用程式。

您將使用 .NET 功能旗標程式庫中的 [功能管理]。 此程式庫能提供協助程式以在應用程式中實作功能旗標。 此程式庫支援簡單的使用案例 (例如條件陳述式) 與更進階的案例 (例如有條件地新增路由或動作篩選)。 此外，其也支援功能篩選，此功能可讓您根據特定參數啟用功能。 這類參數包括窗口時間、百分比，或是使用者子集。

在本單元中，您將會：

  • 建立 Azure 應用程式組態執行個體。
  • 將功能旗標新增到應用程式組態存放區。
  • 將應用程式連線到應用程式組態存放區。
  • 修改應用程式以使用功能旗標。
  • 變更產品頁面以顯示銷售橫幅。
  • 建置並測試應用程式。

開啟開發環境

您可以選擇使用裝載本練習的 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 中執行開發容器。
  2. 確定 Docker 是執行狀態。
  3. 在新的 Visual Studio Code 視窗中，開啟複製存放庫的資料夾
  4. 按下 Ctrl+Shift+P，以開啟命令選擇區。
  5. 搜尋：>開發容器：重建並在容器中重新開啟
  6. 從下拉式清單中選取 eShopLite - dotnet-feature-flags。 Visual Studio Code 會在本機上建立您的開發容器。

建立應用程式組態執行個體

完成下列步驟以在 Azure 訂用帳戶中建立應用程式組態執行個體：

  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 命令來建立應用程式組態執行個體：

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

    您需要將 [位置] 變更為您附近的 Azure 區域，例如 [eastus] (美國東部)。 如果您想要資源群組或應用程式組態有不同名稱，請變更上述值。

  5. 執行下列命令，以建立 Azure 資源群組:

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

  6. 執行下列命令來建立應用程式組態執行個體：

    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. 執行此命令來擷取應用程式組態執行個體的連接字串：

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

    具有 Endpoint= 前置詞的此字串代表應用程式組態存放區的連接字串。

  8. 複製連接字串。 您很快就會加以使用。

儲存應用程式組態連接字串

您現在可將應用程式組態連接字串新增至應用程式。 完成下列步驟：

  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 應用程式組態連接字串包含純文字祕密。 在真實世界應用程式中，請考慮將應用程式組態與 Azure Key Vault 整合，以取得安全的祕密儲存體。 Key Vault 已超出此課程模組的範圍，但其指導方針可以在教學課程：在 ASP.NET Core 應用程式中使用 Key Vault 參考中找到。

將功能旗標新增到應用程式組態存放區

在 Azure 應用程式組態中，建立機碼值組並使系統將其視為功能旗標。 完成下列步驟：

  1. 在另一個瀏覽器索引標籤中，使用與 Azure CLI 相同的帳戶和目錄登入 Azure 入口網站。

  2. 使用搜尋方塊來尋找並開啟具有 eshop-app-features 前置詞的應用程式組態資源。

    Azure 入口網站搜尋結果的螢幕擷取畫面，其中顯示具有 'eshop-app-features' 前置詞的應用程式組態資源。

  3. 在 [作業] 區段中，選取 [功能管理員]。

  4. 在上層功能表中，選取 [+ 建立]。

  5. 選取 [啟用功能旗標] 核取方塊。

  6. 在 [功能旗標名稱] 文字輸入框中，輸入 SeasonalDiscount。

  7. 選取套用。

    新增功能旗標的螢幕擷取畫面。

    在功能旗標已存在於應用程式組態存放區中之後，Store 專案需要一些變更才能加以讀取。

檢閱程式碼

檢閱 IDE 中總管窗格中的目錄。 請注意，有 DataEntities、Products 和 Store 這三個專案。 Store 專案是 Blazor 應用程式。 Products 專案是包含產品服務的 .NET Standard 程式庫。 DataEntities 專案是包含產品模型的 .NET Standard 程式庫。

將應用程式連線到應用程式組態存放區

若要在 ASP.NET Core 應用程式中存取應用程式組態存放區的值，便需要應用程式組態的設定提供者。

將下列變更套用到您的 Store 專案：

  1. 在終端視窗中，瀏覽至 [Microsoft Store] 資料夾：

    cd dotnet-feature-flags/Store

  2. 執行下列命令來安裝包含應用程式組態服務之 .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 方法會向應用程式組態存放區進行驗證。 您應該還記得，連接字串會以環境變數 ConnectionStrings:AppConfig 的形式傳遞。
    • UseFeatureFlags 方法可讓功能管理程式庫從應用程式組態存放區讀取功能旗標。
    • 這兩個 builder.Services 呼叫會向應用程式的相依性插入容器註冊功能管理程式庫的服務。

  6. 在檔案底部 (// 新增應用程式組態中介軟體 的下方) 新增此程式碼：

    app.UseAzureAppConfiguration();

    上述程式碼會將應用程式組態中介軟體新增到要求管線。 中介軟體會對每個連入要求，針對功能管理參數觸發重新整理作業。 接著，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

測試功能旗標

若要確認功能旗標在 codespace 中如預期般運作，請完成下列步驟：

  1. 請切換至 [連接埠] 索引標籤，然後在 [前端] 連接埠的本機位址右側，選取地球圖示。 瀏覽器會在首頁開啟新的索引標籤。
  2. 選取產品。

如果您在本機使用 Visual Studio Code，請開啟 http://localhost:32000/products。

顯示產品頁面上銷售警示的螢幕擷取畫面。

在 Azure 入口網站中，您可以啟用和停用功能旗標，並重新整理產品頁面，以查看旗標的運作情形。