Quickstart: Een JavaScript-app maken met Azure-app-configuratie

Artikel
04/19/2024

In deze quickstart gebruikt u Azure-app Configuration om de opslag en het beheer van toepassingsinstellingen te centraliseren met behulp van de clientbibliotheek van de Azure-app Configuratie-JavaScript-provider.

App Configuration-provider voor JavaScript is gebouwd boven op de Azure SDK voor JavaScript en is ontworpen om gemakkelijker te gebruiken met uitgebreidere functies. Hiermee kunt u toegang krijgen tot sleutelwaarden in App Configuration als een Map object. Het biedt functies zoals configuratiesamenstelling van meerdere labels, het bijsnijden van sleutelvoorvoegsels, automatische resolutie van Key Vault-verwijzingen en nog veel meer. In deze zelfstudie ziet u bijvoorbeeld hoe u de JavaScript-provider gebruikt in een Node.js-app.

Vereisten

Een Azure-account met een actief abonnement. Maak gratis een account.
Een App Configuration-archief. Een winkel maken.
LTS-versies van Node.js. Zie Aan de slag met Node.js voor informatie over het installeren van Node.js rechtstreeks in Windows of het gebruik van de Windows-subsysteem voor Linux (WSL).

Sleutelwaarden toevoegen

Voeg de volgende sleutelwaarden toe aan het App Configuration-archief. Ga naar Een sleutelwaarde maken voor meer informatie over het toevoegen van sleutelwaarden aan een archief met behulp van Azure Portal of de CLI.

Sleutel	Weergegeven als	Inhoudstype
bericht	Bericht van Azure-app-configuratie	Leeg laten
app.greeting	Hello World	Leeg laten
app.json	{"myKey":"myValue"}	application/json

Een Node.js-console-app maken

In deze zelfstudie maakt u een Node.js console-app en laadt u gegevens uit uw App Configuration-archief.

Maak een nieuwe map voor het project met de naam app-configuration-quickstart.
```
mkdir app-configuration-quickstart
```
Schakel over naar de zojuist gemaakte map app-configuration-quickstart.
```
cd app-configuration-quickstart
```
Installeer de Azure-app Configuration-provider met behulp van de npm install opdracht.
```
npm install @azure/app-configuration-provider
```

Verbinding maken met een App Configuration-archief

In de volgende voorbeelden ziet u hoe u configuratiegegevens ophaalt uit Azure-app Configuratie en deze gebruikt in uw toepassing. Standaard worden de sleutelwaarden geladen als een Map object, zodat u toegang hebt tot elke sleutelwaarde met behulp van de volledige sleutelnaam. Als uw toepassing echter gebruikmaakt van configuratieobjecten, kunt u de constructConfigurationObject helper-API gebruiken waarmee een configuratieobject wordt gemaakt op basis van de sleutelwaarden die zijn geladen vanuit Azure-app-configuratie.

Maak een bestand met de naam app.js in de map app-configuration-quickstart en kopieer de code uit elk voorbeeld.

Voorbeeld 1: Sleutelwaarden laden met standaardkiezer

In dit voorbeeld maakt u verbinding met Azure-app Configuratie met behulp van een verbindingsreeks en laadt u sleutelwaarden zonder geavanceerde opties op te geven. Standaard worden alle sleutelwaarden zonder label geladen.

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

Voorbeeld 2: Specifieke sleutelwaarden laden met behulp van selectors

In dit voorbeeld laadt u een subset van sleutelwaarden door de selectors optie op te geven. Alleen sleutels die beginnen met 'app', worden geladen. U kunt meerdere selectors opgeven op basis van uw behoeften, elk met keyFilter en labelFilter eigenschappen.

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

Voorbeeld 3: Sleutelwaarden laden en voorvoegsel bijsnijden van sleutels

