Tutorial: Verwenden von Varianten-Featureflags in einer Node.js-Anwendung

In diesem Tutorial verwenden Sie Variantenfeatureflags zum Verwalten der Benutzeroberflächen für verschiedene Benutzersegmente in der Beispielanwendung Zitat des Tages. Sie verwenden das in Verwenden von Variantenfeatureflags erstellte Variantenfeatureflag. Erstellen Sie vor dem Fortfahren unbedingt das Variantenfeatureflag mit dem Namen Greeting (Begrüßung) im App Configuration-Speicher.

Voraussetzungen

LTS-Versionen von Node.js.
Befolgen Sie das Tutorial Verwenden von Variantenfeatureflags, und erstellen Sie das Variantenfeatureflag namens Greeting (Begrüßung).

Erstellen einer Node.js-Anwendung

Erstellen Sie einen Ordner namens quote-of-the-day und initialisieren Sie das Projekt.
```
mkdir quote-of-the-day
cd quote-of-the-day
npm init -y
```

Installieren Sie die folgenden Pakete.

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

Erstellen Sie eine neue Datei mit dem Namen server.js , und fügen Sie den folgenden Code hinzu.

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

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() {
    appConfig = await load(appConfigEndpoint, new DefaultAzureCredential(), {
        featureFlagOptions: {
            enabled: true,
            refresh: {
                enabled: true
            }
        }
    });

    featureManager = new FeatureManager(
        new ConfigurationMapFeatureFlagProvider(appConfig));
}

function startServer() {
    // Use a middleware to refresh the configuration before each request
    server.use((req, res, next) => {
        appConfig.refresh();
        next();
    });
    server.use(express.json());
    // Serve static index.html from the current folder
    server.use(express.static("."));

    // This API returns the different greeting messages based on the segment the user belongs to.
    // It evaluates a variant feature flag based on user context. The greeting message is retrieved from the variant configuration.
    server.get("/api/getGreetingMessage", async (req, res) => {
        const { userId, groups } = req.query;
        const variant = await featureManager.getVariant("Greeting", { userId: userId, groups: groups ? groups.split(",") : [] });
        res.status(200).send({ message: variant?.configuration });
    });

    server.post("/api/like", (req, res) => {
        const { UserId } = req.body;
        if (UserId === undefined) {
            return res.status(400).send({ error: "UserId is required" });
        }
        // Here you would typically emit a 'like' event to compare variants.
        res.status(200).send();
    });

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

// Initialize the configuration and start the server
initializeConfig()
    .then(() => {
        startServer();
    })
    .catch((error) => {
        console.error("Failed to load configuration:", error);
        process.exit(1);
    });

Erstellen Sie eine neue Datei mit dem Namen index.html , und fügen Sie den folgenden Code hinzu:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quote of the Day</title>
<style>
    .heart-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    }

    .heart-button:hover {
    background-color: #F0F0F0;
    }
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; min-height: 100vh; background-color: #f4f4f4;">
    <header style="background-color: white; border-bottom: 1px solid #eaeaea; display: flex; justify-content: space-between; align-items: center; font-family: 'Arial', sans-serif; font-size: 16px;">
    <div style="font-size: 1.25em; color: black;">QuoteOfTheDay</div>
    </header>

    <main style="display: flex; justify-content: center; align-items: center; flex-grow: 1;">
    <div style="background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 700px; position: relative; text-align: left;">
        <div id="quote-content">
        <h2 id="greeting">Quote of the Day</h2>
        <blockquote style="font-size: 2em; font-style: italic; color: #4EC2F7; margin: 0 0 20px 0; line-height: 1.4;">
            <p>"You cannot change what you are, only what you do."</p>
            <footer style="font-size: 0.55em; color: black; font-family: 'Arial', sans-serif; font-style: normal; font-weight: bold;">— Philip Pullman</footer>
        </blockquote>
        <div style="position: absolute; top: 10px; right: 10px; display: flex;">
            <button class="heart-button" id="like-button">
            <span id="heart-icon" style="color: #ccc">♥</span>
            </button>
        </div>
        </div>
        <div id="loading" style="display: none;">
        <p>Loading</p>
        </div>
    </div>
    </main>
</div>

<script>
    // extract URL parameters to simulate user login
    document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const currentUser = urlParams.get('userId') || '';
    let liked = false;

    const greetingElement = document.getElementById('greeting');
    const heartIcon = document.getElementById('heart-icon');
    const likeButton = document.getElementById('like-button');
    const quoteContent = document.getElementById('quote-content');
    const loadingElement = document.getElementById('loading');

    async function init() {
        quoteContent.style.display = 'none';
        loadingElement.style.display = 'block';

        const response = await fetch(`/api/getGreetingMessage?userId=${currentUser}`, { 
        method: "GET"
        });
        const result = await response.json();
        greetingElement.textContent = result.message || "";
        quoteContent.style.display = 'block';
        loadingElement.style.display = 'none';
    }

    likeButton.addEventListener('click', async function() {
        if (!liked) {
        const response = await fetch("/api/like", { 
            method: "POST", 
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ UserId: currentUser }),
        });
        }
        liked = !liked;
        heartIcon.style.color = liked ? 'red' : '#ccc';
    });

    init();
    });
</script>
</body>
</html>

Der Einfachheit halber extrahiert das Beispiel die userId von URL-Abfrageparametern (z. B. ?userId=UserA), um verschiedene Benutzeridentitäten zu simulieren.

Ausführen der Anwendung

Legen Sie die Umgebungsvariable namens AZURE_APPCONFIG_ENDPOINT auf den Endpunkt Ihres App-Konfigurationsspeichers fest, der unter der Übersicht über Ihren Store im Azure-Portal zu finden ist.

Führen Sie bei Verwendung einer Windows-Eingabeaufforderung den folgenden Befehl aus, und starten Sie die Eingabeaufforderung neu, damit die Änderung wirksam wird:
```
setx AZURE_APPCONFIG_ENDPOINT "<endpoint-of-your-app-configuration-store>"
```
Wenn Sie PowerShell verwenden, führen Sie den folgenden Befehl aus:
```
$Env:AZURE_APPCONFIG_ENDPOINT = "<endpoint-of-your-app-configuration-store>"
```
Führen Sie bei Verwendung von macOS oder Linux den folgenden Befehl aus:
```
export AZURE_APPCONFIG_ENDPOINT='<endpoint-of-your-app-configuration-store>'
```
Führen Sie die Anwendung aus.
```
node server.js
```
Öffnen Sie Ihren Browser und gehen Sie zu localhost:8080. Die Standardansicht der App, die keine Begrüßungsnachricht enthält, sollte angezeigt werden.
Sie können den Abfrageparameter in der URL verwenden userId , um die Benutzer-ID anzugeben. Besuchen Sie localhost:8080/?userId=UserA und sehen Sie eine lange Begrüßungsnachricht.
Probieren Sie verschiedene Benutzer-IDs aus, um zu sehen, wie das Variantenfeature-Flag die Begrüßungsnachricht für verschiedene Benutzersegmente ändert. Besuchen Sie localhost:8080/?userId=UserB und sehen Sie eine kürzere Begrüßungsnachricht.

Nächste Schritte

Die vollständige Funktionsausführung der JavaScript-Featureverwaltungsbibliothek finden Sie im folgenden Dokument.

JavaScript-Featureverwaltung

Feedback

War diese Seite hilfreich?

Last updated on 2025-06-17