Partilhar via

Distribuir funcionalidades para públicos-alvo em uma aplicação Node.js

Neste guia, você usará o filtro de segmentação para implantar um recurso para públicos-alvo para seu aplicativo Node.js. Para obter mais informações sobre o filtro de segmentação, consulte Implantar recursos para públicos-alvo.

Pré-requisitos

Criar um aplicativo Web com um sinalizador de recurso

Nesta seção, você cria um aplicativo Web que usa o sinalizador de recurso Beta para controlar o acesso à versão beta de uma página da Web.

Configurar projeto Node.js Express

  1. Crie uma pasta chamada targeting-filter-tutorial e inicialize o projeto.

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

  2. Instale os seguintes pacotes.

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

  3. Crie um novo arquivo chamado app.js e adicione o código a seguir.

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

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

Conectar-se à Configuração do Aplicativo do Azure

  1. Atualize o app.js e adicione o código a seguir.

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

    Você se conecta à Configuração do Aplicativo do Azure para carregar sinalizadores de recursos, habilitar a atualização automática e criar um FeatureManager objeto para acessar sinalizadores de recursos posteriormente. Um middleware é adicionado para atualizar a configuração antes de cada solicitação.

  2. Atualize o código para garantir que o servidor Express seja iniciado somente depois que a configuração tiver sido inicializada com êxito.

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

Usar o sinalizador de recurso

Adicione o seguinte código ao arquivo app.js para configurar o manipulador de rotas para o servidor Express. O servidor servirá conteúdos diferentes com base no facto de o sinalizador de funcionalidade Beta estar ativado.

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

Habilitar a segmentação para o aplicativo Web

Um contexto de segmentação é necessário ao avaliar recursos com a segmentação habilitada. Para fornecer explicitamente esse contexto para avaliação de recursos, você pode passá-lo como um parâmetro para o featureManager.isEnabled método.

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

Em um aplicativo Web, o contexto de direcionamento também pode ser fornecido como um contexto ambiente implementando a interface ITargetingContextAccessor . Um contexto de segmentação ambiental significa que as informações de segmentação são obtidas automaticamente do ambiente, tal como a solicitação HTTP atual, sem a necessidade de passá-las explicitamente para cada featureManager.isEnabled() chamada.

Você usa o contexto de segmentação ambiental neste tutorial.

  1. Adicione o seguinte código após a declaração do servidor Express. Ele usa AsyncLocalStorage para armazenar a solicitação atual, permitindo que o gestor de funcionalidades recupere automaticamente o contexto de segmentação por meio de um retorno de chamada do acessador de contexto de segmentação. Para obter mais detalhes, consulte Usando AsyncLocalStorage para contexto de solicitação.

    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. Ao construir o FeatureManager, passe o método de acesso ao contexto de alvo para o FeatureManagerOptions.

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

Depois de concluir as etapas anteriores, seu arquivo app.js agora deve conter a seguinte implementação 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 segmentação em ação

  1. Defina a variável de ambiente chamada AZURE_APPCONFIG_ENDPOINT para o ponto de extremidade da sua loja de Configuração de Aplicativos encontrado em Visão geral da sua loja no portal do Azure.

    Se você usar o prompt de comando do Windows, execute o seguinte comando e reinicie o prompt de comando para permitir que a alteração entre em vigor:

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

    Se você usar o PowerShell, execute o seguinte comando:

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

    Se você usa macOS ou Linux, execute o seguinte comando:

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

  2. Execute o aplicativo.

    node app.js

  3. Abra o navegador e navegue até localhost:8080. Você deve ver a visualização padrão do aplicativo.

    Captura de ecrã da aplicação, mostrando a mensagem de saudação predefinida.

    1. Adicione userId como um parâmetro de consulta na URL para especificar o ID do usuário. Visite localhost:8080/?userId=test@contoso.com. Você vê a página beta, porque test@contoso.com é especificado como um usuário alvo.

    Captura de ecrã da aplicação, mostrando a página beta.

  5. Visite localhost:8080/?userId=testuser@contoso.com. Você não pode ver a página beta, porque testuser@contoso.com é especificado como um usuário excluído.

    Captura de ecrã da aplicação, mostrando o conteúdo predefinido.

Próximos passos

Para saber mais sobre os filtros de recursos, continue para os seguintes documentos.

Habilitar recursos condicionais com filtros de recursos

Ativar funcionalidades num agendamento

Para obter o resumo completo dos recursos da biblioteca de gerenciamento de recursos JavaScript, continue para o documento a seguir.

Gerenciamento de recursos .NET

  • Last updated on