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

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

ヒント

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

前提条件

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

キー値を作成する

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 のドキュメント を参照してください。

App Configuration 接続文字列の構成

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"
   

コード サンプル

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

Note

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

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

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

App Configuration ストアに接続する

次のコード スニペットでは、ご自分の環境変数に格納された接続文字列を使用して、AppConfigurationClient のインスタンスを作成します。

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

コンソール ウィンドウで、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 アプリを作成する