Partager via


Démarrage rapide : Ajouter des indicateurs de fonctionnalité à une application Aspire

Dans ce guide de démarrage rapide, vous allez créer un indicateur de fonctionnalité dans Azure App Configuration et l’utiliser pour contrôler dynamiquement la disponibilité d’une nouvelle page web dans une application Aspire sans le redémarrer ou le redéployer.

La prise en charge de la gestion des fonctionnalités étend la fonctionnalité de configuration dynamique dans App Configuration. L’exemple de ce guide de démarrage rapide s’appuie sur l’application Aspire introduite dans le didacticiel de configuration dynamique. Avant de continuer, terminez le guide de démarrage rapide et le tutoriel pour créer une application Aspire avec une configuration dynamique en premier.

Prerequisites

Suivez les documents pour créer une solution Aspire avec une configuration dynamique.

Créer un indicateur de fonctionnalité

Ajoutez un indicateur de fonctionnalité appelé Bêta au magasin App Configuration (créé dans les étapes prérequises ) et laissez l’étiquette et la description avec leurs valeurs par défaut. Pour plus d’informations sur l’ajout d’indicateurs de fonctionnalité à un magasin à l’aide du Portail Azure ou de CLI, accédez à Créer un indicateur de fonctionnalité.

Capture d’écran de l’ajout d’un indicateur de fonctionnalité appelé Bêta.

Ajoutez la clé-valeur suivante via l’interface utilisateur de l’émulateur App Configuration.

