チュートリアル: JavaScript で動的な構成を使用する

[アーティクル]
03/03/2025

このチュートリアルでは、JavaScript アプリケーションで動的な構成を有効にする方法について説明します。このチュートリアルの例は、JavaScript のクイックスタートで紹介したサンプルアプリケーションが基になっています。先に進む前に、「Azure App Configuration を使用した JavaScript アプリの作成」を済ませてください。

前提条件

「クイックスタート: Azure App Configuration を使用した JavaScript アプリの作成」を済ませます。
@azure/app-configuration-provider パッケージをバージョン 2.0.0 以降に更新します。

キーと値を追加する

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

キー	値	Label	Content type
message	Hello World!	空のままにします	空のままにします

コンソールアプリケーション

次の例では、コンソールアプリケーションで更新可能な構成値を使用する方法を見ていきます。 App Configuration から読み込まれた構成データをアプリケーションで使用する方法 (Map または構成オブジェクトとして) に基づいて、次の手順を選んでください。

App Configuration からデータを読み込む

Microsoft Entra ID (推奨) または接続文字列を使用して App Configuration に接続できます。次のコードスニペットは、Microsoft Entra ID を使用する場合を示しています。 DefaultAzureCredential を使用して、App Configuration ストアに対する認証を行います。前提条件に一覧表示されているクイックスタートを完了するときに、既に資格情報に App Configuration データ閲覧者ロールを割り当てています。

ファイル app.js を開き、load 関数を更新します。 refreshOptions パラメーターを追加して更新を有効にし、更新オプションを構成します。読み込まれた構成は、サーバーで変更が検出されると更新されます。既定で使われる更新間隔は 30 秒ですが、refreshIntervalInMs プロパティでオーバーライドできます。
- 構成を Map として使用する
- 構成をオブジェクトとして使用する
```
// Connecting to Azure App Configuration using endpoint and token credential
const appConfig = await load(endpoint, credential, {
    // Enabling the dynamic refresh
    refreshOptions: {
        enabled: true
    }
});
```
構成オブジェクトは、constructConfigurationObject 関数を呼び出して構築します。構成を最新の状態に保つには、構成の変更が検出されて構成が更新されるたびにトリガーされる onRefresh コールバックで、構成オブジェクトを更新します。
```
// Connecting to Azure App Configuration using endpoint and token credential
const appConfig = await load(endpoint, credential, {
    // Enabling the dynamic refresh
    refreshOptions: {
        enabled: true
    }
});

// Constructing configuration object
let config = appConfig.constructConfigurationObject();

// Setting up callback to ensure `config` object is updated once configuration is changed.
appConfig.onRefresh(() => {
    config = appConfig.constructConfigurationObject();
});
```

Note

"更新は有効ですが、監視設定は指定されていません。" というエラーが表示された場合は、 @azure/app-configuration-provider パッケージをバージョン 2.0.0 以降に更新してください。

refreshOptions を設定しただけでは、構成は自動的に更新されません。 refresh メソッドを呼び出して、更新をトリガーする必要があります。このように設計すると、アプリケーションがアイドル状態のときに App Configuration に不要な要求が行われなくなります。アプリケーションのアクティビティが発生する場所に、refresh の呼び出しを含める必要があります。これは、アクティビティ駆動型の構成更新と呼ばれます。たとえば、受信メッセージや注文を処理するとき、または複雑なタスクを実行する反復内で、refresh を呼び出すことができます。または、アプリケーションが常にアクティブな場合は、タイマーを使うこともできます。この例では、デモンストレーションのため refresh をループで呼び出しています。何らかの理由で refresh の呼び出しが失敗した場合でも、アプリケーションはキャッシュされた構成を使い続けます。構成されている更新間隔が経過し、アプリケーションのアクティビティによって refresh の呼び出しがトリガーされると、もう 1 回試行されます。構成されている更新間隔が経過するまでは、refresh を呼び出しても何も行われないので、頻繁に呼び出された場合でも、パフォーマンスへの影響は最小限です。

監視対象のキーと値の構成変更をポーリングするには、次のコードを追加します。
- 構成を Map として使用する
- 構成をオブジェクトとして使用する
```
// Polling for configuration changes every 5 seconds
while (true) {
    console.log(appConfig.get("message")); // Consume current value of message from a Map
    appConfig.refresh(); // Refreshing the configuration setting asynchronously
    await sleepInMs(5000); // Waiting before the next refresh
}
```
```
// Polling for configuration changes every 5 seconds
while (true) {
    console.log(config.message); // Consume current value of message from an object
    appConfig.refresh(); // Refreshing the configuration setting asynchronously
    await sleepInMs(5000); // Waiting before the next refresh
}
```

これで、app.js ファイルは次のコードスニペットのようになります。

構成を Map として使用する
構成をオブジェクトとして使用する

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const { DefaultAzureCredential } = require("@azure/identity");
const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility

async function run() {
    // Connecting to Azure App Configuration using endpoint and token credential
    const appConfig = await load(endpoint, credential, {
        // Enabling the dynamic refresh
        refreshOptions: {
            enabled: true
        }
    });

    // Polling for configuration changes every 5 seconds
    while (true) {
        console.log(appConfig.get("message")); // Consume current value of message from a Map
        appConfig.refresh(); // Refreshing the configuration setting asynchronously
        await sleepInMs(5000); // Waiting before the next refresh
    }
}

run().catch(console.error);

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const { DefaultAzureCredential } = require("@azure/identity");
const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility

