Oefening: een functievlag implementeren om ASP.NET Core-app-functies te beheren

  • 12 minuten

In deze oefening implementeert u een functievlag om een banner voor seizoensgebonden verkoop in te schakelen voor uw toepassing. Met functievlagmen kunt u de beschikbaarheid van functies in-/uitschakelen zonder uw app opnieuw te implementeren.

U gebruikt Functiebeheer in de .NET-functievlagbibliotheek. Deze bibliotheek biedt helpers voor het implementeren van functievlagmen in uw app. De bibliotheek ondersteunt eenvoudige gebruiksvoorbeelden, zoals voorwaardelijke instructies, voor geavanceerdere scenario's, zoals het voorwaardelijk toevoegen van routes of actiefilters. Daarnaast ondersteunt het functiefilters, waarmee u functies kunt inschakelen op basis van specifieke parameters. Voorbeelden van dergelijke parameters zijn een venstertijd, percentages of een subset van gebruikers.

In deze eenheid gaat u het volgende doen:

  • Maak een Azure App Configuration-exemplaar.
  • Voeg een feature flag toe aan de App Configuration-opslag.
  • Verbind uw app met de App Configuration-opslag.
  • Wijzig de toepassing om de functievlag te gebruiken.
  • Wijzig de pagina producten om een verkoopbanner weer te geven.
  • Bouw en test de app.

De ontwikkelomgeving openen

U kunt ervoor kiezen om een GitHub-coderuimte te gebruiken die als host fungeert voor de oefening of om de oefening lokaal te voltooien in Visual Studio Code.

Als u een codespacewilt gebruiken, maakt u een vooraf geconfigureerde GitHub Codespace met deze koppeling voor het maken van coderuimten.

GitHub duurt enkele minuten om de codespace te maken en te configureren. Wanneer deze is voltooid, ziet u de codebestanden voor de oefening. De code die voor de rest van deze module wordt gebruikt, bevindt zich in de map /dotnet-feature-flags.

Als u Visual Studio Code-wilt gebruiken, kloont u de https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative opslagplaats naar uw lokale computer. Dan:

  1. Installeer eventuele systeemeisen om Dev Container in Visual Studio Code uit te voeren.
  2. Zorg ervoor dat Docker wordt uitgevoerd.
  3. Open in een nieuw Visual Studio Code-venster de map van de gekloonde opslagplaats
  4. Druk op Ctrl+Shift+P om het opdrachtenpalet te openen.
  5. Zoeken: >Dev Containers: Herbouwen en Opnieuw openen in Container
  6. Selecteer eShopLite - dotnet-feature-flags uit de vervolgkeuzelijst. Visual Studio Code maakt uw ontwikkelcontainer lokaal.

Een App Configuration-exemplaar maken

