Snabbstart: Skapa en JavaScript-app med Azure App Configuration

Artikel
04/19/2024

I den här snabbstarten använder du Azure App Configuration för att centralisera lagring och hantering av programinställningar med hjälp av Azure App Configuration JavaScript-providerklientbiblioteket.

Appkonfigurationsprovidern för JavaScript bygger på Azure SDK för JavaScript och är utformad för att vara enklare att använda med rikare funktioner. Det ger åtkomst till nyckelvärden i App Configuration som ett Map objekt. Det erbjuder funktioner som konfigurationssammansättning från flera etiketter, nyckelprefix trimning, automatisk upplösning av Key Vault-referenser och många fler. Den här självstudien visar till exempel hur du använder JavaScript-providern i en Node.js app.

Förutsättningar

Ett Azure-konto med en aktiv prenumeration. Skapa en kostnadsfritt.
Ett appkonfigurationsarkiv. Skapa en butik.
LTS-versioner av Node.js. Information om hur du installerar Node.js antingen direkt i Windows eller med hjälp av Windows-undersystem för Linux (WSL) finns i Kom igång med Node.js

Lägga till nyckelvärden

Lägg till följande nyckelvärden i App Configuration Store. Mer information om hur du lägger till nyckelvärden i ett arkiv med hjälp av Azure-portalen eller CLI finns i Skapa ett nyckelvärde.

Tangent	Värde	Innehållstyp
meddelande	Meddelande från Azure App Configuration	Lämna tom
app.greeting	Hello World	Lämna tom
app.json	{"myKey":"myValue"}	application/json

Skapa en Node.js-konsolapp

I den här självstudien skapar du en Node.js-konsolapp och läser in data från appkonfigurationsarkivet.

Skapa en ny katalog för projektet med namnet app-configuration-quickstart.
```
mkdir app-configuration-quickstart
```
Växla till den nyligen skapade katalogen app-configuration-quickstart .
```
cd app-configuration-quickstart
```
Installera Azure App Configuration-providern med hjälp npm install av kommandot .
```
npm install @azure/app-configuration-provider
```

Anslut till ett appkonfigurationsarkiv

Följande exempel visar hur du hämtar konfigurationsdata från Azure App Configuration och använder dem i ditt program. Som standard läses nyckelvärdena in som ett Map objekt, så att du kan komma åt varje nyckelvärde med dess fullständiga nyckelnamn. Men om ditt program använder konfigurationsobjekt kan du använda hjälp-API:et constructConfigurationObject som skapar ett konfigurationsobjekt baserat på nyckelvärdena som läses in från Azure App Configuration.

Skapa en fil med namnet app.js i katalogen app-configuration-quickstart och kopiera koden från varje exempel.

Exempel 1: Läs in nyckelvärden med standardväljare

I det här exemplet ansluter du till Azure App Configuration med hjälp av en anslutningssträng och läser in nyckelvärden utan att ange avancerade alternativ. Som standard läses alla nyckelvärden in utan etikett.

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

Exempel 2: Läs in specifika nyckelvärden med hjälp av väljare

I det här exemplet läser du in en delmängd nyckelvärden genom att ange alternativet selectors . Endast nycklar som börjar med "app" läses in. Observera att du kan ange flera väljare baserat på dina behov, var och en med keyFilter och labelFilter egenskaper.

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

Exempel 3: Läs in nyckelvärden och trimma prefix från nycklar

I det här exemplet läser du in nyckelvärden med alternativet trimKeyPrefixes. När nyckelvärden har lästs in trimmas prefixet "app" från alla nycklar. Detta är användbart när du vill läsa in konfigurationer som är specifika för ditt program genom att filtrera till ett visst nyckelprefix, men du inte vill att koden ska bära prefixet varje gång den kommer åt konfigurationen.

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

Kör appen

Ange en miljövariabel med namnet AZURE_APPCONFIG_CONNECTION_STRING och ange den till anslutningssträng i appkonfigurationsarkivet. Kör följande kommando på kommandoraden:
Kör följande kommando för att köra appen lokalt med hjälp av Windows-kommandotolken och ersätt <app-configuration-store-connection-string> med anslutningssträng i appkonfigurationsarkivet:
```
setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"
```
Om du använder Windows PowerShell kör du följande kommando och ersätter <app-configuration-store-connection-string> med anslutningssträng i appkonfigurationsarkivet:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING = "<app-configuration-store-connection-string>"
```
Om du använder macOS kör du följande kommando och ersätter <app-configuration-store-connection-string> med anslutningssträng i appkonfigurationsarkivet:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Om du använder Linux kör du följande kommando och ersätter <app-configuration-store-connection-string> med anslutningssträng i appkonfigurationsarkivet:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Skriv ut värdet för miljövariabeln för att verifiera att den har angetts korrekt med följande kommando.
Starta om kommandotolken med hjälp av Windows-kommandotolken så att ändringen börjar gälla och kör följande kommando:
```
echo %AZURE_APPCONFIG_CONNECTION_STRING%
```
Om du använder Windows PowerShell kör du följande kommando:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING
```
Om du använder macOS kör du följande kommando:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```
Om du använder Linux kör du följande kommando:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```

När miljövariabeln har angetts korrekt kör du följande kommando för att köra appen lokalt:

node app.js

Du bör se följande utdata för varje exempel:

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

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

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

Rensa resurser

Om du inte vill fortsätta använda resurserna som skapas i den här artikeln tar du bort resursgruppen som du skapade här för att undvika avgifter.

Viktigt!

Att ta bort en resursgrupp kan inte ångras. Resursgruppen och alla resurser i den tas bort permanent. Se till att du inte oavsiktligt tar bort fel resursgrupp eller resurser. Om du har skapat resurserna för den här artikeln i en resursgrupp som innehåller andra resurser som du vill behålla tar du bort varje resurs individuellt från respektive fönster i stället för att ta bort resursgruppen.

Logga in på Azure-portalen och välj Resursgrupper.
I rutan Filtrera efter namn anger du namnet på resursgruppen.
I resultatlistan väljer du resursgruppens namn för att se en översikt.
Välj Ta bort resursgrupp.
Du blir ombedd att bekräfta borttagningen av resursgruppen. Ange namnet på resursgruppen för att bekräfta och välj Ta bort.

Efter en liten stund tas resursgruppen och alla dess resurser bort.

Nästa steg

I den här snabbstarten skapade du ett nytt App Configuration Store och lärde dig att komma åt nyckelvärden med hjälp av App Configuration JavaScript-providern i en Node.js-app.

Fler kodexempel finns i:

Azure App Configuration JavaScript-provider