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

[アーティクル]
04/23/2024

このクイックスタートでは、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 ストアからデータを読み込みます。

プロジェクト用に app-configuration-quickstart という名前の新しいディレクトリを作成します。
```
mkdir app-configuration-quickstart
```
新しく作成した app-configuration-quickstart ディレクトリに切り替えます。
```
cd app-configuration-quickstart
```
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.app.greeting);   // config.app.greeting: Hello World
    console.log("config.app.json:", config.app.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);

アプリケーションの実行

AZURE_APPCONFIG_CONNECTION_STRING という名前の環境変数を設定し、それを App Configuration ストアへの接続文字列に設定します。コマンドラインで次のコマンドを実行します。
ローカル環境で Windows コマンドプロンプトを使用してアプリを実行するには、次のコマンドを実行します。<app-configuration-store-connection-string> を実際のアプリ構成ストアの接続文字列に置き換えてください。
```
setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"
```
Windows PowerShell を使う場合は、次のコマンドを実行し、<app-configuration-store-connection-string> を実際のアプリ構成ストアの接続文字列に置き換えます。
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING = "<app-configuration-store-connection-string>"
```
macOS を使う場合は、次のコマンドを実行し、<app-configuration-store-connection-string> を実際のアプリ構成ストアの接続文字列に置き換えます。
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Linux を使う場合は、次のコマンドを実行し、<app-configuration-store-connection-string> を実際のアプリ構成ストアの接続文字列に置き換えます。
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
次のコマンドを使用して環境変数の値を出力し、正しく設定されていることを確認します。
Windows コマンドプロンプトを使用し、コマンドプロンプトを再起動して変更を反映させ、次のコマンドを実行します。
```
echo %AZURE_APPCONFIG_CONNECTION_STRING%
```
Windows PowerShell を使用する場合は、次のコマンドを実行します。
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING
```
MacOS を使用する場合は、次のコマンドを実行します。
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```
Linux を使用する場合は、次のコマンドを実行します。
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```

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

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

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

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

重要

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

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

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

次のステップ

このクイックスタートでは、新しい App Configuration ストアを作成し、Node.js アプリで App Configuration JavaScript プロバイダーを使ってキーと値を操作する方法を説明しました。構成設定を動的に更新するようにアプリを構成する方法については、次のチュートリアルに進んでください。

動的な構成を有効にする

次の方法で共有

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

前提条件

キーと値を追加する

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

App Configuration ストアに接続する

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

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

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

アプリケーションの実行

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

次のステップ

フィードバック

その他のリソース

次の方法で共有

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

前提条件

キーと値を追加する

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

App Configuration ストアに接続する

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

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

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

アプリケーションの実行

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

次のステップ

フィードバック

その他のリソース

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