次の方法で共有

Azure SDK for JavaScript を使用して Node.js アプリを作成する

  • [アーティクル]

このドキュメントでは、Azure SDK for JavaScript を使用して Azure App Configuration のキー値にアクセスする方法の例を示します。

重要

App Configuration には、JavaScript SDK に基づいて構築された JavaScript プロバイダー ライブラリが用意されており、より豊富な機能で使いやすく設計されています。 これにより、構成設定を Map オブジェクトのように使用でき、複数のラベルからの形状構成、キー名のトリミング、Key Vault 参照の自動解決などの他の機能が提供されます。 詳細については、 JavaScript のクイック スタート を参照してください。

前提条件

キー値を作成する

App Configuration ストアに次のキーと値を追加し、[ラベル] と [コンテンツのタイプ] を既定値のままにします。 Azure portal または CLI を使用してストアにキーと値を追加する方法の詳細については、キーと値の作成に関する記事を参照してください。

キー 値
TestApp:Settings:Message Azure App Configuration からのデータ

Node.js アプリの設定

  1. このチュートリアルでは、app-configuration-example という名前プロジェクトの新しいディレクトリを作成します。

    mkdir app-configuration-example

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

    cd app-configuration-example

  3. npm install コマンドを使用して、Azure App Configuration クライアント ライブラリをインストールします。

    npm install @azure/app-configuration

  4. app-configuration-example.js という名前の新しいファイルを app-configuration-example ディレクトリに作成し、次のコードを追加します:

    const { AppConfigurationClient } = require("@azure/app-configuration");

async function run() {
  console.log("Azure App Configuration - JavaScript example");
  // Example code goes here
}

run().catch(console.error);

Note

この例のコード スニペットは、JavaScript 用 App Configuration クライアント ライブラリの使用を開始するのに役立ちます。 ご自分のアプリケーションでは、必要に応じて例外の処理についても検討してください。 例外処理の詳細については、JavaScript SDK のドキュメント を参照してください。

コード サンプル

このセクションのサンプル コード スニペットでは、JavaScript 用 App Configuration クライアント ライブラリで一般的な操作を実行する方法を示します。 前に作成した app-configuration-example.js ファイルの run 関数本体に、これらのコード スニペットを追加します。

Note

App Configuration クライアント ライブラリは、キー値オブジェクトを ConfigurationSetting として参照します。 そのため、この記事では、App Configuration ストア内のキー値が構成設定として参照されます。

以下の方法について説明します。

App Configuration ストアに接続する

次のコード スニペットは、AppConfigurationClient のインスタンスを作成します。 Microsoft Entra ID (推奨) または接続文字列を使用して App Configuration ストアに接続できます。

DefaultAzureCredential を使って、App Configuration ストアに対する認証を行います。 手順に従って、資格情報に App Configuration データ閲覧者ロールを割り当てます。 アプリケーションを実行する前に、アクセス許可が伝わるのに十分な時間をおいてください。

const { DefaultAzureCredential } = require("@azure/identity");
const { AppConfigurationClient } = require("@azure/app-configuration");

const client = new AppConfigurationClient(
  process.env.AZURE_APPCONFIG_ENDPOINT,
  new DefaultAzureCredential()
);

構成設定を取得する

次のコード スニペットでは、key 名を指定して構成設定を取得します。

    const retrievedConfigSetting = await client.getConfigurationSetting({
        key: "TestApp:Settings:Message"
    });
    console.log("\nRetrieved configuration setting:");
    console.log(`Key: ${retrievedConfigSetting.key}, Value: ${retrievedConfigSetting.value}`);

構成設定を追加する

次のコード スニペットでは、key および value フィールドを備えた ConfigurationSetting オブジェクトを作成し、addConfigurationSetting メソッドを呼び出します。 このメソッドでは、自分のストアに既に存在する構成設定を追加しようとすると例外がスローされます。 この例外を回避する場合は、代わりに setConfigurationSetting メソッドを使用できます。

    const configSetting = {
        key:"TestApp:Settings:NewSetting",
        value:"New setting value"
    };
    const addedConfigSetting = await client.addConfigurationSetting(configSetting);
    console.log("\nAdded configuration setting:");
    console.log(`Key: ${addedConfigSetting.key}, Value: ${addedConfigSetting.value}`);

構成設定のリストを取得する

次のコード スニペットでは、構成設定のリストを取得します。 keyFilter および labelFilter 引数を指定して、それぞれ key と label に基づいてキー値をフィルターできます。 フィルターの詳細については、構成設定を照会する方法を確認してください。

    const filteredSettingsList = client.listConfigurationSettings({
        keyFilter: "TestApp*"
    });
    console.log("\nRetrieved list of configuration settings:");
    for await (const filteredSetting of filteredSettingsList) {
        console.log(`Key: ${filteredSetting.key}, Value: ${filteredSetting.value}`);
    }

構成設定をロックする

App Configuration 内のキー値のロック状態は、ConfigurationSetting オブジェクトの readOnly 属性によって示されます。 readOnly が true の場合、設定はロックされています。 setReadOnly メソッドは、構成設定をロックする 2 番目の引数として true を使用して呼び出すことができます。

    const lockedConfigSetting = await client.setReadOnly(addedConfigSetting, true /** readOnly */);
    console.log(`\nRead-only status for ${lockedConfigSetting.key}: ${lockedConfigSetting.isReadOnly}`);

構成設定をロック解除する

ConfigurationSetting の readOnly 属性が false の場合、設定はロック解除されています。 setReadOnly メソッドは、 false を 2 番目の引数として呼び出して、構成設定のロックを解除できます。

    const unlockedConfigSetting = await client.setReadOnly(lockedConfigSetting, false /** readOnly */);
    console.log(`\nRead-only status for ${unlockedConfigSetting.key}: ${unlockedConfigSetting.isReadOnly}`);

