Übung – Implementieren einer Funktionskennzeichnung zum Steuern von ASP.NET Core-App-Funktionen

12 Minuten

Implementieren Sie in dieser Übung ein Feature-Flag, um ein saisonales Verkaufsbanner in Ihrer Anwendung ein- oder auszuschalten. Mit Featurekennzeichnungen können Sie die Featureverfügbarkeit umschalten, ohne Ihre App erneut bereitzustellen.

Sie verwenden das Feature-Management in der .NET-Feature-Flag-Bibliothek. Diese Bibliothek bietet Hilfsprogramme zum Implementieren von Featurekennzeichnungen in Ihrer App. Die Bibliothek unterstützt einfache Anwendungsfälle wie Bedingungsanweisungen sowie komplexere Szenarien wie das Hinzufügen von Routen oder Aktionsfiltern. Darüber hinaus unterstützt es Featurefilter, mit denen Sie Features basierend auf bestimmten Parametern aktivieren können. Beispiele für solche Parameter sind eine Fensterzeit, Prozentsätze oder eine Teilmenge von Benutzern.

In dieser Lerneinheit lernen Sie Folgendes:

Erstellen Sie eine Azure App-Konfigurationsinstanz.
Hinzufügen eines Featureflags zum App Configuration-Speicher
Verbinden Sie Ihre App mit dem App Configuration-Speicher.
Ändern Sie die Anwendung so, dass sie das Feature-Flag verwendet.
Ändern Sie die Produktseite, um ein Verkaufsbanner anzuzeigen.
Erstellen und testen Sie die App.

Öffnen Sie die Entwicklungsumgebung

Sie können einen GitHub-Codespace als Host für die Übung verwenden oder sie lokal in Visual Studio Code durchführen.

Um einen Codespace zu verwenden, erstellen Sie einen vorkonfigurierten GitHub Codespace mit diesem Codespace-Erstellungslink.

GitHub dauert mehrere Minuten, um den Codespace zu erstellen und zu konfigurieren. Nach Abschluss der Übung werden die Codedateien für die Übung angezeigt. Der Code, der für den Rest dieses Moduls verwendet wird, befindet sich im Verzeichnis "/dotnet-feature-flags ".

Um Visual Studio Code zu verwenden, klonen Sie das https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative Repository auf Ihrem lokalen Computer. Führen Sie dann folgende Schritte aus:

Installieren Sie alle Systemanforderungen , um Dev Container in Visual Studio Code auszuführen.
Achten Sie darauf, dass Docker ausgeführt wird.
Öffnen Sie in einem neuen Visual Studio Code-Fenster den Ordner des geklonten Repositorys.
Drücken Sie STRG+UMSCHALT+P , um die Befehlspalette zu öffnen.
Suche: >Dev-Container: In Container neu erstellen und erneut öffnen
Wählen Sie eShopLite - dotnet-feature-flags aus der Dropdownliste aus. Visual Studio Code erstellt Ihren Entwicklungscontainer lokal.

Erstellen einer App-Konfigurationsinstanz

Führen Sie die folgenden Schritte aus, um eine App-Konfigurationsinstanz in Ihrem Azure-Abonnement zu erstellen:

Melden Sie sich im neuen Terminalbereich bei der Azure CLI an.
```
az login --use-device-code
```
Zeigen Sie Ihr ausgewähltes Azure-Abonnement an.
```
az account show -o table
```
Wenn das falsche Abonnement ausgewählt ist, wählen Sie das richtige abonnement mit dem Befehl "az account set " aus.
Führen Sie den folgenden Azure CLI-Befehl aus, um eine Liste der Azure-Regionen und den damit verbundenen Namen abzurufen:
```
az account list-locations -o table
```
Suchen Sie eine Region, die Ihnen am nächsten kommt, und verwenden Sie sie im nächsten Schritt, um ihn zu ersetzen. [Closest Azure region]
Führen Sie die folgenden Azure CLI-Befehle aus, um eine App-Konfigurationsinstanz zu erstellen:
```
export LOCATION=[Closest Azure region]
export RESOURCE_GROUP=rg-eshop
export CONFIG_NAME=eshop-app-features$SRANDOM    
```
Sie müssen den STANDORT in eine Azure-Region in ihrer Nähe ändern, z. B. eastus. Wenn Sie einen anderen Namen für Ihre Ressourcengruppe oder App-Konfiguration wünschen, ändern Sie die oben genannten Werte.
Führen Sie den folgenden Befehl aus, um die Azure-Ressourcengruppe zu erstellen:
```
az group create --name $RESOURCE_GROUP --location $LOCATION
```

