快速入門：為 Aspire 應用程式新增功能旗標

在這個快速入門中，你可以在 Azure 應用程式組態建立一個功能旗標，並用它來動態控制 Aspire 應用程式中新網頁的可用性，而無需重新啟動或重新部署該應用程式。

功能管理支援會擴充應用程式設定中的動態設定功能。這個快速入門的範例是建立在動態設定教學中介紹的 Aspire 應用程式之上。在繼續之前，先完成快速入門和教學，了解如何建立一個有動態設定的 Aspire 應用程式。

先決條件

請依照文件建立具有動態配置的 Aspire 解決方案。

建立功能旗標

在應用程式設定商店（在前置條件步驟中建立）新增一個名為 Beta 的功能標誌，並保留標籤和描述的預設值。如需如何使用 Azure 入口網站或 CLI 將功能旗標新增至存放區的詳細資訊，請移至建立功能旗標。

透過應用程式設定模擬器的 UI 加入以下的鍵值。

Key	內容類型	價值觀
.appconfig.featureflag/Beta	application/vnd.microsoft.appconfig.ff+json;charset=UTF-8	{“id”：“Beta”，“enabled”：false}

功能標誌是定義 Microsoft 功能標誌的特殊鍵值。配置提供者會根據特定內容類型和金鑰前綴來識別功能旗標。功能旗標的值是遵循 Microsoft Feature Flag schema 的 JSON 物件。

功能標記內容類型： application/vnd.microsoft.appconfig.ff+json;charset=utf-8
功能旗標鍵前綴： .appconfig.featureflag/

使用功能旗標

請前往 Web 你在先決條件步驟中建立的專案目錄。執行以下指令來新增 Microsoft.FeatureManagement NuGet 套件。
```
dotnet add package Microsoft.FeatureManagement
```
打開Program.cs，然後在UseFeatureFlags呼叫中新增對AddAzureAppConfiguration方法的呼叫。您可以使用 Microsoft Entra ID (建議) 或連接字串連線至應用程式組態。下列代碼段示範如何使用 Microsoft Entra ID。
```
builder.AddAzureAppConfiguration(
    "appconfiguration",
    configureOptions: options =>
    {
        // Load all keys that start with `TestApp:` and have no label.
        options.Select("TestApp:*", LabelFilter.Null);
        // Reload configuration if any key-values have changed.
        options.ConfigureRefresh(refreshOptions =>
            refreshOptions.RegisterAll());
        // Load all feature flags with no label
        options.UseFeatureFlags();
    });
```
小提示

當未傳遞參數至 UseFeatureFlags 方法時，它會在你的應用程式組態儲存區載入所有但沒有標籤的功能旗標。功能旗標的預設重新整理的間隔是 30 秒。您可以透過 FeatureFlagOptions 參數自訂此行為。例如，下列程式碼片段只會載入「機碼名稱」中以 TestApp: 開頭，且標籤為 dev 的功能旗標。程式碼也會將重新整理的間隔時間變更為 5 分鐘。請注意，此重新整理的間隔時間與一般的索引鍵值不同。
```
options.UseFeatureFlags(featureFlagOptions =>
{
    featureFlagOptions.Select("TestApp:*", "dev");
    featureFlagOptions.SetRefreshInterval(TimeSpan.FromMinutes(5));
});
```
欲了解更多關於 Aspire 用戶端整合中功能旗標的資訊，請參閱 Connect to Azure 應用程式組態。

透過呼叫 AddFeatureManagement，將功能管理加入您的應用程式的服務集合中。

請用以下程式碼更新 Program.cs 。

// Existing code in Program.cs
// ... ...

// Add Azure App Configuration middleware to the container of services.
builder.Services.AddAzureAppConfiguration();

// Add feature management to the container of services.
builder.Services.AddFeatureManagement();

var app = builder.Build();

// The rest of existing code in program.cs
// ... ...

如果檔案不存在，請新增 using Microsoft.FeatureManagement; 在檔案頂端。

在 Components/Pages 目錄下新增一個名為 Beta.razor 的 Razor 頁面。

@page "/beta"

@inject IFeatureManager FeatureManager

@if (isBetaEnabled)
{
    <h1>This is the beta website.</h1>
} 
else
{
    <h1>Not found.</h1>
}

@code {
    private bool isBetaEnabled;

    protected override async Task OnInitializedAsync()
    {
        isBetaEnabled = await FeatureManager.IsEnabledAsync("Beta");
    }
}

打開 _Imports.razor，並匯入功能管理命名空間。
```
@using Microsoft.FeatureManagement
```

在 Components/Layout 目錄中開啟 NavMenu.razor。

將 IVariantFeatureManager 注入檔案的頂端。

@inject IVariantFeatureManager FeatureManager

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">AspireApp</a>
    </div>
</div>

加入下列程式碼。

// Existing code
// ... ...
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="nav flex-column">
        // Existing code
        // ... ...

        @if (isBetaEnabled)
        {
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="beta">
                    <span class="bi bi-list-nested" aria-hidden="true"></span> Beta
                </NavLink>
            </div>
        }
    </nav>
</div>

@code {
    private bool isBetaEnabled;

    protected override async Task OnInitializedAsync()
    {
        isBetaEnabled = await FeatureManager.IsEnabledAsync("Beta");
    }
}

在本機執行應用程式

在方案根目錄中，執行 aspire run。進入 Aspire 儀表板並開啟網頁應用程式。
在 Azure 入口網站，前往你的應用程式組態商店的功能 管理器 ，找到 Beta 功能標誌。選取 [啟用] 下的核取方塊，以啟用旗標。
重新整理頁面幾次。當刷新間隔時間窗口過去後，頁面會顯示更新內容。
點擊 Beta 按鈕。它會帶你到你動態啟用的Beta頁面。

在本機執行應用程式

在方案根目錄中，執行 aspire run。進入 Aspire 儀表板並開啟網頁應用程式。
進入模擬器，編輯功能旗標的值來啟用它。

Key 價值觀

.appconfig.featureflag/Beta {“id”：“Beta”，“enabled”：true}
重新整理頁面幾次。當刷新間隔時間窗口過去後，頁面會顯示更新內容。
點擊 Beta 按鈕。它會帶你到你動態啟用的Beta頁面。