Meluncurkan fitur ke audiens yang ditargetkan dalam aplikasi Node.js

Dalam panduan ini, Anda akan menggunakan filter penargetan untuk meluncurkan fitur ke audiens yang ditargetkan untuk aplikasi Node.js Anda. Untuk informasi selengkapnya tentang filter penargetan, lihat Meluncurkan fitur ke audiens yang ditargetkan.

Prasyarat

Sebuah akun Azure dengan langganan aktif. Buat akun gratis.
Penyimpanan App Configuration, seperti yang ditunjukkan dalam tutorial untuk membuat penyimpanan.
Bendera fitur Beta dengan filter penargetan. Buat bendera fitur.
Versi LTS dari Node.js.

Membuat aplikasi web dengan bendera fitur

Di bagian ini, Anda membuat aplikasi web yang menggunakan bendera fitur Beta untuk mengontrol akses ke versi beta halaman web.

Menyiapkan proyek Node.js Express

Buat folder yang disebut targeting-filter-tutorial dan inisialisasi proyek.

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

Pasang paket berikut.

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

Buat file baru bernama app.js dan tambahkan kode berikut.

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

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

Hubungkan ke Azure App Configuration

Perbarui app.js dan tambahkan kode berikut.

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

Anda tersambung ke Azure App Configuration untuk memuat bendera fitur, mengaktifkan refresh otomatis, dan membuat FeatureManager objek untuk mengakses bendera fitur nanti. Middleware ditambahkan untuk memperbarui konfigurasi sebelum setiap permintaan.

Perbarui kode untuk memastikan server Express dimulai hanya setelah konfigurasi berhasil diinisialisasi.

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

Menggunakan bendera fitur

Tambahkan kode berikut ke file app.js untuk mengonfigurasi handler rute untuk server Express. Server akan melayani konten yang berbeda berdasarkan apakah bendera fitur Beta diaktifkan.

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

Mengaktifkan penargetan untuk aplikasi web

Konteks penargetan diperlukan saat mengevaluasi fitur yang penargetannya diaktifkan. Untuk secara eksplisit memberikan konteks ini untuk evaluasi fitur, Anda dapat meneruskannya sebagai parameter ke featureManager.isEnabled metode .

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

Dalam aplikasi web, konteks penargetan juga dapat disediakan sebagai konteks sekitar dengan menerapkan antarmuka ITargetingContextAccessor . Konteks penargetan ambient berarti bahwa informasi penargetan secara otomatis diambil dari lingkungan, seperti permintaan HTTP saat ini, tanpa perlu meneruskannya secara eksplisit ke setiap pemanggilan featureManager.isEnabled().

Anda menggunakan konteks penargetan lingkungan dalam tutorial ini.

Tambahkan kode berikut setelah deklarasi server Ekspres. Menggunakan AsyncLocalStorage untuk menyimpan permintaan saat ini, memungkinkan manajer fitur untuk secara otomatis mengambil konteks penargetan melalui panggilan balik aksesor konteks penargetan. Untuk detail selengkapnya, lihat Menggunakan AsyncLocalStorage untuk konteks permintaan.

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

Saat membuat FeatureManager, teruskan akses konteks penargetan ke FeatureManagerOptions.

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

Setelah menyelesaikan langkah-langkah sebelumnya, file app.js Anda sekarang akan berisi implementasi lengkap berikut.

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

Menargetkan filter dalam tindakan

Atur variabel lingkungan bernama AZURE_APPCONFIG_ENDPOINT ke titik akhir dari penyimpanan App Configuration Anda yang ditemukan di bagian Gambaran Umum penyimpanan Anda pada portal Azure.

Jika Anda menggunakan perintah Windows, jalankan perintah berikut dan hidupkan ulang perintah untuk memungkinkan perubahan berlaku:
```
setx AZURE_APPCONFIG_ENDPOINT "<endpoint-of-your-app-configuration-store>"
```
Jika Anda menggunakan PowerShell, jalankan perintah berikut:
```
$Env:AZURE_APPCONFIG_ENDPOINT = "<endpoint-of-your-app-configuration-store>"
```
Jika Anda menggunakan macOS atau Linux, jalankan perintah berikut:
```
export AZURE_APPCONFIG_ENDPOINT='<endpoint-of-your-app-configuration-store>'
```
Jalankan aplikasi.
```
node app.js
```
Buka browser Anda dan navigasikan ke localhost:8080. Anda akan melihat tampilan default aplikasi.
1. Tambahkan userId sebagai parameter kueri di URL untuk menentukan ID pengguna. Kunjungi localhost:8080/?userId=test@contoso.com. Anda melihat halaman beta, karena test@contoso.com ditentukan sebagai pengguna yang ditargetkan.
Kunjungi localhost:8080/?userId=testuser@contoso.com. Anda tidak dapat melihat halaman beta, karena testuser@contoso.com ditentukan sebagai pengguna yang dikecualikan.

Langkah selanjutnya

Untuk mempelajari selengkapnya tentang filter fitur, lanjutkan ke dokumen berikut.

Mengaktifkan fitur bersyarat dengan penyaring fitur

Mengaktifkan fitur sesuai jadwal

Untuk rundown fitur lengkap pustaka manajemen fitur JavaScript, lanjutkan ke dokumen berikut.

Manajemen Fitur .NET

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-07-10