Gyakorlat – Funkciójelző implementálása az ASP.NET Core-alkalmazás funkcióinak szabályozásához

12 perc

Ebben a gyakorlatban implementáljon egy funkciójelzőt az alkalmazás szezonális értékesítési szalagcímének váltásához. A funkciójelzők lehetővé teszik a funkciók rendelkezésre állásának váltását az alkalmazás ismételt üzembe helyezése nélkül.

A Funkciókezelés funkciót fogja használni a .NET funkciójelölőtárban. Ez a kódtár segítséget nyújt a funkciójelzők alkalmazásbeli implementálásához. A kódtár támogatja az olyan egyszerű használati eseteket, mint a feltételes utasítások, valamint az összetettebb forgatókönyveket, például az útvonalak vagy a műveleti szűrők feltételes hozzáadását. Emellett támogatja a funkciószűrőket is, amelyek lehetővé teszik a funkciók adott paramétereken alapuló engedélyezését. Ilyen paraméterek például az ablakidő, a százalékok vagy a felhasználók egy részhalmaza.

Ebben az egységben a következőket fogja tanulni:

Hozzon létre egy Azure App Configuration-példányt.
Adjon hozzá egy funkciójelzőt az Alkalmazáskonfigurációs áruházhoz.
Csatlakoztassa az alkalmazást az Alkalmazáskonfigurációs áruházhoz.
Módosítsa az alkalmazást a funkciójelző használatára.
Módosítsa a termékek lapot egy értékesítési szalagcím megjelenítéséhez.
Az alkalmazás létrehozása és tesztelése.

A fejlesztői környezet megnyitása

Használhat egy GitHub-kódteret, amely a gyakorlatot üzemelteti, vagy elvégezheti a gyakorlatot helyileg a Visual Studio Code-ban.

A kódtérhasználatához hozzon létre egy előre konfigurált GitHub-kódteret, ezzel a kódtér-létrehozási hivatkozással.

A GitHub több percet vesz igénybe a kódtér létrehozásához és konfigurálásához. Ha elkészült, megjelenik a gyakorlat kódfájljai. A modul hátralévő részében használt kód a /dotnet-feature-flags könyvtárban található.

A Visual Studio Codehasználatához klónozza a https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative adattárat a helyi gépre. Akkor:

Telepítse a rendszerkövetelményeket a Dev Container futtatásához a Visual Studio Code-ban.
Győződjön meg arról, hogy a Docker fut.
Egy új Visual Studio Code-ablakban nyissa meg a klónozott adattár mappáját
A parancskatalógus megnyitásához nyomja le a Ctrl+Shift+P billentyűkombinációt.
Keresés: >Fejlesztői konténerek: Újraépítés és újranyitás a konténerben
A legördülő listából válassza a eShopLite - dotnet-feature-flags elemet. A Visual Studio Code helyileg hozza létre a fejlesztési tárolót.

Alkalmazáskonfigurációs példány létrehozása

Hajtsa végre az alábbi lépéseket egy alkalmazáskonfigurációs példány Azure-előfizetésben való létrehozásához:

Az új terminálpanelen jelentkezzen be az Azure CLI-be.
```
az login --use-device-code
```
A kiválasztott Azure-előfizetés megtekintése.
```
az account show -o table
```
Ha nem a megfelelő előfizetés van kiválasztva, válassza ki a megfelelőt az az account set paranccsal.
Futtassa a következő Azure CLI-parancsot az Azure-régiók listájának és a hozzá társított névnek a lekéréséhez:
```
az account list-locations -o table
```
Keresse meg az Önhöz legközelebbi régiót, és használja fel a következő lépésben [Closest Azure region] cseréjére.
Az alkalmazáskonfigurációs példány létrehozásához futtassa az alábbi Azure CLI-parancsokat:
```
export LOCATION=[Closest Azure region]
export RESOURCE_GROUP=rg-eshop
export CONFIG_NAME=eshop-app-features$SRANDOM    
```
Önnek meg kell változtatnia a LOCATION beállítást egy Önhöz közeli Azure-régióra, például eastus. Ha más nevet szeretne az erőforráscsoporthoz vagy az alkalmazás konfigurációjához, módosítsa a fenti értékeket.
Futtassa a következő parancsot az Azure-erőforráscsoport létrehozásához:
```
az group create --name $RESOURCE_GROUP --location $LOCATION
```