Key Type de contenu Valeur
.appconfig.featureflag/Beta application/vnd.microsoft.appconfig.ff+json ; charset=utf-8 {"id » :"Beta »,"enabled » :false}

Capture d’écran de l’ajout d’un indicateur de fonctionnalité à l’émulateur.

Les indicateurs de fonctionnalité sont des valeurs clés spéciales qui définissent des indicateurs de fonctionnalité Microsoft. Les fournisseurs de configuration identifient l’indicateur de fonctionnalité par leur type de contenu et leur préfixe de clé spécifiques. La valeur d’un indicateur de fonctionnalité est un objet json qui suit Microsoft Feature Flag schema.

  • Type de contenu de l’indicateur de fonctionnalité : application/vnd.microsoft.appconfig.ff+json;charset=utf-8
  • Préfixe de clé d’indicateur de fonctionnalité : .appconfig.featureflag/

Utiliser un indicateur de fonctionnalité

  1. Accédez au Web répertoire du projet (créé dans les étapes prérequises ). Exécutez la commande suivante pour ajouter le Microsoft.FeatureManagement.AspNetCore package Nuget.

    dotnet add package Microsoft.FeatureManagement.AspNetCore
    
  2. Ouvrez Program.cs et ajoutez un appel de la méthode UseFeatureFlags à l’intérieur de l’appel AddAzureAppConfiguration. Vous pouvez vous connecter à App Configuration à l’aide de Microsoft Entra ID (recommandé) ou d’une chaîne de connexion. L’extrait de code suivant illustre l’utilisation de Microsoft Entra ID.

    builder.AddAzureAppConfiguration(
        "appconfiguration",
        configureOptions: options =>
        {
            // Load all keys that start with `TestApp:` and have no label.
            options.Select("TestApp:*", LabelFilter.Null);
            // Reload configuration if any key-values have changed.
            options.ConfigureRefresh(refreshOptions =>
                refreshOptions.RegisterAll());
            // Load all feature flags with no label
            options.UseFeatureFlags();
        });
    

    Conseil / Astuce

    Lorsqu’aucun paramètre n’est passé à la méthode UseFeatureFlags, elle charge tous les indicateurs de fonctionnalité sans étiquette dans votre magasin App Configuration. L’intervalle d’actualisation par défaut des indicateurs de fonctionnalité est de 30 secondes. Vous pouvez personnaliser ce comportement via le paramètre FeatureFlagOptions. Par exemple, l’extrait de code suivant charge uniquement les indicateurs de fonctionnalité qui commencent par TestApp: dans leur nom de clé et ont l’étiquette dev. Le code modifie également l’intervalle d’actualisation à 5 minutes. Notez que cet intervalle d’actualisation est distinct de celui pour les valeurs de clé normales.

    options.UseFeatureFlags(featureFlagOptions =>
    {
        featureFlagOptions.Select("TestApp:*", "dev");
        featureFlagOptions.CacheExpirationInterval = TimeSpan.FromMinutes(5);
    });
    
  3. Ajoutez la gestion des fonctionnalités à la collection de services de votre application en appelant AddFeatureManagement.

    Mettez à jour Program.cs avec le code suivant.

    // Existing code in Program.cs
    // ... ...
    
    // Add Azure App Configuration middleware to the container of services.
    builder.Services.AddAzureAppConfiguration();
    
    // Add feature management to the container of services.
    builder.Services.AddFeatureManagement();
    
    var app = builder.Build();
    
    // The rest of existing code in program.cs
    // ... ...
    

    Ajoutez using Microsoft.FeatureManagement; en haut du fichier si ce code n’est pas présent.

  4. Ajoutez une nouvelle page Razor nommée Beta.razor sous le répertoire Components/Pages .

    @page "/beta"
    
    @inject IFeatureManager FeatureManager
    
    @if (isBetaEnabled)
    {
        <h1>This is the beta website.</h1>
    } 
    else
    {
        <h1>Not found.</h1>
    }
    
    @code {
        private bool isBetaEnabled;
    
        protected override async Task OnInitializedAsync()
        {
            isBetaEnabled = await FeatureManager.IsEnabledAsync("Beta");
        }
    }
    
  5. Ouvrez _Imports.razor et importez l’espace de noms de gestion des fonctionnalités.

    @using Microsoft.FeatureManagement
    
  6. Ouvrez NavMenu.razor dans le répertoire Components/Layout .

    Injectez IVariantFeatureManager en haut du fichier.

    @inject IVariantFeatureManager FeatureManager
    
    <div class="top-row ps-3 navbar navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="">AspireApp</a>
        </div>
    </div>
    

    Ajoutez le code suivant.

    // Existing code
    // ... ...
    <div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
        <nav class="nav flex-column">
            // Existing code
            // ... ...
    
            @if (isBetaEnabled)
            {
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="beta">
                        <span class="bi bi-list-nested" aria-hidden="true"></span> Beta
                    </NavLink>
                </div>
            }
        </nav>
    </div>
    
    @code {
        private bool isBetaEnabled;
    
        protected override async Task OnInitializedAsync()
        {
            isBetaEnabled = await FeatureManager.IsEnabledAsync("Beta");
        }
    }
    

Exécutez l’application localement.

  1. Exécutez le projet AppHost. Accédez au tableau de bord Aspire et ouvrez l’application web.

    Capture d’écran d’une application web avec trois boutons sur la barre latérale.

  2. Dans le portail Azure, accédez au Gestionnaire de fonctionnalités de votre magasin App Configuration et recherchez l’indicateur de fonctionnalité bêta . Activez l’indicateur en cochant la case située sous Activé.

  3. Actualisez la page quelques fois. Lorsque la fenêtre d’intervalle d’actualisation passe, la page s’affiche avec du contenu mis à jour.

    Capture d’écran d’une application web avec le bouton Bêta dans la barre latérale.

  4. Cliquez sur le bouton Bêta . Vous accédez à la page bêta que vous avez activée dynamiquement.

    Capture d’écran de la page Bêta.

Exécutez l’application localement.

  1. Exécutez le projet AppHost. Accédez au tableau de bord Aspire et ouvrez l’application web.

    Capture d’écran d’une application web avec trois boutons sur la barre latérale.

  2. Accédez à l’émulateur, modifiez la valeur de l’indicateur de fonctionnalité pour l’activer.

    Key Valeur
    appconfig.featureflag/beta {"id » :"Beta »,"enabled » :true}
  3. Actualisez la page quelques fois. Lorsque la fenêtre d’intervalle d’actualisation passe, la page s’affiche avec du contenu mis à jour.

    Capture d’écran d’une application web avec le bouton Bêta dans la barre latérale.

  4. Cliquez sur le bouton Bêta . Vous accédez à la page bêta que vous avez activée dynamiquement.

    Capture d’écran de la page Bêta.

Étapes suivantes

Dans ce guide de démarrage rapide, vous avez ajouté la fonctionnalité de gestion des fonctionnalités à une application Aspire en plus de la configuration dynamique. La bibliothèque Microsoft.FeatureManagement.AspNetCore offre une intégration aux applications ASP.NET Core, notamment la gestion des fonctionnalités dans les actions du contrôleur MVC, les pages razor, les vues, les itinéraires et les intergiciels. Pour obtenir la liste complète des fonctionnalités de la bibliothèque de gestion des fonctionnalités .NET, passez au document suivant.

Bien qu’un indicateur de fonctionnalité vous permette d’activer ou de désactiver des fonctionnalités dans votre application, vous pouvez personnaliser un indicateur de fonctionnalité en fonction de la logique de votre application. Les filtres de fonctionnalité vous permettent d’activer un indicateur de fonctionnalité de manière conditionnelle. Pour plus d’informations, passez au tutoriel suivant.

Azure App Configuration propose des filtres de fonctionnalités intégrés qui vous permettent d’activer un indicateur de fonctionnalité uniquement pendant une période spécifique ou auprès d’un public ciblé particulier de votre application. Pour plus d’informations, passez au tutoriel suivant.

Pour activer la fonctionnalité de gestion des fonctionnalités pour d’autres types d’applications, passez aux didacticiels suivants.

Pour en savoir plus sur la gestion des indicateurs de fonctionnalités dans Azure App Configuration, passez au tutoriel suivant.