Øvelse – Implementere et funksjonsflagg for å kontrollere ASP.NET Core-appfunksjoner

  • 12 minutter

I denne øvelsen implementerer du et funksjonsflagg for å veksle mellom et sesongsalgsbanner for programmet. Med funksjonsflagg kan du veksle funksjonstilgjengelighet uten å distribuere appen på nytt.

Du bruker funksjonsbehandling i .NET-funksjonsflaggbiblioteket. Dette biblioteket gir hjelpere til å implementere funksjonsflagg i appen. Biblioteket støtter enkle brukstilfeller som betingede setninger i mer avanserte scenarioer, for eksempel betinget å legge til ruter eller handlingsfiltre. I tillegg støtter den funksjonsfiltre, som lar deg aktivere funksjoner basert på bestemte parametere. Eksempler på slike parametere inkluderer en vindustid, prosent eller et delsett av brukere.

I denne enheten vil du:

  • Opprett en Azure App Configuration-forekomst.
  • Legg til et funksjonsflagg i App Configuration Store.
  • Koble appen til App Configuration Store.
  • Endre programmet til å bruke funksjonsflagget.
  • Endre produktsiden for å vise et salgsbanner.
  • Bygg og test appen.

Åpne utviklingsmiljøet

Du kan velge å bruke et GitHub-kodeområde som er vert for øvelsen, eller fullføre øvelsen lokalt i Visual Studio Code.

Hvis du vil bruke et kodeområde, oppretter du et forhåndskonfigurert GitHub-kodeområde med denne koblingen for oppretting av kodeområde.

GitHub bruker flere minutter på å opprette og konfigurere kodeområdet. Når den er ferdig, ser du kodefilene for øvelsen. Koden som brukes for resten av denne modulen, er i /dotnet-feature-flags directory.

Hvis du vil bruke Visual Studio Code, kloner du https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative-repositoriet til den lokale maskinen. Da:

  1. Installer eventuelle systemrekvisiringer for å kjøre Utviklerbeholder i Visual Studio Code.
  2. Sørg for at Docker kjører.
  3. Åpne mappen til det klonede repositoriet i et nytt Visual Studio Code-vindu
  4. Trykk CTRL+SKIFT+P for å åpne kommandopaletten.
  5. Søk: >utviklerbeholdere: Gjenoppbygge og åpne på nytt i beholder
  6. Velg eShopLite – dotnet-feature-flags fra rullegardinlisten. Visual Studio Code oppretter utviklingsbeholderen lokalt.

Opprette en appkonfigurasjonsforekomst

