Tutoriel : Utiliser la configuration dynamique dans JavaScript

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.
• Mettez à jour le package @azure/app-configuration-provider vers la version 2.0.0 ou ultérieure.

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	Salut tout le monde!	Laissez ce champ vide	Laissez ce champ vide

Applications console

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.

Charger des données à partir d’App 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.

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

   // Connecting to Azure App Configuration using endpoint and token credential
   const appConfig = await load(endpoint, credential, {
       // Enabling the dynamic refresh
       refreshOptions: {
           enabled: true
       }
   });
   

   Utiliser la configuration comme objet

   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 appConfig = await load(endpoint, credential, {
       // Enabling the dynamic refresh
       refreshOptions: {
           enabled: true
       }
   });
   
   // Constructing configuration object
   let config = appConfig.constructConfigurationObject();
   
   // Setting up callback to ensure `config` object is updated once configuration is changed.
   appConfig.onRefresh(() => {
       config = appConfig.constructConfigurationObject();
   });
   
   

   Remarque

   Si vous recevez l’erreur « L’actualisation est activée, mais aucun paramètre surveillé n’est spécifié », mettez à jour le package @azure/app-configuration-provider vers la version 2.0.0 ou ultérieure.

   Conseil / Astuce

   Pour plus d’informations sur la surveillance des modifications de configuration, consultez les meilleures pratiques pour l’actualisation de la configuration.

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

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

   Utiliser la configuration comme objet

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

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

   Utiliser la configuration comme carte

   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 appConfig = await load(endpoint, credential, {
           // Enabling the dynamic refresh
           refreshOptions: {
               enabled: true
           }
       });
   
       // Polling for configuration changes every 5 seconds
       while (true) {
           console.log(appConfig.get("message")); // Consume current value of message from a Map
           appConfig.refresh(); // Refreshing the configuration setting asynchronously
           await sleepInMs(5000); // Waiting before the next refresh
       }
   }
   
   run().catch(console.error);
   

   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 appConfig = await load(endpoint, credential, {
           // Enabling the dynamic refresh
           refreshOptions: {
               enabled: true
           }
       });
   
       // Constructing configuration object
       let config = appConfig.constructConfigurationObject();
   
       // Setting up callback to ensure `config` object is updated once configuration is changed.
       appConfig.onRefresh(() => {
           config = appConfig.constructConfigurationObject();
       });
   
       // Polling for configuration changes every 5 seconds
       while (true) {
           console.log(config.message); // Consume current value of message from an object
           appConfig.refresh(); // Refreshing the configuration setting asynchronously
           await sleepInMs(5000); // Waiting before the next refresh
       }
   }
   
   run().catch(console.error);
   

Exécution de l'application

1. Exécutez votre script :

   node app.js
   

2. Vérification de la sortie :

   Hello World!
   

   Il continue d’imprimer « Hello World ! » dans une nouvelle ligne toutes les 5 secondes.

3. Mettez à jour les valeurs de clés suivantes dans le magasin Azure App Configuration. Mettez à jour la valeur de la clé message.

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

4. Une fois les valeurs mises à jour, la valeur mise à jour est imprimée après l’intervalle d’actualisation.

   Hello World - Updated!
   

Application serveur

L’exemple suivant montre comment mettre à jour un serveur HTTP existant pour qu’il utilise des valeurs de configuration actualisables.

1. Créez un fichier JavaScript nommé server.js et ajoutez le code suivant :

   const http = require('http');
   
   function startServer() {
       const server = http.createServer((req, res) => {
           res.statusCode = 200;
           res.setHeader('Content-Type', 'text/plain');
           res.end("Hello World!");
       });
   
       const hostname = "localhost";
       const port = 3000;
       server.listen(port, hostname, () => {
       console.log(`Server running at http://localhost:${port}/`);
       });
   }
   
   startServer();
   

2. Exécutez votre script :

   node server.js
   

3. Visitez http://localhost:3000 et vous verrez la réponse :

   

Charger des données à partir d’App Configuration

1. Mettez à jour server.js pour utiliser App Configuration et activer l’actualisation dynamique :

   const http = require("http");
   
   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
   
   let appConfig;
   async function initializeConfig() {
       appConfig = await load(endpoint, credential, {
           refreshOptions: {
               enabled: true,
               refreshIntervalInMs: 15_000 // set the refresh interval
           }
       });
   }
   
   function startServer() {
       const server = http.createServer((req, res) => {
           // refresh the configuration asynchronously when there is any incoming request
           appConfig.refresh();
           res.statusCode = 200;
           res.setHeader('Content-Type', 'text/plain');
           res.end(appConfig.get("message"));
       });
   
       const hostname = "localhost";
       const port = 3000;
       server.listen(port, hostname, () => {
       console.log(`Server running at http://localhost:${port}/`);
       });
   }
   
   // Initialize the configuration and then start the server
   initializeConfig()
       .then(() => startServer());
   

Actualisation de la configuration pilotée par les demandes

Dans la plupart des cas, l’opération d’actualisation du fournisseur App Configuration peut être traitée comme une opération nulle (« no-op »). Elle n’envoie des requêtes de vérification de la valeur dans App Configuration que lorsque l’intervalle d’actualisation que vous avez défini est écoulé.

Nous vous recommandons d’implémenter l’actualisation de la configuration pilotée par des requêtes pour votre application web. L’actualisation de la configuration est déclenchée par les demandes entrantes adressées à votre application web. Aucune actualisation ne se produit si votre application est inactive, quand il n’y a aucune demande entrante. Quand votre application est active, vous pouvez utiliser un intergiciel ou un mécanisme similaire pour déclencher l’appel appConfig.refresh() à chaque requête entrante adressée à votre application.

• En cas d’échec d’une demande de détection de changements adressée à App Configuration, votre application continue d’utiliser la configuration mise en cache. De nouvelles tentatives de recherche des changements sont effectuées régulièrement tant qu’il existe de nouvelles demandes entrantes adressées à votre application.

• L’actualisation de la configuration se produit de manière asynchrone par rapport au traitement des demandes entrantes de votre application. Cela ne bloque pas ou ne ralentit pas la requête entrante qui a déclenché l'actualisation. La demande qui a déclenché l’actualisation peut ne pas obtenir les valeurs de configuration mises à jour, mais les demandes ultérieures obtiendront de nouvelles valeurs de configuration.

Exécution de l'application

1. Relancez votre serveur HTTP :

   node server.js
   

2. Visitez http://localhost:3000 et vérifiez la réponse qui est la clé message dans votre magasin App Configuration.

   

3. Mettez à jour les valeurs de clés suivantes dans le magasin Azure App Configuration. Mettez à jour la valeur de la clé message.

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

4. Après environ 15 secondes, actualisez la page plusieurs fois. Le message doit alors être mis à jour.

   

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.

1. Connectez-vous au portail Azure, puis sélectionnez Groupes de ressources.
2. Dans la zone Filtrer par nom, entrez le nom de votre groupe de ressources.
3. Dans la liste de résultats, sélectionnez le nom du groupe de ressources pour afficher une vue d’ensemble.
4. Sélectionnez Supprimer le groupe de ressources.
5. 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

Pour obtenir la liste complète des fonctionnalités de la bibliothèque du fournisseur de configuration JavaScript, passez au document suivant.

Fournisseur de configuration JavaScript