Schnellstart: Erstellen einer JavaScript-App mit Azure App Configuration

Artikel
04/22/2024

In diesem Schnellstart verwenden Sie Azure App Configuration zum Zentralisieren der Speicherung und Verwaltung von Anwendungseinstellungen mit der Clientbibliothek des JavaScript-Anbieters von Azure App Configuration.

Der App Configuration-Anbieter für JavaScript basiert auf dem Azure SDK für JavaScript und ist so konzipiert, dass der mit umfangreichen Features einfacher zu verwenden ist. Er ermöglicht den Zugriff auf Schlüsselwerte in App Configuration als Map-Objekt. Er bietet Features wie die Konfigurationskomposition aus mehreren Bezeichnungen, die Kürzung von Schlüsselpräfixen, die automatische Auflösung von Key Vault-Verweisen und vieles mehr. Als Beispiel wird in diesem Tutorial gezeigt, wie Sie den JavaScript-Anbieter in einer Node.js-App verwenden.

Voraussetzungen

Ein Azure-Konto mit einem aktiven Abonnement. Erstellen Sie ein kostenloses Konto.
Ein App Configuration-Speicher. Hier finden Sie Informationen zum Erstellen eines Speichers.
LTS-Versionen von Node.js. Informationen zum Installieren von Node.js direkt unter Windows oder mithilfe des Windows-Subsystems für Linux (WSL) finden Sie unter Was ist NodeJS?.

Schlüsselwerte hinzufügen

Fügen Sie dem App Configuration-Speicher die folgenden Schlüsselwerte hinzu. Weitere Informationen zum Hinzufügen von Schlüssel-Wert-Paaren zu einem Speicher mithilfe des Azure-Portals oder der CLI finden Sie unter Erstellen eines Schlüssel-Wert-Paars.

Schlüssel	Wert	Inhaltstyp
Nachricht	Nachricht von Azure App Configuration	Leer lassen
app.greeting	Hello World	Leer lassen
app.json	{"myKey":"myValue"}	Anwendung/json

Erstellen einer Node.js-Konsolen-App

In diesem Tutorial erstellen Sie eine Node.js-Konsolen-App und laden Daten aus Ihrem App Configuration-Speicher.

Erstellen Sie ein neues Verzeichnis für das Projekt mit dem Namen app-configuration-quickstart.
```
mkdir app-configuration-quickstart
```
Wechseln Sie zum neu erstellten Verzeichnis app-configuration-quickstart.
```
cd app-configuration-quickstart
```
Installieren Sie den Azure App Configuration-Anbieter mit dem Befehl npm install.
```
npm install @azure/app-configuration-provider
```

Herstellen einer Verbindung mit einem App Configuration-Speicher

Die folgenden Beispiele veranschaulichen, wie Konfigurationsdaten aus Azure App Configuration abgerufen und in Ihrer Anwendung verwendet werden. Standardmäßig werden die Schlüsselwerte als Map-Objekt geladen, sodass Sie mithilfe des vollständigen Schlüsselnamens auf jeden Schlüsselwert zugreifen können. Wenn Ihre Anwendung jedoch Konfigurationsobjekte verwendet, können Sie die constructConfigurationObject-Hilfs-API verwenden. Sie erstellt ein Konfigurationsobjekt basierend auf den Schlüsselwerten, die aus Azure App Configuration geladen wurden.

Erstellen Sie im Verzeichnis app-configuration-quickstart eine Datei mit dem Namen app.js, und kopieren Sie den Code aus dem Beispiel.

Beispiel 1: Laden von Schlüsselwerten mit Standardauswahl

In diesem Beispiel stellen Sie eine Verbindung mit Azure App Configuration mithilfe einer Verbindungszeichenfolge her und laden Schlüsselwerte, ohne erweiterte Optionen anzugeben. Standardmäßig werden alle Schlüsselwerte ohne Bezeichnung 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);

Beispiel 2: Laden bestimmter Schlüsselwerte mithilfe von Selektoren

In diesem Beispiel laden Sie eine Teilmenge von Schlüsselwerten, indem Sie die Option selectors angeben. Es werden nur Schlüssel geladen, die mit „app.“ beginnen. Beachten Sie, dass Sie je nach Ihren Anforderungen mehrere Selektoren angeben können, die jeweils keyFilter- und labelFilter-Eigenschaften enthalten.

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

Beispiel 3: Laden von Schlüsselwerten und Kürzen des Präfixes von Schlüsseln