構成設定を更新する

setConfigurationSetting メソッドを使用して、既存の設定を更新したり新しい設定を作成したりできます。 次のコード スニペットでは、既存の構成設定の値を変更します。

    addedConfigSetting.value = "Value has been updated!";
    const updatedConfigSetting = await client.setConfigurationSetting(addedConfigSetting);
    console.log("\nUpdated configuration setting:");
    console.log(`Key: ${updatedConfigSetting.key}, Value: ${updatedConfigSetting.value}`);

構成設定を削除する

次のコード スニペットでは、key 名を指定して構成設定を削除します。

    const deletedConfigSetting = await client.deleteConfigurationSetting({
        key: "TestApp:Settings:NewSetting"
    });
    console.log("\nDeleted configuration setting:");
    console.log(`Key: ${deletedConfigSetting.key}, Value: ${deletedConfigSetting.value}`);

アプリを実行する

この例では、Azure App Configuration クライアント ライブラリを使用して、Azure portal で作成された構成設定の取得、新しい設定の追加、既存の設定の一覧の取得、設定のロックとロック解除、設定の更新、最後に設定の削除を行う Node.js アプリを作成しました。

この時点で、 app-configuration-example.js ファイルには次のコードが必要です:

const { DefaultAzureCredential } = require("@azure/identity");
const { AppConfigurationClient } = require("@azure/app-configuration");

async function run() {
    console.log("Azure App Configuration - JavaScript example");

    const client = new AppConfigurationClient(
        process.env.AZURE_APPCONFIG_ENDPOINT,
        new DefaultAzureCredential()
    );

    const retrievedConfigSetting = await client.getConfigurationSetting({
        key: "TestApp:Settings:Message"
    });
    console.log("\nRetrieved configuration setting:");
    console.log(`Key: ${retrievedConfigSetting.key}, Value: ${retrievedConfigSetting.value}`);

    const configSetting = {
        key: "TestApp:Settings:NewSetting",
        value: "New setting value"
    };
    const addedConfigSetting = await client.addConfigurationSetting(configSetting);
    console.log("Added configuration setting:");
    console.log(`Key: ${addedConfigSetting.key}, Value: ${addedConfigSetting.value}`);

    const filteredSettingsList = client.listConfigurationSettings({
        keyFilter: "TestApp*"
    });
    console.log("Retrieved list of configuration settings:");
    for await (const filteredSetting of filteredSettingsList) {
        console.log(`Key: ${filteredSetting.key}, Value: ${filteredSetting.value}`);
    }

    const lockedConfigSetting = await client.setReadOnly(addedConfigSetting, true /** readOnly */);
    console.log(`Read-only status for ${lockedConfigSetting.key}: ${lockedConfigSetting.isReadOnly}`);

    const unlockedConfigSetting = await client.setReadOnly(lockedConfigSetting, false /** readOnly */);
    console.log(`Read-only status for ${unlockedConfigSetting.key}: ${unlockedConfigSetting.isReadOnly}`);

    addedConfigSetting.value = "Value has been updated!";
    const updatedConfigSetting = await client.setConfigurationSetting(addedConfigSetting);
    console.log("Updated configuration setting:");
    console.log(`Key: ${updatedConfigSetting.key}, Value: ${updatedConfigSetting.value}`);

    const deletedConfigSetting = await client.deleteConfigurationSetting({
        key: "TestApp:Settings:NewSetting"
    });
    console.log("Deleted configuration setting:");
    console.log(`Key: ${deletedConfigSetting.key}, Value: ${deletedConfigSetting.value}`);
}

run().catch(console.error);

環境変数の構成

  1. Microsoft Entra ID (推奨) または接続文字列を使って環境変数を構成します。

    AZURE_APPCONFIG_ENDPOINT という名前の環境変数に、Azure portal でストアの [概要] にある App Configuration ストアのエンドポイントを設定します。

    Windows コマンド プロンプトを使用する場合は、次のコマンドを実行してコマンド プロンプトを再起動し、変更が反映されるようにします。

    setx AZURE_APPCONFIG_ENDPOINT "endpoint-of-your-app-configuration-store"

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

    $Env:AZURE_APPCONFIG_ENDPOINT = "endpoint-of-your-app-configuration-store"

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

    export AZURE_APPCONFIG_ENDPOINT='<endpoint-of-your-app-configuration-store>'

  2. コンソール ウィンドウで、app-configuration-example.js ファイルが含まれているディレクトリに移動し、次のコマンドを実行してアプリを実行します:

    node app.js

    次の出力が表示されます。

    Azure App Configuration - JavaScript example

Retrieved configuration setting:
Key: TestApp:Settings:Message, Value: Data from Azure App Configuration

Added configuration setting:
Key: TestApp:Settings:NewSetting, Value: New setting value

Retrieved list of configuration settings:
Key: TestApp:Settings:Message, Value: Data from Azure App Configuration
Key: TestApp:Settings:NewSetting, Value: New setting value

Read-only status for TestApp:Settings:NewSetting: true

Read-only status for TestApp:Settings:NewSetting: false

Updated configuration setting:
Key: TestApp:Settings:NewSetting, Value: Value has been updated!

Deleted configuration setting:
Key: TestApp:Settings:NewSetting, Value: Value has been updated!

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

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

重要

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

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

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

次のステップ

このガイドでは、Azure SDK for JavaScript を使用して Azure App Configuration のキー値にアクセスする方法について説明しました。

その他のコード サンプルについては、次を参照してください。

Azure App Configuration クライアント ライブラリのサンプル

JavaScript アプリで Azure App Configuration を使用する方法については、次のページを参照してください:

Azure App Configuration を使用して JavaScript アプリを作成する