Alıştırma - ASP.NET Core uygulama özelliklerini denetlemek için özellik bayrağı uygulama

Tamamlandı

Bu alıştırmada, uygulamanızın mevsimsel satış başlığını değiştirmek için bir özellik bayrağı uygulayın. Özellik bayrakları, uygulamanızı yeniden dağıtmadan özellik kullanılabilirliğini değiştirmenizi sağlar.

.NET özellik bayrağı kitaplığında Özellik Yönetimi'ni kullanacaksınız. Bu kitaplık, uygulamanızda özellik bayrakları uygulamak için yardımcılar sağlar. Kitaplık, koşullu deyimler gibi basit kullanım örneklerinden, yolları veya eylem filtrelerini koşullu olarak ekleme gibi daha gelişmiş senaryolara kadar destek verir. Ayrıca, özellikleri belirli parametrelere göre etkinleştirmenize olanak tanıyan özellik filtrelerini destekler. Bu tür parametrelere örnek olarak pencere zamanı, yüzdeler veya kullanıcıların bir alt kümesi verilebilir.

Bu ünitede şunları yapacaksınız:

  • Bir Azure Uygulama Yapılandırması örneği oluşturun.
  • Uygulama Yapılandırma deposuna bir özellik bayrağı ekleyin.
  • Uygulamanızı Uygulama Yapılandırma deposuna bağlayın.
  • Uygulamayı özellik bayrağını kullanacak şekilde değiştirme.
  • Satış başlığı görüntülemek için ürünler sayfasını değiştirin.
  • Uygulamayı derleyin ve test edin.

Geliştirme ortamını açma

Alıştırmayı barındıran bir GitHub kod alanı kullanmayı seçebilir veya alıştırmayı Visual Studio Code'da yerel olarak tamamlayabilirsiniz.

Kod alanı kullanmak için bu Codespace oluşturma bağlantısıyla önceden yapılandırılmış bir GitHub Codespace oluşturun.

GitHub'ın kod alanının oluşturulması ve yapılandırılması birkaç dakika sürer. tamamlandığında, alıştırmanın kod dosyalarını görürsünüz. Bu modülün geri kalanı için kullanılan kod /dotnet-feature-flags dizinindedir.

Visual Studio Code'ı kullanmak için depoyu https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative yerel makinenize kopyalayın. Sonra:

  1. Visual Studio Code'da Dev Container'ı çalıştırmak için herhangi bir sistem gereksinimlerini yükleyin.
  2. Docker'ın çalıştığından emin olun.
  3. Yeni bir Visual Studio Code penceresinde kopyalanan deponun klasörünü açın
  4. Komut paletini açmak için Ctrl+Shift+P tuşlarına basın.
  5. Arama: >Geliştirme Kapsayıcıları: Kapsayıcıda Yeniden Oluşturma ve Yeniden Açma
  6. Açılan listeden eShopLite - dotnet-feature-flags öğesini seçin. Visual Studio Code, geliştirme kapsayıcınızı yerel olarak oluşturur.

Uygulama Yapılandırma örneği oluşturma

Azure aboneliğinizde uygulama yapılandırma örneği oluşturmak için aşağıdaki adımları tamamlayın:

  1. Yeni terminal bölmesinde Azure CLI'da oturum açın.

    az login --use-device-code
    
  2. Seçtiğiniz Azure aboneliğini görüntüleyin.

    az account show -o table
    

    Yanlış abonelik seçiliyse az account set komutunu kullanarak doğru aboneliği seçin.

  3. Azure bölgelerinin listesini ve onunla ilişkili Adı almak için aşağıdaki Azure CLI komutunu çalıştırın:

    az account list-locations -o table
    

    Size en yakın bölgeyi bulun ve sonraki adımda [Closest Azure region] ile değiştirin.

  4. Uygulama Yapılandırma örneği oluşturmak için aşağıdaki Azure CLI komutlarını çalıştırın:

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

    LOCATION değerini size yakın bir Azure bölgesiyle (örneğin eastus) değiştirmeniz gerekir. Kaynak grubunuz veya uygulama yapılandırmanız için farklı bir ad istiyorsanız yukarıdaki değerleri değiştirin.

  5. Azure Kaynak Grubunu oluşturmak için aşağıdaki komutu çalıştırın:

    az group create --name $RESOURCE_GROUP --location $LOCATION
    
  6. Uygulama Yapılandırma örneği oluşturmak için aşağıdaki komutu çalıştırın:

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

    Aşağıdaki çıkışın bir varyasyonu görüntülenir:

    {
      "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. Uygulama Yapılandırması örneğinin bağlantı dizesini almak için şu komutu çalıştırın:

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

    Endpoint= ön ekli bu dize, Uygulama Yapılandırma deposunun bağlantı dizesini temsil eder.

  8. Bağlantı dizesini kopyalayın. Birazdan kullanacaksınız.

Uygulama Yapılandırması bağlantı dizesini depolama

Şimdi uygulamaya Uygulama Yapılandırması bağlantı dizesini ekleyeceksiniz. Aşağıdaki adımları tamamlayın:

  1. /dotnet-feature-flags/docker-compose.yml dosyasını açın.

  2. 13. satıra yeni bir ortam değişkeni ekleyin.

    - ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]
    

    docker-compose.yml aşağıdaki YAML'ye benzer:

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

