Démarrage rapide : Créer une application JavaScript avec Azure App Configuration

Article
04/23/2024

Dans ce guide de démarrage rapide, vous utilisez Azure App Configuration pour centraliser le stockage et la gestion des paramètres d’une application à l’aide de la bibliothèque de client du fournisseur JavaScript Azure App Configuration.

Le fournisseur App Configuration pour JavaScript est construit sur le SDK Azure pour JavaScript et est conçu pour être plus facile à prendre en main et plus riche en fonctionnalités. Il permet d’accéder aux valeurs clés dans App Configuration en tant qu’objet Map. Il offre des fonctionnalités telles que la composition de la configuration à partir de plusieurs étiquettes, l'élagage des préfixes de clés, la résolution automatique des références du coffre de clés, et bien d'autres encore. À titre d'exemple, ce tutoriel montre comment utiliser le fournisseur JavaScript dans une application Node.js.

Prérequis

Compte Azure avec un abonnement actif. Créez-en un gratuitement.
Un magasin App Configuration. Créez un magasin.
Versions LTS de Node.js. Pour plus d’informations sur l’installation de Node.js soit directement sur Windows, soit à l’aide du Sous-système Windows pour Linux (WSL), consultez Prise en main de Node.js

Ajouter des clés-valeurs

Ajoutez les valeurs de clés suivantes au magasin 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	Type de contenu
message	Message d'Azure App Configuration	Laissez ce champ vide
app.greeting	Hello World	Laissez ce champ vide
app.json	{"myKey":"myValue"}	application/json

Créer une application console Node.js

Dans ce tutoriel, vous créez une application console Node.js et charger des données à partir de votre magasin App Configuration.

Créez un répertoire pour le projet nommé app-configuration-quickstart.
```
mkdir app-configuration-quickstart
```
Basculez vers le répertoire app-configuration-quickstart.
```
cd app-configuration-quickstart
```
Installez le fournisseur Azure App Configuration à l’aide de la commande npm install.
```
npm install @azure/app-configuration-provider
```

Se connecter à un magasin App Configuration

Les exemples suivants montrent comment récupérer des données de configuration à partir d'Azure App Configuration et les utiliser dans votre application. Par défaut, les valeurs de clé sont chargées en tant qu’objet Map, ce qui vous permet d’accéder à chaque valeur clé à l’aide de son nom de clé complet. Toutefois, si votre application utilise des objets de configuration, vous pouvez utiliser l’API d’assistance constructConfigurationObject qui crée un objet de configuration en fonction des valeurs de clé chargées à partir d'Azure App Configuration.

Créez un fichier appelé app.js dans le répertoire app-configuration-quickstart, puis copiez le code depuis chaque échantillon.

Exemple 1 : charger des valeurs de clé avec un sélecteur par défaut

Dans cet exemple, vous vous connectez à Azure App Configuration à l’aide d’une chaîne de connexion et chargez des valeurs clés sans spécifier d’options avancées. Par défaut, elle charge toutes les valeurs de clé sans étiquette.

const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;

async function run() {
    console.log("Sample 1: Load key-values with default selector");

    // Connect to Azure App Configuration using a connection string and load all key-values with null label.
    const settings = await load(connectionString);

    console.log("---Consume configuration as a Map---");
    // Find the key "message" and print its value.
    console.log('settings.get("message"):', settings.get("message"));           // settings.get("message"): Message from Azure App Configuration
    // Find the key "app.greeting" and print its value.
    console.log('settings.get("app.greeting"):', settings.get("app.greeting")); // settings.get("app.greeting"): Hello World
    // Find the key "app.json" whose value is an object.
    console.log('settings.get("app.json"):', settings.get("app.json"));         // settings.get("app.json"): { myKey: 'myValue' }

    console.log("---Consume configuration as an object---");
    // Construct configuration object from loaded key-values, by default "." is used to separate hierarchical keys.
    const config = settings.constructConfigurationObject();
    // Use dot-notation to access configuration
    console.log("config.message:", config.message);             // config.message: Message from Azure App Configuration
    console.log("config.app.greeting:", config.app.greeting);   // config.app.greeting: Hello World
    console.log("config.app.json:", config.app.json);           // config.app.json: { myKey: 'myValue' }
}

run().catch(console.error);

Exemple 2 : charger des valeurs de clé spécifiques à l’aide de sélecteurs

Dans cet exemple, vous chargez un sous-ensemble de clés-valeurs en spécifiant l’option selectors. Seules les clés commençant par « application » sont chargées. Notez que vous pouvez spécifier plusieurs sélecteurs en fonction de vos besoins, chacun avec les propriétés keyFilter et labelFilter.

const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;

async function run() {
    console.log("Sample 2: Load specific key-values using selectors");

    // Load a subset of keys starting with "app." prefix.
    const settings = await load(connectionString, {
        selectors: [{
            keyFilter: "app.*"
        }],
    });

    console.log("---Consume configuration as a Map---");
    // The key "message" is not loaded as it does not start with "app."
    console.log('settings.has("message"):', settings.has("message"));           // settings.has("message"): false
    // The key "app.greeting" is loaded
    console.log('settings.has("app.greeting"):', settings.has("app.greeting")); // settings.has("app.greeting"): true
    // The key "app.json" is loaded
    console.log('settings.has("app.json"):', settings.has("app.json"));         // settings.has("app.json"): true

    console.log("---Consume configuration as an object---");
    // Construct configuration object from loaded key-values
    const config = settings.constructConfigurationObject({ separator: "." });
    // Use dot-notation to access configuration
    console.log("config.message:", config.message);         // config.message: undefined
    console.log("config.app.greeting:", config.app.greeting);   // config.app.greeting: Hello World
    console.log("config.app.json:", config.app.json);           // config.app.json: { myKey: 'myValue' }
}

