Ćwiczenie — implementowanie flagi funkcji w celu kontrolowania funkcji ASP.NET Core

  • 12 min

W tym ćwiczeniu zaimplementuj flagę funkcji, aby przełączyć baner sprzedaży sezonowej dla aplikacji. Flagi funkcji umożliwiają przełączanie dostępności funkcji bez ponownego wdrażania aplikacji.

Użyjesz funkcji zarządzania funkcjami w bibliotece flag funkcji platformy .NET. Ta biblioteka udostępnia pomocników do implementowania flag funkcji w aplikacji. Biblioteka obsługuje proste przypadki użycia, takie jak instrukcje warunkowe, do bardziej zaawansowanych scenariuszy, takich jak warunkowe dodawanie tras lub filtrów akcji. Ponadto obsługuje filtry funkcji, które umożliwiają włączanie funkcji na podstawie określonych parametrów. Przykłady takich parametrów obejmują przedział czasu, wartości procentowe lub podzbiór użytkowników.

W trakcie tej lekcji wykonasz następujące czynności:

  • Utwórz wystąpienie konfiguracji aplikacja systemu Azure.
  • Dodaj flagę funkcji do magazynu App Configuration.
  • Połączenie aplikację do sklepu App Configuration.
  • Zmień aplikację, aby korzystała z flagi funkcji.
  • Zmień stronę produktów, aby wyświetlić baner sprzedaży.
  • Skompiluj i przetestuj aplikację.

Otwieranie środowiska projektowego

Możesz użyć przestrzeni kodu usługi GitHub, która hostuje ćwiczenie, lub wykonać ćwiczenie lokalnie w programie Visual Studio Code.

Aby użyć przestrzeni kodu, utwórz wstępnie skonfigurowany element GitHub Codespace za pomocą tego linku tworzenia usługi Codespace.

Utworzenie i skonfigurowanie przestrzeni kodu w usłudze GitHub trwa kilka minut. Po zakończeniu zobaczysz pliki kodu dla ćwiczenia. Kod używany w pozostałej części tego modułu znajduje się w katalogu /dotnet-feature-flags .

Aby użyć programu Visual Studio Code, sklonuj https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative repozytorium na komputer lokalny. Następnie:

  1. Zainstaluj wszystkie wymagania systemowe, aby uruchomić kontener deweloperski w programie Visual Studio Code.
  2. Upewnij się, że platforma Docker jest uruchomiona.
  3. W nowym oknie programu Visual Studio Code otwórz folder sklonowanego repozytorium
  4. Naciśnij klawisze Ctrl+Shift+P, aby otworzyć paletę poleceń.
  5. Wyszukiwanie: Tworzenie kontenerów: >ponowne kompilowanie i ponowne otwieranie w kontenerze
  6. Wybierz pozycję eShopLite — dotnet-feature-flags z listy rozwijanej. Program Visual Studio Code tworzy kontener dewelopera lokalnie.

Tworzenie wystąpienia usługi App Configuration

