Tutoriel : Utiliser la configuration dynamique dans JavaScript

Article
12/19/2024

Dans ce tutoriel, vous allez apprendre à activer la configuration dynamique dans vos applications JavaScript. L’exemple de ce didacticiel s’appuie sur l’exemple d’application introduit dans le guide de démarrage rapide JavaScript. Avant de continuer, terminez Créer une application JavaScript avec Azure App Configuration.

Prérequis

Terminez le guide de démarrage rapide Créer une application JavaScript avec Azure App Configuration.

Ajouter des clés-valeurs

Ajoutez la valeur de clés suivante à votre magasin Azure App Configuration. Pour plus d’informations sur l’ajout de clés-valeurs à un magasin avec le Portail Azure ou la CLI, consultez Créer une clé-valeur.

Clé	Valeur	Étiquette	Type de contenu
message	Hello World!	Laissez ce champ vide	Laissez ce champ vide
sentinel	1	Laissez ce champ vide	Laissez ce champ vide

Remarque

Une clé Sentinel est une clé que vous mettez à jour après avoir modifié toutes les autres clés. Votre application supervise la clé Sentinel. Lorsqu’un changement est détecté, votre application actualise toutes les valeurs de configuration. Cette approche permet de garantir la cohérence de la configuration dans votre application et de réduire le nombre total de demandes adressées à votre magasin Azure App Configuration, par rapport au monitoring des changements de toutes les clés.

Recharger des données à partir d’Azure App Configuration

Les exemples suivants montrent comment utiliser des valeurs de configuration actualisables dans les applications console. Choisissez les instructions suivantes en fonction de la façon dont votre application consomme les données de configuration chargées à partir de App Configuration, en tant qu'objet Map ou objet de configuration.

Vous pouvez vous connecter à App Configuration à l’aide de Microsoft Entra ID (recommandé) ou d’une chaîne de connexion. L’extrait de code suivant illustre l’utilisation de Microsoft Entra ID. Vous utilisez DefaultAzureCredential pour vous authentifier auprès de votre magasin App Configuration. Lorsque vous avez suivi le guide de démarrage rapide listé dans les prérequis, vous avez déjà affecté vos informations d’identification au rôle Lecteur des données App Configuration.

Ouvrez le fichier app.js et mettez à jour la fonction load. Ajoutez un paramètre refreshOptions pour activer l’actualisation et configurer les options d’actualisation. La configuration chargée est mise à jour lorsqu’une modification est détectée sur le serveur. Par défaut, un intervalle d'actualisation de 30 secondes est utilisé, mais vous pouvez le remplacer avec la propriété refreshIntervalInMs.

Utiliser la configuration comme carte
Utiliser la configuration comme objet

// Connecting to Azure App Configuration using endpoint and token credential
const settings = await load(endpoint, credential, {
    // Setting up to refresh when the sentinel key is changed
    refreshOptions: {
        enabled: true,
        watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
    }
});

L'objet de configuration est construit en appelant une fonction constructConfigurationObject. Pour garantir une configuration à jour, mettez à jour l'objet de configuration dans le rappel onRefresh déclenché chaque fois qu'un changement de configuration est détecté et que la configuration est mise à jour.

// Connecting to Azure App Configuration using endpoint and token credential
const settings = await load(endpoint, credential, {
    // Setting up to refresh when the sentinel key is changed
    refreshOptions: {
        enabled: true,
        watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
    }
});

// Constructing configuration object
let config = settings.constructConfigurationObject();

// Setting up callback to ensure `config` object is updated once configuration is changed.
settings.onRefresh(() => {
    config = settings.constructConfigurationObject();
});

La configuration seule refreshOptions n’actualisera pas automatiquement la configuration. Vous devez appeler la méthode refresh pour déclencher une actualisation. Cette conception empêche les demandes inutiles adressées à App Configuration lorsque votre application est inactive. Vous devez inclure l’appel refresh où se produit votre activité d’application. C'est ce qu'on appelle l'actualisation de la configuration basée sur l'activité. Par exemple, vous pouvez appeler refresh lors du traitement d’un message entrant ou d’une commande, ou à l’intérieur d’une itération où vous effectuez une tâche complexe. Vous pouvez également utiliser un minuteur si votre application est toujours active. Dans cet exemple, refresh est appelée dans une boucle à des fins de démonstration. Même si l’appel refresh échoue pour une raison quelconque, votre application continuera à utiliser la configuration mise en cache. Une autre tentative est effectuée lorsque l’intervalle d’actualisation configuré est passé et que l’appel refresh est déclenché par l’activité de votre application. L’appel de refresh est une opération sans opération avant l’expiration de l’intervalle d’actualisation configuré, de sorte que son impact sur les performances est minimal même s’il est appelé fréquemment.