async function run() {
    // Connecting to Azure App Configuration using endpoint and token credential
    const appConfig = await load(endpoint, credential, {
        // Enabling the dynamic refresh
        refreshOptions: {
            enabled: true
        }
    });

    // Constructing configuration object
    let config = appConfig.constructConfigurationObject();

    // Setting up callback to ensure `config` object is updated once configuration is changed.
    appConfig.onRefresh(() => {
        config = appConfig.constructConfigurationObject();
    });

    // Polling for configuration changes every 5 seconds
    while (true) {
        console.log(config.message); // Consume current value of message from an object
        appConfig.refresh(); // Refreshing the configuration setting asynchronously
        await sleepInMs(5000); // Waiting before the next refresh
    }
}

run().catch(console.error);

アプリケーションの実行

スクリプトを実行します:
```
node app.js
```
出力を確認します:
```
Hello World!
```
5 秒ごとに "Hello World!" を新しい行に出力し続けます。
Azure App Configuration ストアに対して次のキーと値を更新します。キー message の値を更新します。

Key 値 Label Content type

message Hello World - Updated! 空のままにします空のままにします
値が更新されると、更新間隔の後で更新された値が出力されます。
```
Hello World - Updated!
```

Key	値	Label	Content type
message	Hello World - Updated!	空のままにします	空のままにします

サーバーアプリケーション

次の例は、更新可能な構成値を使用するように既存の HTTP サーバーを更新する方法を示しています。

server.js という名前の新しい javascript ファイルを作成し、次のコードを追加します。

const http = require('http');

function startServer() {
    const server = http.createServer((req, res) => {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end("Hello World!");
    });

    const hostname = "localhost";
    const port = 3000;
    server.listen(port, hostname, () => {
    console.log(`Server running at http://localhost:${port}/`);
    });
}

startServer();

スクリプトを実行します:
```
node server.js
```
http://localhost:3000 にアクセスすると、次の応答が表示されます。

App Configuration からデータを読み込む

App Configuration を使用し動的更新を有効にするように server.js を更新します。

const http = require("http");

const { load } = require("@azure/app-configuration-provider");
const { DefaultAzureCredential } = require("@azure/identity");
const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility

let appConfig;
async function initializeConfig() {
    appConfig = await load(endpoint, credential, {
        refreshOptions: {
            enabled: true,
            refreshIntervalInMs: 15_000 // set the refresh interval
        }
    });
}

function startServer() {
    const server = http.createServer((req, res) => {
        // refresh the configuration asynchronously when there is any incoming request
        appConfig.refresh();
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end(appConfig.get("message"));
    });

    const hostname = "localhost";
    const port = 3000;
    server.listen(port, hostname, () => {
    console.log(`Server running at http://localhost:${port}/`);
    });
}

// Initialize the configuration and then start the server
initializeConfig()
    .then(() => startServer());

要求ドリブン構成の更新

ほとんどの場合、App Configuration プロバイダーの更新操作は、操作が実行されないものとして扱うことができます。設定した更新間隔時間が経過した場合にのみ、App Configuration 内の値を確認する要求が送信されます。

Web アプリケーションの要求ドリブン構成の更新を実装することをお勧めします。構成の更新は、Web アプリで受信される要求によってトリガーされます。要求が受信されていない場合、アプリがアイドル状態の時は、更新は行われません。アプリがアクティブな場合は、ミドルウェアまたは同様のメカニズムを使用して、アプリケーションへのすべての受信要求に対して appConfig.refresh() 呼び出しをトリガーできます。

App Configuration に対する変更の検出の要求が失敗した場合、アプリではキャッシュされた構成が引き続き使用されます。アプリへの新しい要求の受信がある間、変更を確認する新しい試行が定期的に行われます。
構成の更新は、アプリでの要求の受信の処理とは非同期的に行われます。更新をトリガーした受信要求をブロックしたり、速度が低下することはありません。更新をトリガーした要求では、更新された構成値が取得されない場合がありますが、それ以降の要求では新しい構成値が取得されます。

アプリケーションの実行

HTTP サーバーを再起動します。
```
node server.js
```
http://localhost:3000 にアクセスし、App Configuration ストアの message キーである応答を確認します。
Azure App Configuration ストアに対して次のキーと値を更新します。キー message の値を更新します。

Key 値 Label Content type

message Hello World - Updated! 空のままにします空のままにします
約 15 秒後、ページを複数回更新すると、メッセージが更新されます。

Key	値	Label	Content type
message	Hello World - Updated!	空のままにします	空のままにします

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

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

重要

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

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

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

次のステップ

このチュートリアルでは、JavaScript アプリで Azure App Configuration から構成設定を動的に更新できるようにしました。 Azure App Configuration へのアクセスを効率化する Azure マネージド ID を使用する方法については、次のチュートリアルに進んでください。

マネージド ID の統合

JavaScript 構成プロバイダーライブラリの詳細な機能の説明については、次のドキュメントに進んでください。

JavaScript 構成プロバイダー

次の方法で共有

チュートリアル: JavaScript で動的な構成を使用する

前提条件

キーと値を追加する

コンソールアプリケーション

App Configuration からデータを読み込む

アプリケーションの実行

サーバーアプリケーション

App Configuration からデータを読み込む

要求ドリブン構成の更新

アプリケーションの実行

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

次のステップ

フィードバック

その他のリソース

次の方法で共有

チュートリアル: JavaScript で動的な構成を使用する

前提条件

キーと値を追加する

コンソール アプリケーション

App Configuration からデータを読み込む

アプリケーションの実行

サーバー アプリケーション

App Configuration からデータを読み込む

要求ドリブン構成の更新

アプリケーションの実行

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

次のステップ

フィードバック

その他のリソース

コンソールアプリケーション

サーバーアプリケーション