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

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

前提条件

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

キー値を作成する

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

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

コード サンプル

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

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

• App Configuration ストアに接続する
• 構成設定を取得する
• 構成設定を追加する
• 構成設定のリストを取得する
• 構成設定をロックする
• 構成設定をロック解除する
• 構成設定を更新する
• 構成設定を削除する

App Configuration ストアに接続する

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

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

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

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

const connection_string = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
const client = new AppConfigurationClient(connection_string);

構成設定を取得する

次のコード スニペットでは、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);

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

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

    const connection_string = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
    const client = new AppConfigurationClient(connection_string);

    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 (推奨) または接続文字列を使って環境変数を構成します。

   • 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 のキー値にアクセスする方法について説明しました。

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

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