Déployer des fonctionnalités pour les audiences ciblées dans une application Node.js

Dans ce guide, vous allez utiliser le filtre de ciblage pour déployer une fonctionnalité destinée aux audiences ciblées pour votre application Node.js. Pour plus d’informations sur le filtre de ciblage, consultez Déployer des fonctionnalités pour les audiences ciblées.

Conditions préalables

Un compte Azure avec un abonnement actif. Créez-en un gratuitement.
Un magasin App Configuration, comme illustré dans le didacticiel pour la création d’un magasin.
Indicateur de fonctionnalité bêta avec filtre de ciblage. Créer l’indicateur de fonctionnalité.
Versions LTS de Node.js.

Créez une application web avec un indicateur de fonctionnalité

Dans cette section, vous allez créer une application web qui utilise l’indicateur de fonctionnalité Bêta pour contrôler l’accès à la version bêta d’une page web.

Configurer un projet Node.js Express

Créez un dossier appelé targeting-filter-tutorial et initialisez le projet.
```
mkdir targeting-filter-tutorial
cd targeting-filter-tutorial
npm init -y
```

Installez les packages suivants :

npm install @azure/app-configuration-provider
npm install @microsoft/feature-management
npm install express

Créez un fichier nommé app.js et ajoutez le code suivant.

const express = require("express");
const server = express();
const port = "8080";

server.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

Se connecter à Azure App Configuration

Mettez à jour le app.js et ajoutez le code suivant.

// Existing code ...
const appConfigEndpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const { DefaultAzureCredential } = require("@azure/identity");
const { load } = require("@azure/app-configuration-provider");
const { FeatureManager, ConfigurationMapFeatureFlagProvider } = require("@microsoft/feature-management");

let appConfig;
let featureManager;

async function initializeConfig() {
    // Load feature flags from App Configuration.
    appConfig = await load(appConfigEndpoint, new DefaultAzureCredential(), {
        featureFlagOptions: {
            enabled: true,
            refresh: {
                enabled: true
            }
        }
    });

    // Create feature manager with feature flag provider that accesses feature flags from App Configuration.
    featureManager = new FeatureManager(
        new ConfigurationMapFeatureFlagProvider(appConfig));
}

// Use a middleware to refresh the configuration before each request.
server.use((req, res, next) => {
    appConfig.refresh();
    next();
});
// Existing code ...

Vous vous connectez à Azure App Configuration pour charger des indicateurs de fonctionnalité, activer l’actualisation automatique et créer un FeatureManager objet pour accéder aux indicateurs de fonctionnalité ultérieurement. Un intergiciel est ajouté pour actualiser la configuration avant chaque requête.

Mettez à jour le code pour vous assurer que le serveur Express démarre uniquement après l’initialisation de la configuration.

// Existing code ...
initializeConfig()
    .then(() => {
        // Start the express server.
        server.listen(port, () => {
            console.log(`Server is running at http://localhost:${port}`);
        });
    })

Utiliser l’indicateur de fonctionnalité

Ajoutez le code suivant au fichier app.js pour configurer le gestionnaire d’itinéraires pour le serveur Express. Le serveur servira différents contenus en fonction de l’activation de l’indicateur de fonctionnalité bêta .

// Existing code ...
server.get("/", async (req, res) => {
    const isBetaEnabled = await featureManager.isEnabled("Beta");
    const [title, message] = isBetaEnabled 
        ? ["Beta Page", "This is a beta page."]
        : ["Home Page", "Welcome."];
    
    res.send(
        `<!DOCTYPE html>
        <html>
            <head><title>${title}</title></head>
            <body style="display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;">
                <h1 style="text-align: center; font-size: 5rem;">${message}</h1>
            </body>
        </html>`
    );
});

initializeConfig()
// Existing code ...

Activer le ciblage pour l'application web

Un contexte de ciblage est requis lors de l’évaluation des fonctionnalités avec le ciblage activé. Pour fournir explicitement ce contexte pour l’évaluation des fonctionnalités, vous pouvez le transmettre en tant que paramètre à la featureManager.isEnabled méthode.

const isBetaEnabled = await featureManager.isEnabled("Beta", { userId: "UserA", groups: ["Group1"] });

Dans une application web, le contexte de ciblage peut également être fourni en tant que contexte ambiant en implémentant l’interface ITargetingContextAccessor . Un contexte de ciblage ambiant signifie que les informations de ciblage sont automatiquement récupérées à partir de l’environnement, telles que la requête HTTP actuelle, sans avoir à le transmettre explicitement à chaque featureManager.isEnabled() appel.

Vous utilisez le contexte de ciblage ambiant dans ce tutoriel.

Ajoutez le code suivant après la déclaration du serveur Express. Il utilise AsyncLocalStorage pour stocker la requête actuelle, ce qui permet au gestionnaire de fonctionnalités de récupérer automatiquement le contexte de ciblage via un rappel d’accesseur de contexte de ciblage. Pour plus d’informations, consultez Utilisation d’AsyncLocalStorage pour le contexte de requête.

const express = require("express");
const server = express();
const port = 8080;

const { AsyncLocalStorage } = require("async_hooks");
const requestAccessor = new AsyncLocalStorage();
// Use a middleware to store request context.
server.use((req, res, next) => {
    // Store the request in AsyncLocalStorage for this request chain.
    requestAccessor.run(req, () => {
        next();
    });
});