Wykonaj następujące kroki, aby utworzyć wystąpienie usługi App Configuration w ramach subskrypcji platformy Azure:

  1. W nowym okienku terminalu zaloguj się do interfejsu wiersza polecenia platformy Azure.

    az login --use-device-code

  2. Wyświetl wybraną subskrypcję platformy Azure.

    az account show -o table

    Jeśli wybrano niewłaściwą subskrypcję, wybierz właściwą, używając polecenia az account set .

  3. Uruchom następujące polecenie interfejsu wiersza polecenia platformy Azure, aby uzyskać listę regionów platformy Azure i skojarzona z nią nazwa:

    az account list-locations -o table

    Znajdź region najbliżej Ciebie i użyj go w następnym kroku, aby zastąpić [Closest Azure region]

  4. Uruchom następujące polecenia interfejsu wiersza polecenia platformy Azure, aby utworzyć wystąpienie usługi App Configuration:

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

    Musisz zmienić lokalizację na region platformy Azure blisko Siebie, na przykład eastus. Jeśli chcesz, aby inna nazwa grupy zasobów lub konfiguracji aplikacji zmieniła powyższe wartości.

  5. Uruchom następujące polecenie, aby utworzyć grupę zasobów platformy Azure:

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

  6. Uruchom następujące polecenie, aby utworzyć wystąpienie usługi App Configuration:

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

    Zostanie wyświetlona odmiana następujących danych wyjściowych:

    {
  "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. Uruchom to polecenie, aby pobrać parametry połączenia dla wystąpienia usługi App Configuration:

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

    Ten ciąg poprzedzony prefiksem Endpoint= reprezentuje parametry połączenia sklepu App Configuration.

  8. Skopiuj parametry połączenia. Użyjesz go za chwilę.

Przechowywanie parametry połączenia usługi App Configuration

Teraz dodasz parametry połączenia App Configuration do aplikacji. Zakończ poniższe kroki:

  1. Otwórz plik /dotnet-feature-flags/docker-compose.yml.

  2. Dodaj nową zmienną środowiskową w wierszu 13.

    - ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

    Będzie docker-compose.yml on podobny do następującego kodu YAML:

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

Poprzedni wiersz reprezentuje parę klucz-wartość, w której ConnectionStrings:AppConfig jest nazwą zmiennej środowiskowej. W projekcie Store dostawca konfiguracji zmiennych środowiskowych odczytuje jego wartość.

Napiwek

Parametry połączenia konfiguracji aplikacja systemu Azure zawiera wpis tajny w postaci zwykłego tekstu. W rzeczywistych aplikacjach rozważ zintegrowanie usługi App Configuration z usługą Azure Key Vault w celu bezpiecznego przechowywania wpisów tajnych. Usługa Key Vault jest poza zakresem tego modułu, ale wskazówki można znaleźć w artykule Samouczek: używanie odwołań usługi Key Vault w aplikacji ASP.NET Core.

Dodawanie flagi funkcji do magazynu App Configuration

W aplikacja systemu Azure Konfiguracja utwórz i włącz parę klucz-wartość, aby była traktowana jako flaga funkcji. Zakończ poniższe kroki:

  1. Na innej karcie przeglądarki zaloguj się do witryny Azure Portal przy użyciu tego samego konta i katalogu co interfejs wiersza polecenia platformy Azure.

  2. Użyj pola wyszukiwania, aby znaleźć i otworzyć zasób usługi App Configuration poprzedzony prefiksem eshop-app-features.

    Zrzut ekranu przedstawiający wyniki wyszukiwania w witrynie Azure Portal z prefiksem zasobu App Configuration z prefiksem

  3. W sekcji Operacje wybierz pozycję Menedżer funkcji.

  4. W górnym menu wybierz pozycję + Utwórz.

  5. Zaznacz pole wyboru Włącz flagę funkcji.

  6. W polu tekstowym Nazwa flagi funkcji wprowadź wartość SeasonalDiscount.

  7. Wybierz Zastosuj.

    Zrzut ekranu przedstawiający nową flagę dodawania funkcji.

    Teraz, gdy flaga funkcji istnieje w magazynie App Configuration, Store projekt wymaga pewnych zmian w celu jej odczytania.

Przegląd kodu

Przejrzyj katalogi w okienku eksploratora w środowisku IDE. Należy pamiętać, że istnieją trzy projekty DataEntities, Productsi Store. Projekt Store jest aplikacją Platformy Blazor. Projekt Products jest biblioteką .NET Standard zawierającą usługę produktu. Projekt DataEntities jest biblioteką .NET Standard zawierającą model produktu.

Połączenie aplikacji do magazynu App Configuration

Aby uzyskać dostęp do wartości ze sklepu App Configuration w aplikacji ASP.NET Core, wymagany jest dostawca konfiguracji dla usługi App Configuration.

Zastosuj następujące zmiany do Store projektu:

  1. W oknie terminalu przejdź do folderu Store:

    cd dotnet-feature-flags/Store

  2. Uruchom następujące polecenie, aby zainstalować pakiet NuGet zawierający dostawcę konfiguracji platformy .NET dla usługi App Configuration:

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

  3. Otwórz plik Store/Program.cs.

  4. Dodaj nowe odwołania do pakietu w górnej części pliku:

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

  5. Dodaj ten kod poniżej // Dodaj komentarz kodu 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();

    W poprzednim fragmencie kodu:

    • Metoda Connect uwierzytelnia się w magazynie App Configuration. Pamiętaj, że parametry połączenia jest przekazywana jako zmienna środowiskowa ConnectionStrings:AppConfig.
    • Metoda UseFeatureFlags umożliwia bibliotece zarządzania funkcjami odczytywanie flag funkcji ze sklepu App Configuration.
    • Te dwa builder.Services wywołania rejestrują usługi biblioteki zarządzania funkcjami za pomocą kontenera wstrzykiwania zależności aplikacji.

  6. W dolnej części pliku poniżej // Dodaj oprogramowanie pośredniczące App Configuration dodaj następujący kod:

    app.UseAzureAppConfiguration();

    Powyższy kod dodaje oprogramowanie pośredniczące App Configuration do potoku żądania. Oprogramowanie pośredniczące wyzwala operację odświeżania parametrów zarządzania funkcjami dla każdego przychodzącego żądania. AzureAppConfiguration Następnie do dostawcy należy podjęcie decyzji na podstawie ustawień odświeżania, kiedy rzeczywiście połączyć się z magazynem, aby uzyskać wartości.

Włączanie baneru sprzedaży

Aplikacja może teraz odczytać flagę funkcji, ale strona produktów musi zostać zaktualizowana, aby pokazać, że sprzedaż jest włączona. Zakończ poniższe kroki:

  1. Otwórz plik Store/Components/Pages/Products.razor.

  2. W górnej części pliku dodaj następujący kod:

    @using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager

    Powyższy kod importuje przestrzenie nazw biblioteki zarządzania funkcjami i wprowadza IFeatureManager interfejs do składnika.

  3. @code W sekcji dodaj następującą zmienną, aby przechowywać stan flagi funkcji:

    private bool saleOn = false;

  4. W metodzie OnInitializedAsync dodaj następujący kod:

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

    Metoda powinna wyglądać podobnie do następującego kodu:

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

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

  5. W wierszu 26 pod komentarzem <!-- Add a sales alert for customers --> dodaj następujący kod:

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

    Powyższy kod wyświetla alert dotyczący sprzedaży, jeśli flaga funkcji jest włączona.

Tworzenie aplikacji

  1. Upewnij się, że wszystkie zmiany zostały zapisane i znajdują się w katalogu dotnet-feature-flags . W terminalu uruchom następujące polecenie:

    dotnet publish /p:PublishProfile=DefaultContainer

  2. Uruchom aplikację przy użyciu platformy Docker:

    docker compose up

Testowanie flagi funkcji

Aby sprawdzić, czy flaga funkcji działa zgodnie z oczekiwaniami w przestrzeni kodu, wykonaj następujące kroki:

  1. Przejdź do karty PORTY, a następnie po prawej stronie adresu lokalnego dla portu frontonu wybierz ikonę globusa. Przeglądarka otwiera nową kartę na stronie głównej.
  2. Wybierz produkty.

Jeśli używasz programu Visual Studio Code lokalnie, otwórz plik http://localhost:32000/products.

Zrzut ekranu przedstawiający alert sprzedaży na stronie produktów.

W witrynie Azure Portal możesz włączyć i wyłączyć flagę funkcji oraz odświeżyć stronę produktów, aby zobaczyć flagę w akcji.