Øvelse – Implementer et funktionsflag for at styre ASP.NET Core-appfunktioner

  • 12 minutter

I denne øvelse skal du implementere et funktionsflag for at skifte mellem et sæsonbestemt salgsbanner for dit program. Funktionsflag giver dig mulighed for at skifte funktionstilgængelighed uden at geninstallere din app.

Du skal bruge funktionsstyring i .NET-funktionsflagbiblioteket. Dette bibliotek giver hjælpere mulighed for at implementere funktionsflag i din app. Biblioteket understøtter simple use cases, f.eks. betingede sætninger, til mere avancerede scenarier, f.eks. betinget tilføjelse af ruter eller handlingsfiltre. Desuden understøtter den funktionsfiltre, som giver dig mulighed for at aktivere funktioner, der er baseret på bestemte parametre. Eksempler på sådanne parametre omfatter et vinduestidspunkt, en procentdel eller et undersæt af brugere.

I dette undermodul skal du:

  • Opret en forekomst af Azure App Configuration.
  • Føj et funktionsflag til App Configuration Store.
  • Opret forbindelse mellem din app og App Configuration Store.
  • Ændre programmet for at bruge funktionsflaget.
  • Skift produktsiden for at få vist et salgsbanner.
  • Byg og test appen.

Åbn udviklingsmiljøet

Du kan vælge at bruge et GitHub-kodeområde, der er vært for øvelsen, eller fuldføre øvelsen lokalt i Visual Studio Code.

Hvis du vil bruge et kodeområde, skal du oprette et forudkonfigureret GitHub-kodeområde med dette link til oprettelse af kodeområde.

GitHub tager flere minutter at oprette og konfigurere kodeområdet. Når den er færdig, kan du se kodefilerne til øvelsen. Den kode, der bruges til resten af dette modul, findes i mappen /dotnet-feature-flags.

Hvis du vil bruge Visual Studio Code, skal du klone det https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative lager til din lokale computer. Derpå:

  1. Installér alle systemtilladelser, for at køre Dev Container i Visual Studio Code.
  2. Kontrollér, at Docker kører.
  3. Åbn mappen med det klonede lager i et nyt Visual Studio Code-vindue
  4. Tryk Ctrl+Skift+P- for at åbne kommandopaletten.
  5. Søg efter: >udviklerobjektbeholdere: Genopbyg og genåbn i objektbeholder
  6. Vælg eShopLite – dotnet-feature-flags på rullelisten. Visual Studio Code opretter din udviklingsobjektbeholder lokalt.

Opret en forekomst af appkonfiguration