In diesem Beispiel laden Sie Schlüsselwerte mit einer Option trimKeyPrefixes. Nachdem Schlüsselwerte geladen wurden, wird das Präfix „app.“ von allen Schlüsseln gekürzt. Dies ist nützlich, wenn Sie Konfigurationen laden möchten, die für Ihre Anwendung spezifisch sind, indem Sie nach einem bestimmten Schlüsselpräfix filtern, Sie aber nicht möchten, dass Ihr Code das Präfix bei jedem Zugriff auf die Konfiguration tragen soll.

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

Ausführen der Anwendung

Legen Sie eine Umgebungsvariable mit dem Namen AZURE_APPCONFIG_CONNECTION_STRING auf die Verbindungszeichenfolge für Ihren App Configuration-Speicher fest. Führen Sie an der Befehlszeile den folgenden Befehl aus:
Um die App mithilfe der Windows-Eingabeaufforderung lokal auszuführen, führen Sie den folgenden Befehl aus, und ersetzen Sie dabei <app-configuration-store-connection-string> durch die Verbindungszeichenfolge Ihres App-Konfigurationsspeichers:
```
setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"
```
Wenn Sie Windows PowerShell verwenden, führen Sie den folgenden Befehl aus, und ersetzen Sie dabei <app-configuration-store-connection-string> durch die Verbindungszeichenfolge Ihres App-Konfigurationsspeichers:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING = "<app-configuration-store-connection-string>"
```
Wenn Sie macOS verwenden, führen Sie den folgenden Befehl aus, und ersetzen Sie dabei <app-configuration-store-connection-string> durch die Verbindungszeichenfolge Ihres App-Konfigurationsspeichers:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Wenn Sie Linux verwenden, führen Sie den folgenden Befehl aus, und ersetzen Sie dabei <app-configuration-store-connection-string> durch die Verbindungszeichenfolge Ihres App-Konfigurationsspeichers:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Geben Sie mit dem folgenden Befehl den Wert der Umgebungsvariable aus, um zu überprüfen, ob sie richtig festgelegt wurde.
Starten Sie die Eingabeaufforderung über eine Windows-Eingabeaufforderung neu, damit die Änderung wirksam wird, und führen Sie den folgenden Befehl aus:
```
echo %AZURE_APPCONFIG_CONNECTION_STRING%
```
Führen Sie bei Verwendung von Windows PowerShell den folgenden Befehl aus:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING
```
Führen Sie bei Verwendung von macOS den folgenden Befehl aus:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```
Führen Sie bei Verwendung von Linux den folgenden Befehl aus:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```

Nachdem die Umgebungsvariable ordnungsgemäß festgelegt wurde, führen Sie den folgenden Befehl aus, um die App lokal auszuführen:

node app.js

Daraufhin sollte die folgende Ausgabe für jedes Beispiel angezeigt werden:

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

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

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

Bereinigen von Ressourcen

Wenn Sie die in diesem Artikel erstellten Ressourcen nicht mehr verwenden möchten, löschen Sie die erstellte Ressourcengruppe, um Kosten zu vermeiden.

Wichtig

Das Löschen einer Ressourcengruppe kann nicht rückgängig gemacht werden. Die Ressourcengruppe und alle darin enthaltenen Ressourcen werden unwiderruflich gelöscht. Achten Sie daher darauf, dass Sie nicht versehentlich die falsche Ressourcengruppe oder die falschen Ressourcen löschen. Falls Sie die Ressourcen für diesen Artikel in einer Ressourcengruppe erstellt haben, die andere beizubehaltende Ressourcen enthält, löschen Sie die Ressourcen einzeln über den entsprechenden Bereich, statt die Ressourcengruppe zu löschen.

Melden Sie sich beim Azure-Portal an, und klicken Sie auf Ressourcengruppen.
Geben Sie im Feld Nach Name filtern den Namen Ihrer Ressourcengruppe ein.
Wählen Sie in der Ergebnisliste den Ressourcengruppennamen aus, um eine Übersicht anzuzeigen.
Wählen Sie die Option Ressourcengruppe löschen.
Sie werden aufgefordert, das Löschen der Ressourcengruppe zu bestätigen. Geben Sie zur Bestätigung den Namen Ihrer Ressourcengruppe ein, und klicken Sie auf Löschen.

Daraufhin werden die Ressourcengruppe und alle darin enthaltenen Ressourcen gelöscht.

Nächste Schritte

In diesem Schnellstart haben Sie einen neuen App Configuration-Speicher erstellt und gelernt, wie Sie mithilfe des JavaScript-Anbieters von App Configuration in einer Node.js-App auf Schlüsselwerte zugreifen.

Weitere Codebeispiele finden Sie unter:

JavaScript-Anbieter von Azure App Configuration