練習 - 實作功能旗標來控制 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

    您必須將 LOCATION 變更為您附近的 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 應用程式。 符合 .NET Standard 的 Products 專案是一個包含產品服務的程式庫。 專案 DataEntities 是包含產品模型的 .NET Standard 連結庫。

將您的應用程式連線至應用程式組態存放區

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

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

  1. 在終端機視窗中，流覽至 [市集] 資料夾：

    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. 在 // Add the AddAzureAppConfiguration code 批註之下新增此程序代碼。

    // 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

測試功能旗標

若要確認功能旗標在程式代碼空間中如預期般運作，請完成下列步驟：

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

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

顯示產品頁面上銷售警示的螢幕快照。

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