Futtassa a következő parancsot egy alkalmazáskonfigurációs példány létrehozásához:

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

Megjelenik a következő kimenet egy változata:

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

Futtassa ezt a parancsot az alkalmazáskonfigurációs példány kapcsolati sztringjének lekéréséhez:
```
az appconfig credential list --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --query [0].connectionString --output tsv
```
Ez a Endpoint= előtagú karakterlánc az alkalmazáskonfigurációs tárhely kapcsolati karakterláncát jelöli.
Másolja ki a kapcsolati sztringet. Rögtön használni fogja.

Az alkalmazáskonfiguráció kapcsolati sztringjének tárolása

Most hozzáadja az alkalmazás konfigurációs kapcsolati sztringét az alkalmazáshoz. Hajtsa végre a következő lépéseket:

Nyissa meg a /dotnet-feature-flags/docker-compose.yml fájlt.

Adjon hozzá egy új környezeti változót a 13. sorban.

- ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

A docker-compose.yml a következő YAML-hez hasonlít:

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

Az előző sor egy kulcs-érték párot jelöl, amelyben a ConnectionStrings:AppConfig környezeti változó neve. A Store projektben a környezeti változók konfigurációszolgáltatója beolvassa annak értékét.

Borravaló

Az Azure App Configuration kapcsolati sztringje egyszerű szöveges titkos kulcsot tartalmaz. A valós alkalmazásokban érdemes integrálni az alkalmazáskonfigurációt az Azure Key Vaulttal a titkos kódok biztonságos tárolása érdekében. A Key Vault nem tartozik a modul hatókörébe, de útmutatást oktatóanyagban talál: Key Vault-referenciák használata ASP.NET Core-alkalmazásokban.

A funkciójelző hozzáadása az Alkalmazáskonfigurációs áruházhoz

Az Azure App Configurationban hozzon létre és engedélyezze a kulcs-érték párok funkciójelzőként való kezelését. Hajtsa végre a következő lépéseket:

Egy másik böngészőlapon jelentkezzen be a Azure Portal ugyanazzal a fiókkal és címtárral, mint az Azure CLI.
A keresőmező használatával keresse meg és nyissa meg az alkalmazáskonfigurációs erőforrást eshop-app-featureselőtaggal.
Az Operations szakaszban válassza Szolgáltatáskezelőlehetőséget.
A felső menüben válassza a +létrehozása lehetőséget.
Jelölje be a Funkciójelző engedélyezése jelölőnégyzetet.
A Funkciójelző neve szövegmezőbe írja be a SeasonalDiscountnevet.
Válassza a Alkalmazlehetőséget.

Most, hogy a funkciójelző már létezik az App Configuration Store-ban, a Store projektnek módosítania kell az olvasását.

Kód áttekintése

Tekintse át a könyvtárakat az IDE Explorer paneljén. Vegye észre, hogy három projekt van: DataEntities, Productsés Store. A Store projekt a Blazor alkalmazás. A Products projekt egy .NET Standard kódtár, amely a termékszolgáltatást tartalmazza. A DataEntities projekt egy .NET Standard kódtár, amely a termékmodellt tartalmazza.

Az alkalmazás csatlakoztatása az Alkalmazáskonfigurációs áruházhoz

Ha egy ASP.NET Core-alkalmazás Alkalmazáskonfigurációs áruházából szeretne értékeket elérni, szükség van az alkalmazáskonfiguráció konfigurációs szolgáltatójának.