run().catch(console.error);

Exemple 3 : charger des valeurs de clé et découper le préfixe des clés

Dans cet exemple, vous chargez des valeurs de clé avec une option trimKeyPrefixes. Une fois les valeurs de clé chargées, le préfixe « app. » est supprimé de toutes les clés. Cela est utile lorsque vous souhaitez charger des configurations spécifiques à votre application en filtrant vers un préfixe de clé spécifique, mais vous ne souhaitez pas que votre code transporte le préfixe chaque fois qu’il accède à la configuration.

const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;

async function run() {
    console.log("Sample 3: Load key-values and trim prefix from keys");

    // Load all key-values with no label, and trim "app." prefix from all keys.
    const settings = await load(connectionString, {
        selectors: [{
            keyFilter: "app.*"
        }],
        trimKeyPrefixes: ["app."]
    });

    console.log("---Consume configuration as a Map---");
    // The original key "app.greeting" is trimmed as "greeting".
    console.log('settings.get("greeting"):', settings.get("greeting")); // settings.get("greeting"): Hello World
    // The original key "app.json" is trimmed as "json".
    console.log('settings.get("json"):', settings.get("json"));         // settings.get("json"): { myKey: 'myValue' }

    console.log("---Consume configuration as an object---");
    // Construct configuration object from loaded key-values with trimmed keys.
    const config = settings.constructConfigurationObject();
    // Use dot-notation to access configuration
    console.log("config.greeting:", config.greeting);   // config.greeting: Hello World
    console.log("config.json:", config.json);           // config.json: { myKey: 'myValue' }
}

run().catch(console.error);

Exécution de l'application

Définissez une variable d’environnement nommée AZURE_APPCONFIG_CONNECTION_STRING et affectez-lui la valeur de la chaîne de connexion à votre magasin App Configuration. Sur la ligne de commande, exécutez la commande suivante :
Pour exécuter l’application localement en tirant parti de l’invite de commandes Windows, exécutez la commande suivante et remplacez<app-configuration-store-connection-string> par la chaîne de connexion de votre magasin de configurations des applications :
```
setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"
```
Si vous utilisez Windows PowerShell, exécutez la commande suivante et remplacez <app-configuration-store-connection-string> par la chaîne de connexion de votre magasin de configurations des applications :
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING = "<app-configuration-store-connection-string>"
```
Si vous utilisez macOS, exécutez la commande suivante et remplacez <app-configuration-store-connection-string> par la chaîne de connexion de votre magasin de configurations des applications :
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Si vous utilisez Linux, exécutez la commande suivante et remplacez <app-configuration-store-connection-string> par la chaîne de connexion de votre magasin de configurations des applications :
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Imprimez la valeur de la variable d’environnement pour confirmer qu’elle est correctement définie à l’aide de la commande suivante.
Si vous utilisez l’invite de commandes Windows, redémarrez l’invite pour que la modification soit prise en compte et exécutez la commande suivante :
```
echo %AZURE_APPCONFIG_CONNECTION_STRING%
```
Si vous utilisez Windows PowerShell, exécutez la commande suivante :
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING
```
Si vous utilisez macOS, exécutez la commande suivante :
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```
Si vous utilisez Linux, exécutez la commande suivante :
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```

Après la définition correcte de la variable d’environnement, exécutez la commande suivante afin d’effectuer l’exécution locale de l’application :

node app.js

Vous devez voir la sortie suivante pour chaque échantillon :

Exemple 1

Sample 1: Load key-values with default selector
---Consume configuration as a Map---
settings.get("message"): Message from Azure App Configuration
settings.get("app.greeting"): Hello World
settings.get("app.json"): { myKey: 'myValue' }
---Consume configuration as an object---
config.message: Message from Azure App Configuration
config.app.greeting: Hello World
config.app.json: { myKey: 'myValue' }

Exemple 2

Sample 2: Load specific key-values using selectors
---Consume configuration as a Map---
settings.has("message"): false
settings.has("app.greeting"): true
settings.has("app.json"): true
---Consume configuration as an object---
config.message: undefined
config.app.greeting: Hello World
config.app.json: { myKey: 'myValue' }

Exemple 3

Sample 3: Load key-values and trim prefix from keys
---Consume configuration as a Map---
settings.get("greeting"): Hello World
settings.get("json"): { myKey: 'myValue' }
---Consume configuration as an object---
config.greeting: Hello World
config.json: { myKey: 'myValue' }

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 guide de démarrage rapide, vous avez créé un magasin App Configuration et appris à accéder aux paires clé/valeur grâce au fournisseur App Configuration JavaScript d’une application Node.js. Pour savoir comment configurer votre application afin d’actualiser dynamiquement les paramètres de configuration, passez au tutoriel suivant.

Activer la configuration dynamique

Partager via