Voer de volgende stappen uit om een App Configuration-exemplaar te maken in uw Azure-abonnement:

  1. Meld u in het nieuwe terminalvenster aan bij de Azure CLI.

    az login --use-device-code

  2. Bekijk uw geselecteerde Azure-abonnement.

    az account show -o table

    Als het verkeerde abonnement is geselecteerd, selecteert u het juiste abonnement met behulp van de opdracht az account set.

  3. Voer de volgende Azure CLI-opdracht uit om een lijst met Azure-regio's en de bijbehorende naam op te halen:

    az account list-locations -o table

    Zoek een regio die het dichtst bij u ligt en gebruik deze in de volgende stap om [Closest Azure region] te vervangen

  4. Voer de volgende Azure CLI-opdrachten uit om een App Configuration-exemplaar te maken:

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

    U moet de LOCATION wijzigen in een Azure-regio dichtbij u, bijvoorbeeld eastus. Als u een andere naam wilt voor uw resourcegroep of app-configuratie, wijzigt u de bovenstaande waarden.

  5. Voer de volgende opdracht uit om de Azure-resourcegroep te maken:

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

  6. Voer de volgende opdracht uit om een App Configuration-exemplaar te maken:

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

    Er wordt een variant van de volgende uitvoer weergegeven:

    {
  "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. Voer deze opdracht uit om de verbindingsreeks voor het App Configuration-exemplaar op te halen:

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

    Deze tekenreeks met als voorvoegsel Endpoint= vertegenwoordigt de connection string van de App Configuration-opslag.

  8. Kopieer de verbindingsreeks. Je gebruikt het zo meteen.

De App Configuration-verbindingsreeks opslaan

U gaat nu de App Configuration-verbindingsreeks aan de toepassing toevoegen. Voer de volgende stappen uit:

  1. Open het /dotnet-feature-flags/docker-compose.yml-bestand.

  2. Voeg een nieuwe omgevingsvariabele toe op regel 13.

    - ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

    De docker-compose.yml lijkt op de volgende YAML:

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

De voorgaande regel vertegenwoordigt een sleutel-waardepaar, waarin ConnectionStrings:AppConfig de naam van een omgevingsvariabele is. In het Store-project leest de configuratieprovider voor omgevingsvariabelen de waarde.

Tip

Uw Azure App Configuration-verbindingsreeks bevat een geheim in platte tekst. In echte apps kunt u overwegen om App Configuration te integreren met Azure Key Vault voor beveiligde opslag van geheimen. Key Vault valt buiten het bereik van deze module, maar u vindt de richtlijnen in zelfstudie: Key Vault-verwijzingen gebruiken in een ASP.NET Core-app.

De functievlag toevoegen aan de App Configuration-winkel

Maak en schakel in Azure App Configuration een sleutel-waardepaar in om te worden behandeld als een functievlag. Voer de volgende stappen uit:

  1. Meld u op een ander browsertabblad aan bij de Azure Portal met hetzelfde account en dezelfde map als de Azure CLI.

  2. Gebruik het zoekvak om de App Configuration-resource te zoeken en te openen die is voorafgegaan door eshop-app-features.

    Schermopname van zoekresultaten in Azure Portal met de App Configuration-resource voorafgegaan door 'eshop-app-features'.

  3. Selecteer in de sectie OperationsFunctiebeheerder.

  4. Selecteer in het bovenste menu + Creëer.

  5. Selecteer het selectievakje functievlag inschakelen.

  6. Voer in het tekstvak functievlagnaamSeasonalDiscountin.

  7. Selecteer toepassen.

    Een schermopname van de nieuwe toegevoegde functievlag.

    Nu de functievlag bestaat in de App Configuration-opslag, vereist het Store-project enkele wijzigingen om deze uit te lezen.

Code controleren

Controleer de mappen in het deelvenster Explorer in de IDE. Er zijn drie projecten DataEntities, Productsen Store. Het Store project is de Blazor-app. Het Products-project is een .NET Standard-bibliotheek die de productservice bevat. Het DataEntities project is een .NET Standard-bibliotheek die het productmodel bevat.

Uw app verbinden met de App Configuration store

Voor toegang tot waarden uit het App Configuration-archief in een ASP.NET Core-app is de configuratieprovider voor App Configuration nodig.

Pas de volgende wijzigingen toe op uw Store project:

  1. Navigeer in het terminalvenster naar de map Store:

    cd dotnet-feature-flags/Store

  2. Voer de volgende opdracht uit om een NuGet-pakket met de .NET-configuratieprovider voor de App Configuration-service te installeren:

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

  3. Open het Store/Program.cs-bestand.

  4. Voeg de nieuwe pakketverwijzingen boven aan het bestand toe:

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

  5. Voeg deze code toe onder de // Voeg de AddAzureAppConfiguration-code toe opmerking.

    // 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();

    In het voorgaande codefragment:

    • De Connect-methode wordt geverifieerd bij het App Configuration-archief. Zoals u weet, wordt de verbindingsreeks doorgegeven als een omgevingsvariabele ConnectionStrings:AppConfig.
    • Met de methode UseFeatureFlags kan de Feature Management-bibliotheek feature flags lezen uit de App Configuration-opslag.
    • De twee builder.Services-aanroepen registreren de services van de functiebeheerbibliotheek bij de afhankelijkheidsinjectiecontainer van de app.

  6. Voeg onder aan het bestand, onder // Voeg de App Configuration-middleware toe, deze code toe:

    app.UseAzureAppConfiguration();

    Met de voorgaande code wordt de App Configuration-middleware toegevoegd aan de aanvraagpijplijn. De middleware activeert een vernieuwingsbewerking voor de parameters voor functiebeheer voor elke binnenkomende aanvraag. Vervolgens is het aan de AzureAppConfiguration provider om te beslissen, op basis van vernieuwingsinstellingen, wanneer er daadwerkelijk verbinding moet worden gemaakt met de opslag om de waarden op te halen.

Een verkoopbanner inschakelen

Uw app kan nu de functievlag lezen, maar de pagina met producten moet worden bijgewerkt om aan te geven dat er een verkoop is ingeschakeld. Voer de volgende stappen uit:

  1. Open het Store/Components/Pages/Products.razor-bestand.

  2. Voeg boven aan het bestand de volgende code toe:

    @using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager

    De voorgaande code importeert de naamruimten van de bibliotheek voor functiebeheer en injecteert de IFeatureManager-interface in het onderdeel.

  3. Voeg in de sectie @code de volgende variabele toe om de status van de functievlag op te slaan:

    private bool saleOn = false;

  4. Voeg in de methode OnInitializedAsync de volgende code toe:

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

    De methode moet eruitzien als de volgende code:

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

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

  5. Voeg op regel 26 onder de opmerking <!-- Add a sales alert for customers --> de volgende code toe:

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

    In de voorgaande code wordt een verkoopwaarschuwing weergegeven als de functievlag is ingeschakeld.

De app bouwen

  1. Zorg ervoor dat u al uw wijzigingen hebt opgeslagen en zich in de dotnet-feature-flags map bevindt. Voer in de terminal de volgende opdracht uit:

    dotnet publish /p:PublishProfile=DefaultContainer

  2. Voer de app uit met docker:

    docker compose up

De functievlag testen

Voer de volgende stappen uit om te controleren of de functievlag werkt zoals verwacht in een codespace:

  1. Ga naar het tabblad POORTEN en selecteer vervolgens rechts van het lokale adres voor de front-endpoort poort het wereldbolpictogram. De browser opent een nieuw tabblad op de startpagina.
  2. Selecteer Producten.

Als u Visual Studio Code lokaal gebruikt, opent u http://localhost:32000/products.

Een schermopname van de verkoopwaarschuwing op de pagina producten.

In Azure Portal kunt u de functievlag in- en uitschakelen en de pagina met producten vernieuwen om de vlag in actie te zien.