Udfør følgende trin for at oprette en forekomst af appkonfiguration i dit Azure-abonnement:

  1. Log på Kommandolinjegrænsefladen i Azure i den nye terminalrude.

    az login --use-device-code

  2. Få vist dit valgte Azure-abonnement.

    az account show -o table

    Hvis det forkerte abonnement er valgt, skal du vælge det korrekte ved hjælp af kommandoen az-konto, der er angivet.

  3. Kør følgende Azure CLI-kommando for at få vist en liste over Azure-områder og det navn, der er knyttet til det:

    az account list-locations -o table

    Find et område, der er tættest på dig, og brug det i næste trin til at erstatte [Closest Azure region]

  4. Kør følgende Azure CLI-kommandoer for at oprette en forekomst af appkonfiguration:

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

    Du skal ændre LOCATION til et Azure-område tæt på dig, f.eks. eastus. Hvis du vil have et andet navn til din ressourcegruppe eller appkonfiguration, skal du ændre værdierne ovenfor.

  5. Kør følgende kommando for at oprette Azure-ressourcegruppen:

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

  6. Kør følgende kommando for at oprette en forekomst af appkonfiguration:

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

    Der vises en variation af følgende output:

    {
  "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 denne kommando for at hente forbindelsesstrengen for appkonfigurationsforekomsten:

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

    Denne streng med præfikset Endpoint= repræsenterer forbindelsesstrengen for App Configuration Store.

  8. Kopiér forbindelsesstrengen. Du skal bruge den om et øjeblik.

Gem forbindelsesstrengen til appkonfiguration

Du skal nu føje forbindelsesstrengen appkonfiguration til programmet. Udfør følgende trin:

  1. Åbn filen /dotnet-feature-flags/docker-compose.yml.

  2. Tilføj en ny miljøvariabel på linje 13.

    - ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

    docker-compose.yml ligner følgende YAML:

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

Den foregående linje repræsenterer et nøgleværdipar, hvor ConnectionStrings:AppConfig er et miljøvariabelnavn. I det Store projekt læser konfigurationsprovideren for miljøvariabler værdien.

Drikkepenge

Din forbindelsesstreng til Konfiguration af Azure App indeholder en almindelig teksthemmelighed. I apps i den virkelige verden kan du overveje at integrere appkonfiguration med Azure Key Vault for at sikre opbevaring af hemmeligheder. Key Vault er ikke omfattet af dette modul, men du kan finde vejledning i Selvstudium: Brug Key Vault-referencer i en ASP.NET Core-app.

Føj funktionsflaget til App Configuration Store

I Konfiguration af Azure App skal du oprette og aktivere, at et nøgleværdipar behandles som et funktionsflag. Udfør følgende trin:

  1. På en anden browserfane skal du logge på Azure Portal med den samme konto og mappe som Azure CLI.

  2. Brug søgefeltet til at finde og åbne ressourcen appkonfiguration med præfikset eshop-app-features.

    Skærmbillede af søgeresultaterne på Azure Portal, der viser ressourcen appkonfiguration med præfikset

  3. Vælg Funktionsstyring i afsnittet handlinger.

  4. Vælg + Opreti den øverste menu.

  5. Markér afkrydsningsfeltet Aktivér funktionsflag.

  6. Skriv SeasonalDiscounti tekstfeltet featureflag.

  7. Vælg Anvend.

    Et skærmbillede af flaget for den nye tilføjede funktion.

    Nu, hvor funktionsflaget findes i App Configuration Store, kræver det Store projekt nogle ændringer for at læse det.

Gennemse kode

Gennemse mapperne i ruden Stifinder i IDE. Bemærk, at der er tre projekter DataEntities, Productsog Store. Det Store projekt er Blazor-appen. Projektet Products er et .NET Standard-bibliotek, der indeholder produkttjenesten. Projektet DataEntities er et .NET Standard-bibliotek, der indeholder produktmodellen.

Opret forbindelse mellem din app og App Configuration Store

Hvis du vil have adgang til værdier fra App Configuration Store i en ASP.NET Core-app, skal konfigurationsprovideren for App Configuration bruges.

Anvend følgende ændringer på dit Store projekt:

  1. I terminalvinduet skal du navigere til mappen Store:

    cd dotnet-feature-flags/Store

  2. Kør følgende kommando for at installere en NuGet-pakke, der indeholder .NET-konfigurationsprovideren for appkonfigurationstjenesten:

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

  3. Åbn filen Store/Program.cs.

  4. Tilføj de nye pakkereferencer øverst i filen:

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

  5. Tilføj denne kode under // Tilføj kommentaren AddAzureAppConfiguration-koden.

    // 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 det foregående kodestykke:

    • Metoden Connect godkendes i App Configuration Store. Husk, at forbindelsesstrengen overføres som en miljøvariabel ConnectionStrings:AppConfig.
    • Metoden UseFeatureFlags gør det muligt for biblioteket Funktionsstyring at læse funktionsflag fra App Configuration Store.
    • De to builder.Services kald registrerer biblioteket funktionsstyrings tjenester med appens objektbeholder til afhængighedsinjektion.

  6. Nederst i filen under // Tilføj middleware-til appkonfiguration skal du tilføje denne kode:

    app.UseAzureAppConfiguration();

    Den foregående kode føjer middleware til appkonfiguration til anmodningspipelinen. Middleware udløser en opdateringshandling for parametrene for funktionsstyring for hver indgående anmodning. Derefter er det op til den AzureAppConfiguration udbyder at beslutte, hvornår der rent faktisk skal oprettes forbindelse til butikken for at hente værdierne, baseret på opdateringsindstillinger.

Aktivér et salgsbanner

Din app kan nu læse funktionsflaget, men produktsiden skal opdateres for at vise, at et salg er på. Udfør følgende trin:

  1. Åbn filen Store/Components/Pages/Products.razor.

  2. Tilføj følgende kode øverst i filen:

    @using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager

    Den foregående kode importerer navneområderne for funktionsstyringsbiblioteket og indsætter den IFeatureManager grænseflade i komponenten.

  3. I afsnittet @code skal du tilføje følgende variabel for at gemme tilstanden for funktionsflaget:

    private bool saleOn = false;

  4. Tilføj følgende kode i metoden OnInitializedAsync:

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

    Metoden skal ligne følgende kode:

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

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

  5. Tilføj følgende kode under kommentaren <!-- Add a sales alert for customers --> på linje 26:

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

    Den foregående kode viser en salgsbesked, hvis funktionsflaget er aktiveret.

Byg appen

  1. Sørg for, at du har gemt alle dine ændringer og er i dotnet-feature-flags mappe. Kør følgende kommando i terminalen:

    dotnet publish /p:PublishProfile=DefaultContainer

  2. Kør appen ved hjælp af docker:

    docker compose up

Test funktionsflaget

Hvis du vil kontrollere, at funktionsflaget fungerer som forventet i et kodeområde, skal du udføre følgende trin:

  1. Skift til fanen PORTE, og vælg derefter globusikonet til højre for den Front End port. Browseren åbner en ny fane på startsiden.
  2. Vælg Products.

Hvis du bruger Visual Studio Code lokalt, skal du åbne http://localhost:32000/products.

Et skærmbillede, der viser salgsbeskeden på produktsiden.

På Azure Portal kan du aktivere og deaktivere funktionsflaget og opdatere produktsiden for at se flaget i aktion.