Yukarıdaki satır, ConnectionStrings:AppConfig bir ortam değişkeni adı olduğu bir anahtar-değer çiftini temsil eder. Store projesinde ortam değişkenleri yapılandırma sağlayıcısı değerini okur.

Bahşiş

Azure Uygulama Yapılandırması bağlantı dizeniz düz metin gizli dizisi içerir. Gerçek dünyadaki uygulamalarda, gizli dizilerin güvenli bir şekilde depolanması için Uygulama Yapılandırması'nı Azure Key Vault ile tümleştirmeyi göz önünde bulundurun. Key Vault bu modülün kapsamı dışındadır, ancak öğretici: ASP.NET Core uygulamasında Key Vault başvurularını kullanma konusunda yönergeler bulunabilir.

Özellik bayrağını Uygulama Yapılandırma deposuna ekleme

Azure Uygulama Yapılandırması'nda bir anahtar-değer çifti oluşturup özellik bayrağı olarak değerlendirilmesini etkinleştirin. Aşağıdaki adımları tamamlayın:

  1. Başka bir tarayıcı sekmesinde, Azure CLI ile aynı hesap ve dizinle Azure portalında oturum açın.

  2. eshop-app-featuresön ekli Uygulama Yapılandırması kaynağını bulmak ve açmak için arama kutusunu kullanın.

    'eshop-app-features' ön eki eklenmiş Uygulama Yapılandırması kaynağını gösteren Azure portalı arama sonuçlarının ekran görüntüsü.

  3. İşlemler bölümünde Özellik yöneticisi'ni seçin.

  4. Üstteki menüde + Oluştur'u seçin.

  5. Özellik bayrağını etkinleştir onay kutusunu seçin.

  6. Özellik bayrağı adı metin kutusuna SeasonalDiscount girin.

  7. Uygula'yı seçin.

    Eklenen yeni özellik bayrağının ekran görüntüsü.

    Özellik bayrağı artık Uygulama Yapılandırma deposunda bulunduğuna göre, Store projesinin bunu okuyabilmesi için bazı değişikliklerin yapılması gerektiriyor.

Kodu gözden geçirme

IDE'deki gezgin bölmesindeki dizinleri gözden geçirin. Üç proje olduğunu unutmayın: DataEntities, Productsve Store. Store projesi Blazor uygulamasıdır. Products projesi, ürün hizmetini içeren bir .NET Standard kitaplığıdır. DataEntities projesi, ürün modelini içeren bir .NET Standard kitaplığıdır.

Uygulamanızı Uygulama Yapılandırma deposuna bağlama

ASP.NET Core uygulamasındaki Uygulama Yapılandırma deposundan değerlere erişmek için, Uygulama Yapılandırması için yapılandırma sağlayıcısı gereklidir.