In dit voorbeeld laadt u sleutelwaarden met een optie trimKeyPrefixes. Nadat sleutelwaarden zijn geladen, wordt het voorvoegsel 'app'. afgekapt van alle sleutels. Dit is handig wanneer u configuraties wilt laden die specifiek zijn voor uw toepassing door te filteren op een bepaald sleutelvoorvoegsel, maar u niet wilt dat uw code het voorvoegsel elke keer dat deze de configuratie opent, het voorvoegsel bevat.

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

De toepassing uitvoeren

Stel een omgevingsvariabele in met de naam AZURE_APPCONFIG_CONNECTION_STRING en stel deze in op de verbindingsreeks van uw App Configuration-archief. Voer op de opdrachtregel de volgende opdracht uit:
Als u de app lokaal wilt uitvoeren met behulp van de Windows-opdrachtprompt, voert u de volgende opdracht uit en vervangt u <app-configuration-store-connection-string> de verbindingsreeks van uw app-configuratiearchief:
```
setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"
```
Als u Windows PowerShell gebruikt, voert u de volgende opdracht uit en vervangt u <app-configuration-store-connection-string> de verbindingsreeks van uw app-configuratiearchief:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING = "<app-configuration-store-connection-string>"
```
Als u macOS gebruikt, voert u de volgende opdracht uit en vervangt u <app-configuration-store-connection-string> de verbindingsreeks van uw app-configuratiearchief:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Als u Linux gebruikt, voert u de volgende opdracht uit en vervangt u <app-configuration-store-connection-string> de verbindingsreeks van het app-configuratiearchief:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Druk de waarde van de omgevingsvariabele af om te controleren of deze juist is ingesteld met de volgende opdracht.
Start met behulp van de Windows-opdrachtprompt de opdrachtprompt opnieuw om de wijziging van kracht te laten worden en voer de volgende opdracht uit:
```
echo %AZURE_APPCONFIG_CONNECTION_STRING%
```
Als u Windows PowerShell gebruikt, voert u de volgende opdracht uit:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING
```
Als u macOS gebruikt, voert u de volgende opdracht uit:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```
Als u Linux gebruikt, voert u de volgende opdracht uit:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```

Nadat de omgevingsvariabele juist is ingesteld, voert u de volgende opdracht uit om de app lokaal uit te voeren:

node app.js

U ziet de volgende uitvoer voor elk voorbeeld:

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

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

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

Resources opschonen

Als u de resources die in dit artikel zijn gemaakt niet wilt blijven gebruiken, verwijdert u de resourcegroep die u hier hebt gemaakt om kosten te voorkomen.

Belangrijk

Het verwijderen van een resourcegroep kan niet ongedaan worden gemaakt. De resourcegroep en alle resources daarin worden permanent verwijderd. Zorg ervoor dat u niet per ongeluk de verkeerde resourcegroep of resources verwijdert. Als u de resources voor dit artikel in een resourcegroep hebt gemaakt die andere resources bevat die u wilt behouden, moet u elke resource afzonderlijk verwijderen uit het deelvenster in plaats van dat u de resourcegroep verwijdert.

Meld u aan bij de Azure-portal en selecteer Resourcegroepen.
Voer de naam van de resourcegroep in het vak Filteren op naam in.
Selecteer in de resultatenlijst de resourcegroepnaam om een overzicht te bekijken.
Selecteer Resourcegroep verwijderen.
U wordt gevraagd om het verwijderen van de resourcegroep te bevestigen. Voer de naam van de resourcegroep in ter bevestiging en selecteer Verwijderen.

Na enkele ogenblikken worden de resourcegroep en alle bijbehorende resources verwijderd.

Volgende stappen

In deze quickstart hebt u een nieuw App Configuration-archief gemaakt en geleerd hoe u toegang krijgt tot sleutelwaarden met behulp van de App Configuration JavaScript-provider in een Node.js-app.

Ga voor meer codevoorbeelden naar:

Azure-app JavaScript-provider configureren