クイックスタート: Azure App Configuration を使用した JavaScript アプリの作成

このクイックスタートでは、Azure App Configuration JavaScript プロバイダー クライアント ライブラリを使用し、Azure App Configuration でアプリケーション設定のストレージと管理を一元化します。

JavaScript 用の App Configuration プロバイダーは、Azure SDK for JavaScript を基に構築されており、より豊富な機能で使いやすく設計されています。 これにより、Map オブジェクトとして App Configuration のキーと値にアクセスできます。 複数のラベルからの構成合成、キー プレフィックスのトリミング、Key Vault 参照の自動解決などの機能が提供されます。 例として、このチュートリアルでは、Node.js アプリで JavaScript プロバイダーを使う方法を示します。

前提条件

• アクティブなサブスクリプションが含まれる Azure アカウント。 無料で作成できます。
• App Configuration ストア。 ストアを作成する。
• Node.js の LTS バージョン。 Node.js を Windows に直接インストールするか、Linux 用 Windows サブシステム (WSL) を使用してインストールする方法については、「Node.js の概要」を参照してください。

キーと値を追加する

App Configuration ストアに次のキーと値を追加します。 Azure portal または CLI を使用してストアにキーと値を追加する方法の詳細については、「キーと値を作成する」を参照してください。

キー	値	Content type
message	Azure App Configuration からのメッセージ	空のままにします
app.greeting	Hello World	空のままにします
app.json	{"myKey":"myValue"}	アプリケーション /json

Node.js コンソール アプリを作成する

このチュートリアルでは、Node.js コンソール アプリを作成し、App Configuration ストアからデータを読み込みます。

1. プロジェクト用に app-configuration-quickstart という名前の新しいディレクトリを作成します。

   mkdir app-configuration-quickstart
   

2. 新しく作成した app-configuration-quickstart ディレクトリに切り替えます。

   cd app-configuration-quickstart
   

3. npm install コマンドを使用して、Azure App Configuration プロバイダーをインストールします。

   npm install @azure/app-configuration-provider
   

App Configuration ストアに接続する

次の例では、Azure App Configuration から構成データを取得し、アプリケーションでそれを使用する方法を示します。 既定では、キー値は Map オブジェクトとして読み込まれ、完全なキー名を使用して各キー値にアクセスできます。 ただし、アプリケーションで構成オブジェクトを使用する場合は、Azure App Configuration から読み込まれたキー値に基づいて構成オブジェクトを作成する constructConfigurationObject ヘルパー API を使用できます。

app-configuration-quickstart ディレクトリで app.js という名前のファイルを作成し、各サンプルからコードをコピーします。

サンプル 1: 既定のセレクターを使用してキー値を読み込む

このサンプルでは、接続文字列を使用して Azure App Configuration に接続し、詳細オプションを指定せずにキー値を読み込みます。 既定では、ラベルのないすべてのキー値が読み込まれます。

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

サンプル 2: セレクターを使用して特定のキー値を読み込む

このサンプルでは、selectors オプションを指定しキー値のサブセットを読み込みます。 "app." で始まるキーのみが読み込まれます。 ニーズに基づいて複数のセレクターを指定できることと、それぞれに keyFilter プロパティと 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);

サンプル 3: キー値を読み込み、キーからプレフィックスをトリミングする

このサンプルでは、オプション trimKeyPrefixes を使用してキー値を読み込みます。 キー値が読み込まれると、プレフィックス "app." がすべてのキーからトリミングされます。 これは、アプリケーションに固有の構成を、特定のキー プレフィックスでフィルター処理して読み込むが、構成にアクセスするたびにコードにプレフィックスを含めないようにする場合に便利です。

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

アプリケーションの実行

1. AZURE_APPCONFIG_CONNECTION_STRING という名前の環境変数を設定し、それを App Configuration ストアへの接続文字列に設定します。 コマンド ラインで次のコマンドを実行します。

   Windows コマンド プロンプト

   ローカル環境で Windows コマンド プロンプトを使用してアプリを実行するには、次のコマンドを実行します。<app-configuration-store-connection-string> を実際のアプリ構成ストアの接続文字列に置き換えてください。

   setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"
   

   PowerShell

   Windows PowerShell を使う場合は、次のコマンドを実行し、<app-configuration-store-connection-string> を実際のアプリ構成ストアの接続文字列に置き換えます。

   $Env:AZURE_APPCONFIG_CONNECTION_STRING = "<app-configuration-store-connection-string>"
   

   macOS

   macOS を使う場合は、次のコマンドを実行し、<app-configuration-store-connection-string> を実際のアプリ構成ストアの接続文字列に置き換えます。

   export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
   

   Linux

   Linux を使う場合は、次のコマンドを実行し、<app-configuration-store-connection-string> を実際のアプリ構成ストアの接続文字列に置き換えます。

   export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
   

2. 次のコマンドを使用して環境変数の値を出力し、正しく設定されていることを確認します。

   Windows コマンド プロンプト

   Windows コマンド プロンプトを使用し、コマンド プロンプトを再起動して変更を反映させ、次のコマンドを実行します。

   echo %AZURE_APPCONFIG_CONNECTION_STRING%
   

   PowerShell

   Windows PowerShell を使用する場合は、次のコマンドを実行します。

   $Env:AZURE_APPCONFIG_CONNECTION_STRING
   

   macOS

   MacOS を使用する場合は、次のコマンドを実行します。

   echo "$AZURE_APPCONFIG_CONNECTION_STRING"
   

   Linux

   Linux を使用する場合は、次のコマンドを実行します。

   echo "$AZURE_APPCONFIG_CONNECTION_STRING"
   

3. 環境変数が適切に設定されたら、次のコマンドを実行してアプリをローカルで実行します。

   node app.js
   

   各サンプルに対して次の出力が表示されます。

   サンプル 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' }
   

   サンプル 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' }
   

   サンプル 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' }
   

リソースをクリーンアップする

この記事で作成したリソースを継続して使用しない場合は、ここで作成したリソース グループを削除して課金されないようにしてください。

重要

リソース グループを削除すると、元に戻すことができません。 リソース グループとそのすべてのリソースは完全に削除されます。 間違ったリソース グループやリソースをうっかり削除しないようにしてください。 この記事のリソースを、保持したい他のリソースを含むリソース グループ内に作成した場合は、リソース グループを削除する代わりに、各リソースをそれぞれのペインから個別に削除します。

1. Azure portal にサインインし、 [リソース グループ] を選択します。
2. [名前でフィルター] ボックスにリソース グループの名前を入力します。
3. 結果一覧でリソース グループ名を選択し、概要を表示します。
4. [リソース グループの削除] を選択します。
5. リソース グループの削除の確認を求めるメッセージが表示されます。 確認のためにリソース グループの名前を入力し、 [削除] を選択します。

しばらくすると、リソース グループとそのすべてのリソースが削除されます。

次のステップ

このクイックスタートでは、新しい App Configuration ストアを作成し、Node.js アプリで App Configuration JavaScript プロバイダーを使ってキーと値を操作する方法を説明しました。

その他のコード サンプルについては、以下をご覧ください。

Azure App Configuration JavaScript プロバイダー