Store projenize aşağıdaki değişiklikleri uygulayın:

  1. Terminal penceresinde Mağaza klasörüne gidin:

    cd dotnet-feature-flags/Store
    
  2. Uygulama Yapılandırma hizmeti için .NET yapılandırma sağlayıcısını içeren bir NuGet paketi yüklemek için aşağıdaki komutu çalıştırın:

    dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
    dotnet add package Microsoft.FeatureManagement.AspNetCore
    dotnet add package Microsoft.Extensions.Configuration.AzureAppConfiguration
    
  3. Store/Program.cs dosyasını açın.

  4. Dosyanın en üstüne yeni paket başvurularını ekleyin:

    using Microsoft.FeatureManagement;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.Configuration.AzureAppConfiguration;
    
  5. Bu kodu AddAzureAppConfiguration kod açıklamasının altına ekleyin .

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

    Yukarıdaki kod parçacığında:

    • Connect yöntemi, Uygulama Yapılandırma deposunda kimlik doğrulaması yapar. Bağlantı dizesinin ConnectionStrings:AppConfigortam değişkeni olarak geçirildiğini hatırlayın.
    • UseFeatureFlags yöntemi, Özellik Yönetimi kitaplığının Uygulama Yapılandırma deposundan özellik bayraklarını okumasını sağlar.
    • İki builder.Services çağrısı, Özellik Yönetimi kitaplığının hizmetlerini uygulamanın bağımlılık enjeksiyonu kapsayıcısına kaydeder.
  6. Dosyanın alt kısmında, Uygulama Yapılandırması ara yazılımını ekle'nin altına şu kodu ekleyin:

    app.UseAzureAppConfiguration();
    

    Yukarıdaki kod, uygulama yapılandırması ara yazılımını istek işlem hattına ekler. Ara yazılım, gelen her istek için Özellik Yönetimi parametreleri için bir yenileme işlemi tetikler. Ardından yenileme ayarlarına göre değerleri almak için mağazaya ne zaman bağlanacaklarına karar vermek AzureAppConfiguration sağlayıcıya bağlıdır.

Satış başlığını etkinleştirme

Uygulamanız artık özellik bayrağını okuyabilir, ancak bir satışın açık olduğunu göstermek için ürünler sayfasının güncelleştirilmesi gerekir. Aşağıdaki adımları tamamlayın:

  1. Store/Components/Pages/Products.razor dosyasını açın.

  2. Dosyanın en üstüne aşağıdaki kodu ekleyin:

    @using Microsoft.FeatureManagement
    @inject IFeatureManager FeatureManager
    

    Yukarıdaki kod Özellik Yönetimi kitaplığının ad alanlarını içeri aktarır ve IFeatureManager arabirimini bileşene ekler.

  3. @code bölümünde, özellik bayrağının durumunu depolamak için aşağıdaki değişkeni ekleyin:

    private bool saleOn = false;  
    
  4. OnInitializedAsync yöntemine aşağıdaki kodu ekleyin:

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

    yöntemi aşağıdaki kod gibi görünmelidir:

    protected override async Task OnInitializedAsync()
    {
        saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");
    
        // Simulate asynchronous loading to demonstrate streaming rendering
        products = await ProductService.GetProducts();
    }
    
  5. 26. satırdaki <!-- Add a sales alert for customers --> açıklamasının altına aşağıdaki kodu ekleyin:

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

    Özellik bayrağı etkinleştirilmişse yukarıdaki kod bir satış uyarısı görüntüler.

Uygulamayı oluşturma

  1. Tüm değişikliklerinizi kaydettiğinizden ve dotnet-feature-flags dizininde olduğunuzdan emin olun. Terminalde aşağıdaki komutu çalıştırın:

    dotnet publish /p:PublishProfile=DefaultContainer 
    
  2. Docker kullanarak uygulamayı çalıştırın:

    docker compose up
    

Özellik bayrağını test etme

Özellik bayrağının bir kod alanında beklendiği gibi çalıştığını doğrulamak için aşağıdaki adımları tamamlayın:

  1. BAĞLANTI NOKTALARI sekmesine geçin, ardından Ön Uç bağlantı noktasının yerel adresinin sağındaki dünya simgesini seçin. Tarayıcı giriş sayfasında yeni bir sekme açar.
  2. Ürünler'i seçin.

Visual Studio Code'ı yerel olarak kullanıyorsanız http://localhost:32000/productsaçın.

Ürünler sayfasındaki satış uyarısını gösteren ekran görüntüsü.

Azure portalında özellik bayrağını etkinleştirebilir ve devre dışı bırakabilir ve bayrağın çalıştığını görmek için ürünler sayfasını yenileyebilirsiniz.