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

[アーティクル]
05/28/2024

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

前提条件

「クイックスタート: Azure App Configuration を使用した JavaScript アプリの作成」を済ませます。

キーと値を追加する

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

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

Note

''センチネルキー'' は、他のすべてのキーの変更を完了した後に更新するキーです。センチネルキーをアプリで監視してください。変更が検出されると、アプリによって構成の値がすべて更新されます。このアプローチは、アプリの構成の一貫性を確保するのに役立ち、すべてのキーの変更を監視する場合と比べると、Azure App Configuration ストアに対して行う全体的な要求の数が少なくなります。

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

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

ファイル app.js を開き、load 関数を更新します。 refreshOptions パラメーターを追加して更新を有効にし、更新オプションを構成します。読み込まれた構成は、サーバーで変更が検出されると更新されます。既定で使われる更新間隔は 30 秒ですが、refreshIntervalInMs プロパティでオーバーライドできます。

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

// Connecting to Azure App Configuration using connection string
const settings = await load(connectionString, {
    // Setting up to refresh when the sentinel key is changed
    refreshOptions: {
        enabled: true,
        watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
    }
});

構成オブジェクトは、constructConfigurationObject 関数を呼び出して構築します。構成を最新の状態に保つには、構成の変更が検出されて構成が更新されるたびにトリガーされる onRefresh コールバックで、構成オブジェクトを更新します。

// Connecting to Azure App Configuration using connection string
const settings = await load(connectionString, {
    // Setting up to refresh when the sentinel key is changed
    refreshOptions: {
        enabled: true,
        watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
    }
});

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

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

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

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

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

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

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;

async function run() {
    // Connecting to Azure App Configuration using connection string
    const settings = await load(connectionString, {
        // Setting up to refresh when the sentinel key is changed
        refreshOptions: {
            enabled: true,
            watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
        }
    });

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

run().catch(console.error);

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;

async function run() {
    // Connecting to Azure App Configuration using connection string
    const settings = await load(connectionString, {
        // Setting up to refresh when the sentinel key is changed
        refreshOptions: {
            enabled: true,
            watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
        }
    });

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

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

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

run().catch(console.error);

アプリケーションの実行

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

Key 値 Label Content type

message Hello World - Updated! 空のままにします空のままにします

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

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

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

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

重要

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

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

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

次のステップ

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

マネージド ID の統合

次の方法で共有