Guida introduttiva: Creare un'app JavaScript con configurazione app Azure

Articolo
04/19/2024

In questa guida introduttiva si userà app Azure Configurazione per centralizzare l'archiviazione e la gestione delle impostazioni dell'applicazione usando la libreria client del provider JavaScript di configurazione app Azure.

Configurazione app provider per JavaScript si basa su Azure SDK per JavaScript ed è progettato per essere più semplice da usare con funzionalità più avanzate. Consente l'accesso ai valori chiave in Configurazione app come Map oggetto . Offre funzionalità come la composizione della configurazione da più etichette, il taglio dei prefissi chiave, la risoluzione automatica dei riferimenti a Key Vault e molti altri ancora. Ad esempio, questa esercitazione illustra come usare il provider JavaScript in un'app Node.js.

Prerequisiti

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

Aggiungere valori chiave

Aggiungere i valori chiave seguenti all'archivio 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, vedere Creare un valore chiave.

Chiave	valore	Tipo di contenuto
message	Messaggio dalla configurazione di app Azure	Lasciare vuoto
app.greeting	Hello World	Lasciare vuoto
app.json	{"myKey":"myValue"}	application/json

Creare un'app console Node.js

In questa esercitazione si crea un'app console Node.js e si caricano dati dall'archivio Configurazione app.

Creare una nuova directory per il progetto denominato 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 Azure usando il npm install comando .
```
npm install @azure/app-configuration-provider
```

Connettersi a un archivio di Configurazione app

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

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

Esempio 1: Caricare i valori chiave con il selettore predefinito

In questo esempio ci si connette a app Azure Configurazione usando un stringa di connessione e si caricano valori chiave-valore senza specificare opzioni avanzate. Per impostazione predefinita, carica tutti i valori chiave 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 valori chiave-valore specifici usando selettori

In questo esempio si carica un subset di valori chiave specificando l'opzione selectors . Vengono caricate solo le chiavi che iniziano con "app". Si noti che è possibile specificare più selettori in base alle esigenze, ognuna con keyFilter le proprietà 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.greeting);   // config.app.greeting: Hello World
    console.log("config.app.json:", config.json);           // config.app.json: { myKey: 'myValue' }
}

run().catch(console.error);

Esempio 3: Caricare i valori chiave e tagliare il prefisso dalle chiavi

In questo esempio si caricano i valori chiave con un'opzione trimKeyPrefixes. Dopo il caricamento dei valori chiave, il prefisso "app". viene tagliato da tutte le chiavi. Ciò è utile quando si desidera caricare le configurazioni specifiche dell'applicazione filtrando in base a un determinato prefisso di chiave, ma non si vuole che il codice possa contenere 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 e impostarla sul stringa di connessione dell'archivio 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 il 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 il stringa di connessione dell'archivio di configurazione delle 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 il stringa di connessione dell'archivio di configurazione dell'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 il stringa di connessione dell'archivio di configurazione dell'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.
Usando il prompt dei comandi di Windows, riavviare il prompt dei comandi per consentire l'applicazione della 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 introduttiva è stato creato un nuovo archivio Configurazione app e si è appreso come accedere ai valori chiave usando il provider JavaScript Configurazione app in un'app Node.js.

Per altri esempi di codice, visitare:

provider JavaScript di configurazione app Azure

Share via