Functies implementeren voor doelgroepen in een Node.js-toepassing

2025-07-10

In deze handleiding gebruikt u het doelfilter om een functie uit te rollen voor doelgroepen voor uw Node.js toepassing. Zie Functies implementeren voor doelgroepen voor meer informatie over het doelfilter.

Vereiste voorwaarden

Een Azure-account met een actief abonnement. Maak gratis een account.
Een App Configuration-winkel, zoals uiteengezet in de zelfstudie voor het maken van een winkel.
Een bètafunctievlag met doelfilter. Maak de functievlag.
LTS-versies van Node.js.

Een webtoepassing maken met een functievlag

In deze sectie maakt u een webtoepassing die gebruikmaakt van de vlag Bètafunctie om de toegang tot de bètaversie van een webpagina te beheren.

Een Node.js Express-project instellen

Maak een map met de naam targeting-filter-tutorial en initialiseer het project.
```
mkdir targeting-filter-tutorial
cd targeting-filter-tutorial
npm init -y
```

Installeer de volgende pakketten.

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

Maak een nieuw bestand met de naamapp.js en voeg de volgende code toe.

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

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

Verbinding maken met Azure App Configuration

Werk de app.js bij en voeg de volgende code toe.

// 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 ...

U maakt verbinding met Azure App Configuration om functievlagmen te laden, automatisch vernieuwen in te schakelen en een FeatureManager object te maken voor later toegang tot functievlagmen. Voor elke aanvraag wordt een middleware toegevoegd om de configuratie te vernieuwen.

Werk de code bij om ervoor te zorgen dat de Express-server pas wordt gestart nadat de configuratie is geïnitialiseerd.

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

De functievlag gebruiken

Voeg de volgende code toe aan het app.js-bestand om de routehandler voor de Express-server te configureren. De server levert verschillende inhoud op basis van of de bètafunctievlag is ingeschakeld.

// 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 ...

Targeting inschakelen voor de webtoepassing

Er is een doelcontext vereist bij het evalueren van functies waarvoor targeting is ingeschakeld. Als u deze context expliciet wilt opgeven voor functie-evaluatie, kunt u deze als parameter doorgeven aan de featureManager.isEnabled methode.

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

In een webtoepassing kan de doelcontext ook worden aangeboden als omgevingscontext door de ITargetingContextAccessor-interface te implementeren. Een omgevingscontext betekent dat doelgegevens automatisch worden opgehaald uit de omgeving, zoals de huidige HTTP-aanvraag, zonder dat u deze expliciet hoeft door te geven aan elke featureManager.isEnabled() aanroep.

In deze zelfstudie gebruikt u omgevingsgerichte context.

Voeg de volgende code toe na de declaratie van de Express-server. Het gebruikt AsyncLocalStorage om de huidige aanvraag op te slaan, zodat de functiebeheerder automatisch de doelcontext kan ophalen via een callback van een doelcontexttoegangsfunctie. Zie AsyncLocalStorage gebruiken voor aanvraagcontext voor meer informatie.

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 ...

Bij het samenstellen van de FeatureManager, geeft u de doelcontexttoegangselement door aan de FeatureManagerOptions.

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

Nadat u de vorige stappen hebt voltooid, moet uw app.js-bestand nu de volgende volledige implementatie bevatten.

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}`);
        });
    })

Doelfilter in actie

Stel de omgevingsvariabele met de naam AZURE_APPCONFIG_ENDPOINT in op het eindpunt van uw App Configuration-opslag gevonden onder het Overzicht van uw opslag in de Azure-portal.

Als u de Windows-opdrachtprompt gebruikt, voert u de volgende opdracht uit en start u de opdrachtprompt opnieuw om de wijziging door te voeren:
```
setx AZURE_APPCONFIG_ENDPOINT "<endpoint-of-your-app-configuration-store>"
```
Als u PowerShell gebruikt, voert u de volgende opdracht uit:
```
$Env:AZURE_APPCONFIG_ENDPOINT = "<endpoint-of-your-app-configuration-store>"
```
Als u macOS of Linux gebruikt, voert u de volgende opdracht uit:
```
export AZURE_APPCONFIG_ENDPOINT='<endpoint-of-your-app-configuration-store>'
```
Voer de toepassing uit.
```
node app.js
```
Open uw browser en navigeer naar localhost:8080. U ziet nu de standaardweergave van de app.
1. Voeg userId toe als een queryparameter in de URL om de gebruikers-id op te geven. Bezoek localhost:8080/?userId=test@contoso.com. U ziet de bètapagina, omdat test@contoso.com is opgegeven als een doelgebruiker.
Bezoek localhost:8080/?userId=testuser@contoso.com. U kunt de bètapagina niet zien, omdat testuser@contoso.com deze is opgegeven als een uitgesloten gebruiker.