Övning – Implementera en funktionsflagga för att styra ASP.NET Core-appfunktioner

  • 12 minuter

I den här övningen implementerar du en funktionsflagga för att aktivera eller avaktivera en banderoll för säsongsförsäljning för din applikation. Med funktionsflaggor kan du växla funktionstillgänglighet utan att distribuera om din app.

Du använder Funktionshantering i .NET-funktionsflaggabiblioteket. Det här biblioteket innehåller hjälp för att implementera funktionsflaggor i din app. Biblioteket stöder enkla användningsfall som villkorssatser till mer avancerade scenarier som att villkorligt lägga till vägar eller åtgärdsfilter. Dessutom har den stöd för funktionsfilter som gör att du kan aktivera funktioner baserat på specifika parametrar. Exempel på sådana parametrar är en tidsperiod, procentandelar eller en delmängd av användarna.

I den här lektionen kommer du att:

  • Skapa en Azure App Configuration-instans.
  • Lägg till en funktionsflagga i App Configuration Store.
  • Anslut din app till App Configuration Store.
  • Ändra programmet så att det använder funktionsflaggan.
  • Ändra produktsidan så att en försäljningsbanderoll visas.
  • Skapa och testa appen.

Öppna utvecklingsmiljön

Du kan välja att använda ett GitHub-kodområde som är värd för övningen eller slutföra övningen lokalt i Visual Studio Code.

Om du vill använda ett kodområdeskapar du ett förkonfigurerat GitHub Codespace med den här länken för att skapa Codespace.

GitHub tar flera minuter att skapa och konfigurera kodområdet. När den är klar visas kodfilerna för övningen. Koden som används för resten av den här modulen finns i katalogen /dotnet-feature-flags.

Om du vill använda Visual Studio Code-klonar du https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative lagringsplatsen till den lokala datorn. Då:

  1. Installera alla systemkrav för att köra Dev Container i Visual Studio Code.
  2. Kontrollera att Docker körs.
  3. Öppna mappen för den klonade lagringsplatsen i ett nytt Visual Studio Code-fönster
  4. Tryck på Ctrl+Skift+P för att öppna kommandopaletten.
  5. Sök: >Dev Containers: Återställ och öppna på nytt i Container
  6. Välj eShopLite – dotnet-feature-flags i listrutan. Visual Studio Code skapar din utvecklingscontainer lokalt.

Skapa en appkonfigurationsinstans