Führen Sie den folgenden Befehl aus, um eine App-Konfigurationsinstanz zu erstellen:

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

Eine Variation der folgenden Ausgabe wird angezeigt:

{
  "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,

Führen Sie diesen Befehl aus, um die Verbindungszeichenfolge für die App-Konfigurationsinstanz abzurufen:
```
az appconfig credential list --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --query [0].connectionString --output tsv
```
Diese Zeichenfolge, die mit dem Präfix versehen ist Endpoint= , stellt die Verbindungszeichenfolge des App-Konfigurationsspeichers dar.
Kopieren Sie die Verbindungszeichenfolge. Sie verwenden sie in Kürze.

Speichern der App Configuration-Verbindungszeichenfolge

Sie fügen der Anwendung jetzt die App Configuration-Verbindungszeichenfolge hinzu. Führen Sie die folgenden Schritte aus:

Öffnen Sie die Datei /dotnet-feature-flags/docker-compose.yml.

Fügen Sie eine neue Umgebungsvariable in Zeile 13 hinzu.

- ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

Dies ähnelt dem folgenden YAML:The docker-compose.yml will resemble the following YAML:

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

Die vorangehende Zeile stellt ein Schlüssel-Wert-Paar dar, bei dem es ConnectionStrings:AppConfig sich um einen Umgebungsvariablennamen handelt. Store Im Projekt liest der Konfigurationsanbieter für Umgebungsvariablen seinen Wert.

Tipp

Ihre Azure App-Konfigurationsverbindungszeichenfolge enthält einen reinen Textschlüssel. In realen Apps sollten Sie die App-Konfiguration in Azure Key Vault integrieren, um geheime Schlüssel sicher zu speichern. Key Vault ist für dieses Modul außerhalb des Gültigkeitsbereichs, aber Anleitungen finden Sie im Lernprogramm: Verwenden von Key Vault-Verweisen in einer ASP.NET Core-App.

Fügen Sie das Feature-Flag zum App-Konfigurationsspeicher hinzu

Erstellen und aktivieren Sie in der Azure App-Konfiguration ein Schlüssel-Wert-Paar, das als Featurekennzeichnung behandelt werden soll. Führen Sie die folgenden Schritte aus:

Melden Sie sich auf einer anderen Browser-Registerkarte beim Azure-Portal mit demselben Konto und Verzeichnis an wie bei der Azure CLI.
Verwenden Sie das Suchfeld, um die mit eshop-app-features gekennzeichnete App-Konfigurationsressource zu finden und zu öffnen.
Wählen Sie im Abschnitt "Vorgänge" den Feature-Manager aus.
Wählen Sie im oberen Menü +Erstellen aus.
Aktivieren Sie das Kontrollkästchen "Feature-Flag aktivieren".
Geben Sie im Textfeld „Feature-Flag-Name“„SeasonalDiscount“ ein.
Klicken Sie auf Übernehmen.

Da nun das Feature-Flag im App-Konfigurationsspeicher vorhanden ist, erfordert das Store Projekt einige Änderungen, um es zu lesen.

Überprüfen des Codes

Überprüfen Sie die Verzeichnisse im Explorerbereich in der IDE. Beachten Sie, dass drei Projekte vorhanden sind: DataEntities, Products und Store. Das Store Projekt ist die Blazor-App. Das Products Projekt ist eine .NET Standard-Bibliothek, die den Produktdienst enthält. Das DataEntities Projekt ist eine .NET Standard-Bibliothek, die das Produktmodell enthält.

Verbinden Sie Ihre App mit dem App-Konfigurationsspeicher

Für den Zugriff auf Werte aus dem App-Konfigurationsspeicher in einer ASP.NET Core-App ist der Konfigurationsanbieter für die App-Konfiguration erforderlich.

Wenden Sie die folgenden Änderungen auf Ihr Store Projekt an:

Navigieren Sie im Terminalfenster zum Store-Ordner:
```
cd dotnet-feature-flags/Store
```

Führen Sie den folgenden Befehl aus, um ein NuGet-Paket mit dem .NET-Konfigurationsanbieter für den App-Konfigurationsdienst zu installieren:

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

Öffnen Sie die Datei Store/Program.cs.

Fügen Sie die neuen Paketverweise oben in der Datei hinzu:

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

Fügen Sie diesen Code unterhalb des Kommentars // Add the AddAzureAppConfiguration code ein.
```
// 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();
```
Im vorherigen Codeausschnitt:
- Die Connect-Methode wird im App Configuration-Speicher authentifiziert. Erinnern Sie sich daran, dass die Verbindungszeichenfolge als Umgebungsvariable ConnectionStrings:AppConfigübergeben wird.
- Mit UseFeatureFlags der Methode kann die Featureverwaltungsbibliothek Featurekennzeichnungen aus dem App-Konfigurationsspeicher lesen.
- Die beiden builder.Services Aufrufe registrieren die Dienste der Feature-Management-Bibliothek im Abhängigkeitsinjektionscontainer der App.
Fügen Sie unten in der Datei unter "Add the App Configuration middleware" den folgenden Code hinzu:
```
app.UseAzureAppConfiguration();
```
Der vorangehende Code fügt der Anforderungspipeline die Middleware für die App-Konfiguration hinzu. Die Middleware löst einen Aktualisierungsvorgang für die Featureverwaltungsparameter für jede eingehende Anforderung aus. Dann liegt es am Anbieter AzureAppConfiguration, auf der Grundlage der Aktualisierungseinstellungen zu entscheiden, wann er sich tatsächlich mit dem Speicher verbindet, um die Werte abzurufen.

Ihre App kann nun die Featurekennzeichnung lesen, die Produktseite muss jedoch aktualisiert werden, um anzuzeigen, dass ein Sonderangebot aktiviert ist. Führen Sie die folgenden Schritte aus:

Öffnen Sie die Datei Store/Components/Pages/Products.razor.
Fügen Sie oben in der Datei den folgenden Code hinzu:
```
@using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager
```
Der vorangehende Code importiert die Namespaces der Featureverwaltungsbibliothek und fügt die IFeatureManager Schnittstelle in die Komponente ein.
Fügen Sie im @code Abschnitt die folgende Variable hinzu, um den Status des Feature-Flags zu speichern:
```
private bool saleOn = false;  
```

Fügen Sie in der OnInitializedAsync Methode den folgenden Code hinzu:

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

Die Methode sollte wie der folgende Code aussehen:

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

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

Fügen Sie in Zeile 26 unter dem  Kommentar den folgenden Code hinzu:
```

@if (saleOn)
{
<div class="alert alert-success" role="alert">
  Our sale is now on.
</div>
}
```
Im vorherigen Code wird eine Verkaufswarnung angezeigt, wenn das Feature-Flag aktiviert ist.

Erstellen der App

Stellen Sie sicher, dass Sie alle Ihre Änderungen gespeichert haben und sich im Verzeichnis "dotnet-feature-flags" befinden. Führen Sie im Terminal den folgenden Befehl aus:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Führen Sie die App mit Docker aus:
```
docker compose up
```

Testen des Featureflags

Führen Sie die folgenden Schritte aus, um zu überprüfen, ob das Feature-Flag in einem Codespace wie erwartet funktioniert:

Wechseln Sie zur Registerkarte "PORTS ", und wählen Sie dann rechts neben der lokalen Adresse für den Front-End-Port das Globussymbol aus. Der Browser öffnet eine neue Registerkarte auf der Homepage.
Wählen Sie "Produkte" aus.

Wenn Sie Visual Studio Code lokal verwenden, öffnen Sie http://localhost:32000/products.

Im Azure-Portal können Sie das Feature-Flag aktivieren und deaktivieren und die Produktseite aktualisieren, um das Kennzeichen in Aktion anzuzeigen.

Feedback

War diese Seite hilfreich?