Compartir vía

Implementación de características para audiencias de destino en una aplicación Node.js

En esta guía, usará el filtro de selección de destino para implementar una característica para audiencias de destino para la aplicación Node.js. Para más información sobre el filtro de destino, consulte Implementación de características en audiencias de destino.

Prerrequisitos

Creación de una aplicación web con una marca de característica

En esta sección, creará una aplicación web que use la marca de característica Beta para controlar el acceso a la versión beta de una página web.

Configurar un proyecto de Node.js Express

  1. Cree una carpeta denominada targeting-filter-tutorial e inicialice el proyecto.

    mkdir targeting-filter-tutorial
cd targeting-filter-tutorial
npm init -y

  2. Instale los siguientes paquetes.

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

  3. Cree un nuevo archivo denominado app.js y agregue el código siguiente.

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

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

Conexión a Azure App Configuration

  1. Actualice el app.js y agregue el código siguiente.

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

    Se conecta a Azure App Configuration para cargar marcas de características, habilitar la actualización automática y crear un FeatureManager objeto para acceder a las marcas de características más adelante. Se agrega un middleware para actualizar la configuración antes de cada solicitud.

  2. Actualice el código para asegurarse de que el servidor Express se inicia solo después de inicializar correctamente la configuración.

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

Uso de la marca de características

Agregue el código siguiente al archivo app.js para configurar el controlador de rutas para el servidor Express. El servidor proporcionará contenido diferente en función de si la marca de características beta está habilitada.

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

Habilitación de la selección de destino para la aplicación web

Se requiere un contexto de segmentación al evaluar las funciones con la segmentación habilitada. Para proporcionar explícitamente este contexto para la evaluación de características, puede pasarlo como parámetro al featureManager.isEnabled método .

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

En una aplicación web, el contexto de destino también se puede proporcionar como contexto ambiente mediante la implementación de la interfaz ITargetingContextAccessor . Un contexto de destino de ambiente significa que la información de destino se recupera automáticamente del entorno, como la solicitud HTTP actual, sin necesidad de pasarla explícitamente a cada llamada a featureManager.isEnabled().

En este tutorial se usa el contexto de destino de ambiente.

  1. Agregue el código siguiente después de la declaración del servidor Express. Se utiliza AsyncLocalStorage para almacenar la solicitud actual, lo que permite al administrador de características recuperar automáticamente el contexto de destino a través de un callback del accesor de contexto de destino. Para obtener más información, consulte Uso de AsyncLocalStorage para el contexto de solicitud.

    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. Al construir el FeatureManager, pase el descriptor de acceso de contexto de destino a FeatureManagerOptions.

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

Después de completar los pasos anteriores, el archivo app.js ahora debe contener la siguiente implementación completa.

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

Filtro de selección de destino en acción

  1. Establezca la variable de entorno denominada AZURE_APPCONFIG_ENDPOINT en el punto de conexión del almacén de App Configuration que se encuentra en la Información general del almacén en Azure Portal.

    Si usa el símbolo del sistema de Windows, ejecute el siguiente comando y reinícielo para que se aplique el cambio:

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

    Si usa PowerShell, ejecute el siguiente comando:

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

    Si usa macOS o Linux, ejecute el siguiente comando:

    export AZURE_APPCONFIG_ENDPOINT='<endpoint-of-your-app-configuration-store>'

  2. Ejecute la aplicación.

    node app.js

  3. Abra el explorador web y vaya a localhost:8080. Debería ver la vista predeterminada de la aplicación.

    Captura de pantalla de la aplicación, en la que se muestra el mensaje de saludo predeterminado.

    1. Agregue userId como parámetro de consulta en la dirección URL para especificar el identificador de usuario. Visite localhost:8080/?userId=test@contoso.com. Verá la página beta, porque test@contoso.com se especifica como un usuario objetivo.

    Captura de pantalla de la aplicación, en la que se muestra la página beta.

  5. Visite localhost:8080/?userId=testuser@contoso.com. No puede ver la página beta, ya que testuser@contoso.com se especifica como un usuario excluido.

    Captura de pantalla de la aplicación, en la que se muestra el contenido predeterminado.

Pasos siguientes

Para obtener más información sobre los filtros de características, continúe con los siguientes documentos.

Habilitación de características condicionales con filtros de características

Habilitación de características según una programación

Para obtener la lista completa de características de la biblioteca de administración de características de JavaScript, continúe al siguiente documento.

Administración de características de .NET

  • Last updated on