Utför följande steg för att skapa en appkonfigurationsinstans i din Azure-prenumeration:

  1. Logga in på Azure CLI i det nya terminalfönstret.

    az login --use-device-code

  2. Visa din valda Azure-prenumeration.

    az account show -o table

    Om fel prenumeration har valts väljer du rätt med kommandot az account set.

  3. Kör följande Azure CLI-kommando för att hämta en lista över Azure-regioner och namnet som är associerat med det:

    az account list-locations -o table

    Leta upp en region närmast dig och använd den i nästa steg för att ersätta [Closest Azure region]

  4. Kör följande Azure CLI-kommandon för att skapa en App Configuration-instans:

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

    Du måste ändra LOCATION till en Azure-region nära dig, till exempel eastus. Om du vill ha ett annat namn för resursgruppen eller appkonfigurationen ändrar du värdena ovan.

  5. Kör följande kommando för att skapa Azure-resursgruppen:

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

  6. Kör följande kommando för att skapa en appkonfigurationsinstans:

    az appconfig create --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --location $LOCATION --sku Free

    En variant av följande utdata visas:

    {
  "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. Kör det här kommandot för att hämta anslutningssträngen för appkonfigurationsinstansen:

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

    Den här strängen med Endpoint= representerar App Configuration Store-anslutningssträngen.

  8. Kopiera anslutningssträngen. Du kommer att använda den om en stund.

Lagra anslutningssträngen för applikationskonfigurationen

Nu ska du lägga till anslutningssträngen för App Configuration i programmet. Slutför följande steg:

  1. Öppna filen /dotnet-feature-flags/docker-compose.yml.

  2. Lägg till en ny miljövariabel på rad 13.

    - ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

    docker-compose.yml liknar följande YAML:

    environment: 
  - ProductEndpoint=http://backend:8080
  - ConnectionStrings:AppConfig=Endpoint=https://eshop-app-features1168054702.azconfig.io;Id=<ID>;Secret=<Secret value>

Föregående rad representerar ett nyckel/värde-par, där ConnectionStrings:AppConfig är ett miljövariabelnamn. I det Store projektet läser konfigurationsprovidern för miljövariabler sitt värde.

Dricks

Anslutningssträngen för Azure App Configuration innehåller en oformaterad hemlighet. I verkliga appar bör du överväga att integrera App Configuration med Azure Key Vault för säker lagring av hemligheter. Key Vault ligger utanför omfånget för den här modulen, men du hittar vägledning i Självstudie: Använda Key Vault-referenser i en ASP.NET Core-app.

Lägg till funktionsflaggan i App Configuration Store

I Azure App Configuration skapar och aktiverar du ett nyckel/värde-par som ska behandlas som en funktionsflagga. Slutför följande steg:

  1. På en annan webbläsarflik loggar du in på Azure-portalen med samma konto och katalog som Azure CLI.

  2. Använd sökrutan för att hitta och öppna appkonfigurationsresursen med prefixet eshop-app-features.

    Skärmbild av Sökresultat i Azure-portalen som visar appkonfigurationsresursen med prefixet

  3. I avsnittet Åtgärder väljer du Funktionshanteraren.

  4. I den översta menyn väljer du + Skapa.

  5. Markera kryssrutan Aktivera funktionsflagga.

  6. I textrutan funktionsflaggnamn anger du SeasonalDiscount.

  7. Välj Använd.

    En skärmbild av den nya funktionsflaggan som lagts till.

    Nu när funktionsflaggan finns i App Configuration Store kräver Store-projektet vissa ändringar för att läsa den.

Granska kod

Granska katalogerna i utforskarfönstret i IDE. Observera att det finns tre projekt DataEntities, Productsoch Store. Det Store projektet är Blazor-appen. Projektet Products är ett .NET Standard-bibliotek som innehåller produkttjänsten. Projektet DataEntities är ett .NET Standard-bibliotek som innehåller produktmodellen.

Ansluta din app till App Configuration Store

För att få åtkomst till värden från App Configuration Store i en ASP.NET Core-app krävs konfigurationsprovidern för appkonfiguration.

Använd följande ändringar i ditt Store projekt:

  1. I terminalfönstret går du till mappen Store:

    cd dotnet-feature-flags/Store

  2. Kör följande kommando för att installera ett NuGet-paket som innehåller .NET-konfigurationsprovidern för App Configuration-tjänsten:

    dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
dotnet add package Microsoft.FeatureManagement.AspNetCore
dotnet add package Microsoft.Extensions.Configuration.AzureAppConfiguration

  3. Öppna filen Store/Program.cs.

  4. Lägg till de nya paketreferenserna överst i filen:

    using Microsoft.FeatureManagement;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Configuration.AzureAppConfiguration;

  5. Lägg till den här koden under kommentaren // Lägg till koden 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();

    I föregående kodfragment:

    • Metoden Connect autentiserar till App Configuration Store. Kom ihåg att anslutningssträngen skickas som en miljövariabel ConnectionStrings:AppConfig.
    • Med metoden UseFeatureFlags kan funktionshanteringsbiblioteket läsa funktionsflaggor från App Configuration Store.
    • De två builder.Services-anropen registrerar tjänsterna i funktionshanteringsbiblioteket i appens container för beroendeinjektion.

  6. Lägg till den här koden längst ned i filen // Lägg till mellanprogrammet App Configuration:

    app.UseAzureAppConfiguration();

    Föregående kod lägger till mellanprogrammet App Configuration i begärandepipelinen. Mellanprogrammet utlöser en uppdateringsåtgärd för parametrarna för funktionshantering för varje inkommande begäran. Sedan är det upp till AzureAppConfiguration providern att bestämma, baserat på uppdateringsinställningar, när den faktiskt ska ansluta till butiken för att hämta värdena.

Aktivera en banner för försäljning

Appen kan nu läsa funktionsflaggan, men produktsidan måste uppdateras för att visa att en försäljning pågår. Slutför följande steg:

  1. Öppna filen Store/Components/Pages/Products.razor.

  2. Lägg till följande kod överst i filen:

    @using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager

    Föregående kod importerar funktionshanteringsbibliotekets namnområden och matar in IFeatureManager-gränssnittet i komponenten.

  3. I avsnittet @code lägger du till följande variabel för att lagra tillståndet för funktionsflaggan:

    private bool saleOn = false;

  4. Lägg till följande kod i metoden OnInitializedAsync:

    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    Metoden bör se ut som följande kod:

    protected override async Task OnInitializedAsync()
{
    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    // Simulate asynchronous loading to demonstrate streaming rendering
    products = await ProductService.GetProducts();
}

  5. Lägg till följande kod under kommentaren <!-- Add a sales alert for customers --> på rad 26:

    <!-- Add a sales alert for customers -->
@if (saleOn)
{
<div class="alert alert-success" role="alert">
  Our sale is now on.
</div>
}

    Föregående kod visar en försäljningsavisering om funktionsflaggan är aktiverad.

Skapa appen

  1. Kontrollera att du har sparat alla ändringar och finns i katalogen dotnet-feature-flags. Kör följande kommando i terminalen:

    dotnet publish /p:PublishProfile=DefaultContainer

  2. Kör appen med docker:

    docker compose up

Testa funktionsflaggan

Kontrollera att funktionsflaggan fungerar som förväntat i ett kodområde genom att utföra följande steg:

  1. Växla till fliken PORTS och välj sedan globeikonen till höger om den lokala adressen för Front End-porten. Webbläsaren öppnar en ny flik på startsidan.
  2. Välj Produkter.

Om du använder Visual Studio Code lokalt öppnar du http://localhost:32000/products.

En skärmbild som visar försäljningsaviseringen på produktsidan.

I Azure-portalen kan du aktivera och inaktivera funktionsflaggan och uppdatera produktsidan för att se flaggan i praktiken.