Alkalmazza a következő módosításokat a Store projektre:

A terminálablakban keresse meg az Áruház mappát:
```
cd dotnet-feature-flags/Store
```

Futtassa a következő parancsot az App Configuration service .NET-konfigurációszolgáltatóját tartalmazó NuGet-csomag telepítéséhez:

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

Nyissa meg a Store/Program.cs fájlt.

Adja hozzá az új csomaghivatkozásokat a fájl tetején:

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

Adja hozzá ezt a kódot a alatt // Adja hozzá az AddAzureAppConfiguration kód megjegyzést.
```
// 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();
```
Az előző kódrészletben:
- A Connect metódus hitelesíti az Alkalmazáskonfigurációs áruházat. Ne feledje, hogy a kapcsolati sztring környezeti változóként van átadva ConnectionStrings:AppConfig.
- A UseFeatureFlags metódus lehetővé teszi, hogy a Funkciókezelési kódtár beolvassa a funkciójelzőket az Alkalmazáskonfigurációs áruházból.
- A két builder.Services hívás regisztrálja a Feature Management könyvtár szolgáltatásait az alkalmazás függőséginjektálási konténerével.
A fájl alján, // Az Alkalmazáskonfiguráció köztes szoftver hozzáadásaalatt adja hozzá a következő kódot:
```
app.UseAzureAppConfiguration();
```
Az előző kód hozzáadja az Alkalmazáskonfiguráció köztes szoftverét a kérelemfolyamathoz. A köztes szoftver minden bejövő kéréshez elindít egy frissítési műveletet a szolgáltatásfelügyeleti paraméterekhez. Ezután a AzureAppConfiguration szolgáltatón múlik, hogy a frissítési beállítások alapján mikor kell ténylegesen csatlakozni az áruházhoz az értékek lekéréséhez.

Az alkalmazás most már elolvashatja a funkciójelzőt, de a termékek oldalát frissíteni kell, hogy megjelenjen az értékesítés. Hajtsa végre a következő lépéseket:

Nyissa meg a Store/Components/Pages/Products.razor fájlt.
A fájl tetején adja hozzá a következő kódot:
```
@using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager
```
Az előző kód importálja a Feature Management-kódtár névtereit, és a IFeatureManager felületet az összetevőbe injektálja.
A @code szakaszban adja hozzá a következő változót a funkciójelző állapotának tárolásához:
```
private bool saleOn = false;  
```

A OnInitializedAsync metódusban adja hozzá a következő kódot:

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

A metódusnak a következő kódhoz hasonlóan kell kinéznie:

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

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

A 26. sorban, a  megjegyzés alatt adja hozzá a következő kódot:
```

@if (saleOn)
{
<div class="alert alert-success" role="alert">
  Our sale is now on.
</div>
}
```
Az előző kód egy értékesítési riasztást jelenít meg, ha a funkciójelző engedélyezve van.

Az alkalmazás létrehozása

Győződjön meg arról, hogy mentette az összes módosítást, és a dotnet-feature-flags könyvtárban tartózkodik. Futtassa a következő parancsot a terminálban:
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
Futtassa az alkalmazást a Docker használatával:
```
docker compose up
```

A funkciójelző tesztelése

Ha ellenőrizni szeretné, hogy a funkciójelző a várt módon működik-e egy kódtérben, hajtsa végre az alábbi lépéseket:

Váltson a PORTS lapra, majd a Front End port helyi címétől jobbra válassza a földgömb ikont. A böngésző új lapot nyit meg a kezdőlapon.
Válassza ki a(z) termékeket.

Ha helyileg használja a Visual Studio Code-ot, nyissa meg http://localhost:32000/products.

Az Azure Portalon engedélyezheti és letilthatja a funkciójelzőt, és frissítheti a termékek lapot, hogy működés közben láthassa a jelzőt.

Visszajelzés

Hasznosnak találta ezt az oldalt?