Fullfør følgende fremgangsmåte for å opprette en appkonfigurasjonsforekomst i Azure-abonnementet:

  1. Logg på Azure CLI i den nye terminalruten.

    az login --use-device-code

  2. Vis det valgte Azure-abonnementet.

    az account show -o table

    Hvis feil abonnement er valgt, velger du det riktige ved hjelp av az-kontosettet kommando.

  3. Kjør følgende Azure CLI-kommando for å få en liste over Azure-områder og navnet som er knyttet til den:

    az account list-locations -o table

    Finn et område nærmest deg, og bruk det i neste trinn for å erstatte [Closest Azure region]

  4. Kjør følgende Azure CLI-kommandoer for å opprette en appkonfigurasjonsforekomst:

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

    Du må endre LOCATION til et Azure-område nær deg, for eksempel eastus. Hvis du vil at et annet navn for ressursgruppen eller appkonfigurasjonen skal endre verdiene ovenfor.

  5. Kjør følgende kommando for å opprette Azure Resource Group:

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

  6. Kjør følgende kommando for å opprette en appkonfigurasjonsforekomst:

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

    En variasjon av følgende utdata vises:

    {
  "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. Kjør denne kommandoen for å hente tilkoblingsstrengen for appkonfigurasjonsforekomsten:

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

    Denne strengen som er prefiks med Endpoint= representerer tilkoblingsstrengen for App Configuration Store.

  8. Kopier tilkoblingsstrengen. Du bruker den om et øyeblikk.

Lagre tilkoblingsstrengen for appkonfigurasjon

Nå legger du til tilkoblingsstrengen for appkonfigurasjon i programmet. Fullfør følgende fremgangsmåte:

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

  2. Legg til en ny miljøvariabel på linje 13.

    - ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

    Den docker-compose.yml vil ligne på følgende YAML:

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

Den forrige linjen representerer et nøkkelverdipar der ConnectionStrings:AppConfig er et miljøvariabelnavn. I Store prosjektet leser konfigurasjonsleverandøren for miljøvariabler verdien.

Tips

Tilkoblingsstrengen for Azure App Configuration inneholder en ren teksthemmelighet. I virkelige apper kan du vurdere å integrere appkonfigurasjon med Azure Key Vault for sikker lagring av hemmeligheter. Key Vault er utenfor området for denne modulen, men veiledning finnes på Opplæring: Bruk Key Vault-referanser i en ASP.NET Core-app.

Legg til funksjonsflagget i App Configuration Store

Opprett og aktiver et nøkkelverdipar i Azure App Configuration for å behandles som et funksjonsflagg. Fullfør følgende fremgangsmåte:

  1. Logg på Azure-portalen i en annen nettleserfane, med samme konto og katalog som Azure CLI.

  2. Bruk søkeboksen til å finne og åpne ressursprefikset for appkonfigurasjon med eshop-app-features.

    Skjermbilde av søkeresultatene i Azure-portalen som viser appkonfigurasjonsressursen som er prefikset med eshop-app-funksjoner.

  3. Velg Funksjonsbehandlingunder Operasjoner .

  4. Velg + Oppretti den øverste menyen.

  5. Merk av for Aktivere funksjonsflagg.

  6. Skriv inn SeasonalDiscounti tekstboksen Funksjonsflagg .

  7. Velg Bruk.

    Et skjermbilde av det nye funksjonsflagget som er lagt til.

    Nå som funksjonsflagget finnes i App Configuration Store, krever Store-prosjektet noen endringer for å lese det.

Se gjennom kode

Se gjennom katalogene i explorer-ruten i IDE. Vær oppmerksom på at det er tre prosjekter DataEntities, Productsog Store. Det Store prosjektet er Blazor-appen. Prosjektet Products er et .NET Standard-bibliotek som inneholder produkttjenesten. Prosjektet DataEntities er et .NET Standard-bibliotek som inneholder produktmodellen.

Koble appen til App Configuration Store

Hvis du vil ha tilgang til verdier fra App Configuration Store i en ASP.NET Core-app, er konfigurasjonsleverandøren for appkonfigurasjon nødvendig.

Bruk følgende endringer på Store prosjektet:

  1. Gå til Store-mappen i terminalvinduet:

    cd dotnet-feature-flags/Store

  2. Kjør følgende kommando for å installere en NuGet-pakke som inneholder .NET-konfigurasjonsleverandøren for App Configuration-tjenesten:

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

  3. Åpne filen Store/Program.cs.

  4. Legg til de nye pakkereferansene øverst i filen:

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

  5. Legg til denne koden under // Legg til AddAzureAppConfiguration-koden kommentar.

    // 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 den forrige kodesnutten:

    • Metoden Connect godkjennes til App Configuration Store. Husk at tilkoblingsstrengen sendes som en miljøvariabel ConnectionStrings:AppConfig.
    • Metoden UseFeatureFlags gjør det mulig for funksjonsbehandlingsbiblioteket å lese funksjonsflagg fra App Configuration Store.
    • De to builder.Services anropene registrerer funksjonsbehandlingsbibliotekets tjenester med appens avhengighetsinjeksjonsbeholder.

  6. Legg til denne koden nederst i filen nedenfor // Legg til mellomvare for appkonfigurasjon:

    app.UseAzureAppConfiguration();

    Den forrige koden legger til mellomvare for appkonfigurasjon i forespørselssamlebåndet. Mellomvaren utløser en oppdateringsoperasjon for funksjonsbehandlingsparameterne for hver innkommende forespørsel. Deretter er det opp til AzureAppConfiguration leverandøren å bestemme, basert på oppdateringsinnstillinger, når du faktisk skal koble til butikken for å få verdiene.

Aktivere et salgsbanner

Appen kan nå lese funksjonsflagget, men produktsiden må oppdateres for å vise at et salg er aktivert. Fullfør følgende fremgangsmåte:

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

  2. Legg til følgende kode øverst i filen:

    @using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager

    Den foregående koden importerer funksjonsbehandlingsbibliotekets navneområder og setter inn IFeatureManager-grensesnittet i komponenten.

  3. Legg til følgende variabel i @code-delen for å lagre tilstanden til funksjonsflagget:

    private bool saleOn = false;

  4. Legg til følgende kode i OnInitializedAsync-metoden:

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

    Metoden skal se ut som 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. Legg til følgende kode under <!-- Add a sales alert for customers --> kommentar 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 koden viser et salgsvarsel hvis funksjonsflagget er aktivert.

Bygg appen

  1. Sørg for at du har lagret alle endringene, og er i dotnet-feature-flags katalog. Kjør følgende kommando i terminalen:

    dotnet publish /p:PublishProfile=DefaultContainer

  2. Kjør appen ved hjelp av docker:

    docker compose up

Test funksjonsflagget

Hvis du vil bekrefte at funksjonsflagget fungerer som forventet i et kodeområde, gjør du følgende:

  1. Bytt til fanen PORTER, og velg deretter globusikonet til høyre for den lokale adressen for Front End port. Nettleseren åpner en ny fane på hjemmesiden.
  2. Velg Produkter.

Hvis du bruker Visual Studio Code lokalt, åpner du http://localhost:32000/products.

Et skjermbilde som viser salgsvarselet på produktsiden.

I Azure-portalen kan du aktivere og deaktivere funksjonsflagget og oppdatere produktsiden for å se flagget i aksjon.