// Create a targeting context accessor that retrieves user data from the current request.
const targetingContextAccessor = {
    getTargetingContext: () => {
        // Get the current request from AsyncLocalStorage.
        const request = requestAccessor.getStore();
        if (!request) {
            return undefined;
        }
        const { userId, groups } = request.query;
        return {
            userId: userId,
            groups: groups ? groups.split(",") : [] 
        };
    }
};
// Existing code ...

Lors de la construction du FeatureManager, passez l’accesseur de contexte de ciblage au FeatureManagerOptions.

featureManager = new FeatureManager(
    new ConfigurationMapFeatureFlagProvider(appConfig),
    {
        targetingContextAccessor: targetingContextAccessor
    });

Une fois les étapes précédentes terminées, votre fichier app.js doit maintenant contenir l’implémentation complète suivante.

const express = require("express");
const server = express();
const port = 8080;

const { AsyncLocalStorage } = require("async_hooks");
const requestAccessor = new AsyncLocalStorage();
// Use a middleware to store request context
server.use((req, res, next) => {
    // Store the request in AsyncLocalStorage for this request chain
    requestAccessor.run(req, () => {
        next();
    });
});

// Create a targeting context accessor that retrieves user data from the current request
const targetingContextAccessor = {
    getTargetingContext: () => {
        // Get the current request from AsyncLocalStorage
        const request = requestAccessor.getStore();
        if (!request) {
            return undefined;
        }
        const { userId, groups } = request.query;
        return {
            userId: userId,
            groups: groups ? groups.split(",") : [] 
        };
    }
};

const appConfigEndpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const { DefaultAzureCredential } = require("@azure/identity");
const { load } = require("@azure/app-configuration-provider");
const { FeatureManager, ConfigurationMapFeatureFlagProvider } = require("@microsoft/feature-management");

let appConfig;
let featureManager;

async function initializeConfig() {
    // Load feature flags from App Configuration.
    appConfig = await load(appConfigEndpoint, new DefaultAzureCredential(), {
        featureFlagOptions: {
            enabled: true,
            refresh: {
                enabled: true
            }
        }
    });

    // Create feature manager with feature flag provider that accesses feature flags from App Configuration and targeting context accessor.
    featureManager = new FeatureManager(
        new ConfigurationMapFeatureFlagProvider(appConfig),
        {
            targetingContextAccessor: targetingContextAccessor
        });
}

// Use a middleware to refresh the configuration before each request
server.use((req, res, next) => {
    appConfig.refresh();
    next();
});

server.get("/", async (req, res) => {
    const isBetaEnabled = await featureManager.isEnabled("Beta");
    const [title, message] = isBetaEnabled 
        ? ["Beta Page", "This is a beta page."]
        : ["Home Page", "Welcome."];
    
    res.send(
        `<!DOCTYPE html>
        <html>
            <head><title>${title}</title></head>
            <body style="display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;">
                <h1 style="text-align: center; font-size: 5rem;">${message}</h1>
            </body>
        </html>`
    );
});

// Initialize the configuration and start the server
initializeConfig()
    .then(() => {
        // Start the express server.
        server.listen(port, () => {
            console.log(`Server is running at http://localhost:${port}`);
        });
    })

Filtre de ciblage en action

Définissez la variable d’environnement nommée AZURE_APPCONFIG_ENDPOINT sur le point de terminaison de votre magasin App Configuration qui se trouve sous la Vue d’ensemble de votre magasin dans le Portail Azure.

Si vous utilisez l’invite de commandes Windows, exécutez la commande suivante et redémarrez l’invite pour que la modification soit prise en compte :
```
setx AZURE_APPCONFIG_ENDPOINT "<endpoint-of-your-app-configuration-store>"
```
Si vous utilisez PowerShell, exécutez la commande suivante :
```
$Env:AZURE_APPCONFIG_ENDPOINT = "<endpoint-of-your-app-configuration-store>"
```
Si vous utilisez macOS ou Linux, exécutez la commande suivante :
```
export AZURE_APPCONFIG_ENDPOINT='<endpoint-of-your-app-configuration-store>'
```
Exécutez l’application.
```
node app.js
```
Ouvrez votre navigateur et accédez à localhost:8080. Vous devez voir l’affichage par défaut de l’application.
1. Ajoutez userId en tant que paramètre de requête dans l’URL pour spécifier l’ID utilisateur. Visitez localhost:8080/?userId=test@contoso.com. Vous voyez la page bêta, car test@contoso.com est spécifié en tant qu'utilisateur ciblé.
Visitez localhost:8080/?userId=testuser@contoso.com. Vous ne pouvez pas voir la page bêta, car testuser@contoso.com elle est spécifiée en tant qu’utilisateur exclu.

Étapes suivantes

Pour en savoir plus sur les filtres de fonctionnalités, consultez les documents suivants.

Activer des fonctionnalités conditionnelles avec des filtres de fonctionnalités

Activer des fonctionnalités selon une planification

Pour obtenir la liste complète des fonctionnalités de la bibliothèque de gestion des fonctionnalités JavaScript, passez au document suivant.

Gestion des fonctionnalités .NET

Rétroaction

Cette page vous a-t-elle été utile ?

Last updated on 2025-07-22