Ajoutez le code suivant pour interroger les modifications de configuration des valeurs clés surveillées.
- Utiliser la configuration comme carte
- Utiliser la configuration comme objet
```
// Polling for configuration changes every 5 seconds
while (true) {
    await sleepInMs(5000); // Waiting before the next refresh
    await settings.refresh(); // Refreshing the configuration setting
    console.log(settings.get("message")); // Consume current value of message from a Map
}
```
```
// Polling for configuration changes every 5 seconds
while (true) {
    await sleepInMs(5000); // Waiting before the next refresh
    await settings.refresh(); // Refreshing the configuration setting
    console.log(config.message); // Consume current value of message from an object
}
```

À présent, le fichier app.js doit ressembler à l’extrait de code suivant :

Utiliser la configuration comme carte
Utiliser la configuration comme objet

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const { DefaultAzureCredential } = require("@azure/identity");
const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility

async function run() {
    // Connecting to Azure App Configuration using endpoint and token credential
    const settings = await load(endpoint, credential, {
        // Setting up to refresh when the sentinel key is changed
        refreshOptions: {
            enabled: true,
            watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
        }
    });

    // Polling for configuration changes every 5 seconds
    while (true) {
        await sleepInMs(5000); // Waiting before the next refresh
        await settings.refresh(); // Refreshing the configuration setting
        console.log(settings.get("message")); // Consume current value of message from a Map
    }
}

run().catch(console.error);

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const { DefaultAzureCredential } = require("@azure/identity");
const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility

async function run() {
    // Connecting to Azure App Configuration using endpoint and token credential
    const settings = await load(endpoint, credential, {
        // Setting up to refresh when the sentinel key is changed
        refreshOptions: {
            enabled: true,
            watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
        }
    });

    // Constructing configuration object
    let config = settings.constructConfigurationObject();

    // Setting up callback to ensure `config` object is updated once configuration is changed.
    settings.onRefresh(() => {
        config = settings.constructConfigurationObject();
    });

    // Polling for configuration changes every 5 seconds
    while (true) {
        await sleepInMs(5000); // Waiting before the next refresh
        await settings.refresh(); // Refreshing the configuration setting
        console.log(config.message); // Consume current value of message from an object
    }
}

run().catch(console.error);

Exécution de l'application

Exécutez votre script :
```
node app.js
```
Vérification de la sortie :
```
Hello World!
```
Il continue d’imprimer « Hello World ! » dans une nouvelle ligne toutes les 5 secondes.
Mettez à jour les valeurs de clés suivantes dans le magasin Azure App Configuration. Mettez à jour la valeur de la clé message d’abord, puis sentinel.

Clé Valeur Étiquette Type de contenu

message Hello World - Mise à jour ! Laissez ce champ vide Laissez ce champ vide

sentinel 2 Laissez ce champ vide Laissez ce champ vide
Une fois les valeurs mises à jour, la valeur mise à jour est imprimée après l’intervalle d’actualisation.
```
Hello World - Updated!
```

Clé	Valeur	Étiquette	Type de contenu
message	Hello World - Mise à jour !	Laissez ce champ vide	Laissez ce champ vide
sentinel	2	Laissez ce champ vide	Laissez ce champ vide

Nettoyer les ressources

Si vous ne souhaitez plus utiliser les ressources créées dans cet article, supprimez le groupe de ressources que vous avez créé ici afin d’éviter des frais.

Important

La suppression d’un groupe de ressources est irréversible. Le groupe de ressources et toutes les ressources qu’il contient sont supprimés définitivement. Veillez à ne pas supprimer accidentellement les mauvaises ressources ou le mauvais groupe de ressources. Si vous avez créé les ressources pour cet article dans un groupe de ressources contenant d’autres ressources que vous souhaitez conserver, supprimez chaque ressource individuellement à partir de son volet, au lieu de supprimer l’intégralité du groupe de ressources.

Connectez-vous au portail Azure, puis sélectionnez Groupes de ressources.
Dans la zone Filtrer par nom, entrez le nom de votre groupe de ressources.
Dans la liste de résultats, sélectionnez le nom du groupe de ressources pour afficher une vue d’ensemble.
Sélectionnez Supprimer le groupe de ressources.
Vous êtes invité à confirmer la suppression du groupe de ressources. Entrez le nom de votre groupe de ressources à confirmer, puis sélectionnez Supprimer.

Après quelques instants, le groupe de ressources et toutes ses ressources sont supprimés.

Étapes suivantes

Dans ce didacticiel, vous avez activé votre application JavaScript pour actualiser dynamiquement les paramètres de configuration à partir d'Azure App Configuration. Pour savoir comment utiliser une identité managée Azure de façon à simplifier l’accès à Azure App Configuration, passez au tutoriel suivant.

Intégration des identités managées

Partager via