Avvio rapido: Creare un'app JavaScript con Configurazione app di Azure

Articolo
07/05/2024

In questa guida di avvio rapido si usa Configurazione app di Azure per centralizzare l'archiviazione e la gestione delle impostazioni di un'applicazione usando la libreria client del provider JavaScript di Configurazione app di Azure.

Il provider di Configurazione app per JavaScript è basato su Azure SDK per JavaScript ed è progettato per essere più facilmente utilizzabile con funzionalità avanzate. Consente l'accesso alle coppie chiave-valore in Configurazione app come oggetto Map. Offre funzionalità come la composizione della configurazione da più etichette, la rimozione dei prefissi di chiave, la risoluzione automatica dei riferimenti a Key Vault e molte altre ancora. A titolo esemplificativo, questa esercitazione mostra come usare il provider JavaScript in un'applicazione Node.js.

Prerequisiti

Un account Azure con una sottoscrizione attiva. Crearne una gratuitamente.
Un Archivio di configurazione app. Creare un archivio.
Versioni LTS di Node.js. Per informazioni sull'installazione di Node.js direttamente in Windows o con il sottosistema Windows per Linux (WSL), vedere Introduzione a Node.js

Aggiungere coppie chiave-valore

Aggiungere le coppie chiave-valore seguenti all'archivio di Configurazione app. Per altre informazioni su come aggiungere valori chiave a un archivio usando il portale di Azure o l’interfaccia della riga di comando, andare a Creare un valore chiave.

Chiave	valore	Content type
message	Messaggio di Configurazione app di Azure	Lasciare vuoto
app.greeting	Hello World	Lasciare vuoto
app.json	{"myKey":"myValue"}	application/json

Creare un'app console Node.js

In questa esercitazione viene creata un'app console Node.js e vengono caricati dati dall'archivio di Configurazione app.

Creare una nuova directory per il progetto denominata app-configuration-quickstart.
```
mkdir app-configuration-quickstart
```
Passare alla directory app-configuration-quickstart appena creata.
```
cd app-configuration-quickstart
```
Installare il provider di Configurazione app di Azure usando il comando npm install.
```
npm install @azure/app-configuration-provider
```

Connettersi a un archivio di Configurazione app

Gli esempi seguenti illustrano come recuperare i dati di configurazione da Configurazione app di Azure e usarli nell'applicazione. Per impostazione predefinita, le coppie chiave-valore vengono caricate come oggetto Map, consentendo di accedere a ogni coppia chiave-valore usando il nome completo della chiave. Tuttavia, se l'applicazione usa oggetti di configurazione, è possibile usare l'API helper constructConfigurationObject che crea un oggetto di configurazione basato su coppie chiave-valore caricate da Configurazione app di Azure.

Creare un file denominato app.js nella directory app-configuration-quickstart e copiare il codice di ogni esempio.

Esempio 1: caricare le coppie chiave-valore con il selettore predefinito

In questo esempio ci si connette a Configurazione app di Azure usando una stringa di connessione e si caricano coppie chiave-valore senza specificare opzioni avanzate. Per impostazione predefinita, tutte le coppie chiave-valore vengono caricate senza etichetta.

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

Esempio 2: caricare coppie chiave-valore specifiche usando i selettori

In questo esempio si carica un sottoinsieme di coppie chiave-valore specificando l'opzione selectors. Vengono caricate solo le chiavi che iniziano con "app.". Si noti che è possibile specificare più selettori in base alle esigenze, ognuno con le proprietà keyFilter e 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);

Esempio 3: caricare le coppie chiave-valore e rimuovere il prefisso dalle chiavi

In questo esempio si caricano le coppie chiave-valore con un'opzione trimKeyPrefixes. Dopo il caricamento delle coppie chiave-valore, il prefisso "app." viene rimosso da tutte le chiavi. Questo è utile quando si intende caricare configurazioni specifiche dell'applicazione filtrando in base a un determinato prefisso di chiave, ma non si vuole che il codice mantenga il prefisso ogni volta che accede alla configurazione.

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

Eseguire l'applicazione

Impostare una variabile di ambiente denominata AZURE_APPCONFIG_CONNECTION_STRING sulla stringa di connessione dell'archivio di Configurazione app. Eseguire il comando seguente alla riga di comando:
Per eseguire l'app in locale usando il prompt dei comandi di Windows, eseguire il comando seguente e sostituire <app-configuration-store-connection-string> con la stringa di connessione dell'archivio di Configurazione app:
```
setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"
```
Se si usa Windows PowerShell, eseguire il comando seguente e sostituire <app-configuration-store-connection-string> con la stringa di connessione dell'archivio di Configurazione app:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING = "<app-configuration-store-connection-string>"
```
Se si usa macOS, eseguire il comando seguente e sostituire <app-configuration-store-connection-string> con la stringa di connessione dell'archivio di Configurazione app:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Se si usa Linux, eseguire il comando seguente e sostituire <app-configuration-store-connection-string> con la stringa di connessione dell'archivio di Configurazione app:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Stampare il valore della variabile di ambiente per verificare che sia impostato correttamente con il comando seguente.
Se si usa il prompt dei comandi di Windows, riavviare il prompt dei comandi per rendere effettiva la modifica ed eseguire il comando seguente:
```
echo %AZURE_APPCONFIG_CONNECTION_STRING%
```
Se si usa Windows PowerShell, eseguire il comando seguente:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING
```
Se si usa macOS, eseguire il comando seguente:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```
Se si usa Linux, eseguire il comando seguente:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```

Dopo aver impostato correttamente la variabile di ambiente, eseguire il comando seguente per eseguire l'app in locale:

node app.js

Verrà visualizzato l'output seguente per ogni esempio:

Esempio 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' }

Esempio 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' }

Esempio 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' }

Pulire le risorse

Se non si vuole continuare a usare le risorse create in questo articolo, eliminare il gruppo di risorse creato qui per evitare addebiti.

Importante

L'eliminazione di un gruppo di risorse è irreversibile. Il gruppo di risorse e tutte le risorse in esso contenute vengono eliminati in modo permanente. Assicurarsi di non eliminare accidentalmente il gruppo di risorse o le risorse sbagliate. Se le risorse per questo articolo sono state create in un gruppo di risorse che contiene altre risorse che si vogliono mantenere, eliminare ogni risorsa singolarmente dal rispettivo riquadro anziché eliminare il gruppo di risorse.

Accedere al portale di Azure e selezionare Gruppi di risorse.
Nella casella Filtra per nome immettere il nome del gruppo di risorse.
Nell'elenco dei risultati selezionare il nome del gruppo di risorse per visualizzare una panoramica.
Selezionare Elimina gruppo di risorse.
Verrà chiesto di confermare l'eliminazione del gruppo di risorse. Immettere il nome del gruppo di risorse per confermare e selezionare Elimina.

Dopo qualche istante, il gruppo di risorse e tutte le risorse che contiene vengono eliminati.

Passaggi successivi

In questa guida di avvio rapido si è creato un nuovo archivio di Configurazione app e si è appreso come accedere alle coppie chiave-valore usando il provider JavaScript di Configurazione app di Azure in un'app Node.js. Per informazioni su come configurare l'app per aggiornare in modo dinamico le impostazioni di configurazione, continuare con l'esercitazione successiva.

Abilitare la configurazione dinamica

Condividi tramite