Megosztás a következőn keresztül:


Szolgáltatások bevezetése a célközönségek számára egy Node.js alkalmazásban

Ebben az útmutatóban a célzási szűrő segítségével fogja bevezetni a funkciót az Ön Node.js-alkalmazásának célzott közönségei számára. A célzási szűrővel kapcsolatos további információkért lásd : Szolgáltatások bevezetése a célközönségek számára.

Előfeltételek

Webalkalmazás létrehozása funkciójelölővel

Ebben a szakaszban egy webalkalmazást hoz létre, amely a bétaverziós funkciójelzővel szabályozza a weblap bétaverzióhoz való hozzáférését.

Node.js Express-projekt beállítása

  1. Hozzon létre egy mappát, targeting-filter-tutorial és inicializálja a projektet.

    mkdir targeting-filter-tutorial
    cd targeting-filter-tutorial
    npm init -y
    
  2. Telepítse a következő csomagokat.

    npm install @azure/app-configuration-provider
    npm install @microsoft/feature-management
    npm install express
    
  3. Hozzon létre egy app.js nevű új fájlt, és adja hozzá a következő kódot.

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

Csatlakozás az Azure-alkalmazáskonfigurációhoz

  1. Frissítse a app.js , és adja hozzá a következő kódot.

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

    Az Azure App Configurationhoz csatlakozva betöltheti a funkciójelzőket, engedélyezheti az automatikus frissítést, és létrehozhat egy FeatureManager objektumot a funkciójelzők későbbi eléréséhez. A rendszer minden kérés előtt hozzáad egy köztes szoftvereket a konfiguráció frissítéséhez.

  2. Frissítse a kódot, hogy az Express-kiszolgáló csak a konfiguráció sikeres inicializálása után induljon el.

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

A funkciójelző használata

Adja hozzá a következő kódot a app.js fájlhoz az Express-kiszolgáló útvonalkezelőjének konfigurálásához. A kiszolgáló különböző tartalmakat fog kiszolgálni attól függően, hogy engedélyezve van-e a bétaverzió funkciójelzője.

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

Célzás engedélyezése a webalkalmazáshoz

Célzási környezetre van szükség a funkciók célzás engedélyezve történő kiértékelésekor. Ha kifejezetten meg szeretné adni ezt a környezetet a funkcióértékeléshez, paraméterként továbbíthatja azt a featureManager.isEnabled metódusnak.

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

A webalkalmazásokban a célkörnyezet környezeti környezetként is megadható az ITargetingContextAccessor felület implementálásával . A környezeti célzási környezet azt jelenti, hogy a célzási információk automatikusan lekérhetők a környezetből, például az aktuális HTTP-kérésből, anélkül, hogy külön át kellene adni azokat az egyes featureManager.isEnabled() hívásoknak.

Ebben az oktatóanyagban környezeti célzási környezetet használ.

  1. Adja hozzá a következő kódot az Express server deklarációja után. Az aktuális kérés tárolására szolgál AsyncLocalStorage , lehetővé téve, hogy a szolgáltatáskezelő automatikusan lekérje a célzási környezetet egy célkörnyezeti kiegészítő visszahívásával. További részletekért lásd: Az AsyncLocalStorage használata a kérelemkörnyezethez.

    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 ...
    
  2. A FeatureManager konstruktálásakor adja át a célzási kontextus elérőt a FeatureManagerOptions.

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

Az előző lépések elvégzése után a app.js fájlnak tartalmaznia kell a következő teljes implementációt.

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

Célzási szűrő működés közben

  1. Állítsa a AZURE_APPCONFIG_ENDPOINT nevű környezeti változót az Alkalmazáskonfigurációs áruház végpontjára, amely az Azure Portalon található áruház áttekintésében található.

    Ha a Windows parancssorát használja, futtassa a következő parancsot, és indítsa újra a parancssort a módosítás érvénybe lépésének engedélyezéséhez:

    setx AZURE_APPCONFIG_ENDPOINT "<endpoint-of-your-app-configuration-store>"
    

    Ha a PowerShellt használja, futtassa a következő parancsot:

    $Env:AZURE_APPCONFIG_ENDPOINT = "<endpoint-of-your-app-configuration-store>"
    

    MacOS vagy Linux használata esetén futtassa a következő parancsot:

    export AZURE_APPCONFIG_ENDPOINT='<endpoint-of-your-app-configuration-store>'
    
  2. Indítsa el az alkalmazást.

    node app.js
    
  3. Nyissa meg a böngészőt, és navigáljon a localhost:8080 címre. Az alkalmazás alapértelmezett nézetének kell megjelennie.

    Képernyőkép az alkalmazásról, amelyen az alapértelmezett üdvözlő üzenet látható.

    1. Adja hozzá userId lekérdezési paraméterként az URL-címhez a felhasználói azonosító megadásához. Látogasson el localhost:8080/?userId=test@contoso.com. Megjelenik a bétaoldal, mert test@contoso.com célfelhasználóként van megadva.

    Képernyőkép az alkalmazásról, amelyen a bétaoldal látható.

  4. Látogasson el localhost:8080/?userId=testuser@contoso.com. A bétaoldal nem látható, mert testuser@contoso.com kizárt felhasználóként van megadva.

    Képernyőkép az alkalmazásról, amelyen az alapértelmezett tartalom látható.

Következő lépések

A funkciószűrőkről a következő dokumentumokban olvashat bővebben.

A JavaScript szolgáltatásfelügyeleti kódtár teljes funkciólefutásához folytassa a következő dokumentumot.