教學課程：在 JavaScript 中使用動態設定

發行項
05/22/2024

在本教學課程中，您將瞭解如何在 JavaScript 應用程式中啟用動態設定。本教學課程中的範例是以 JavaScript 快速入門中引進的範例應用程式為基礎。繼續之前，請先完成使用 Azure 應用程式組態建立 JavaScript 應用程式。

必要條件

完成使用 Azure 應用程式組態建立 JavaScript 應用程式的快速入門。

新增索引鍵/值

將下列金鑰值新增至 Azure 應用程式組態存放區。如需如何使用 Azure 入口網站或 CLI 將索引鍵/值新增至存放區的詳細資訊，請移至建立索引鍵/值。

機碼	值	標籤	內容類型
message	Hello World!	保留空白	保留空白
sentinel	1	保留空白	保留空白

注意

「Sentinel 金鑰」是您完成所有其他金鑰變更之後才更新的金鑰。您的應用程式會監視 Sentinel 金鑰。偵測到變更時，您的應用程式會重新整理所有設定值。相較於監視所有金鑰是否變更，此方法有助於確保應用程式中設定的一致性，並減少對 Azure 應用程式組態存放區提出的整體要求數目。

從應用程式設定重新載入資料

下列範例示範如何在控制台應用程式中使用可重新整理的組態值。根據應用程式如何使用從應用程式組態載入的組態數據，選擇下列指示，做為 Map 或組態物件。

開啟檔案 app.js 並更新函 load 式。 refreshOptions新增參數以啟用重新整理並設定重新整理選項。在伺服器上偵測到變更時，將會更新載入的組態。根據預設，會使用 30 秒的重新整理間隔，但您可以使用屬性來覆寫它 refreshIntervalInMs 。

使用組態作為對應
使用組態作為物件

// 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 方法來觸發重新整理。此設計可防止應用程式閑置時應用程式組態不必要的要求。您應該包含 refresh 應用程式活動發生所在的呼叫。這稱為 活動驅動組態重新整理。例如，您可以在 refresh 處理傳入訊息或訂單時，或在執行複雜工作的反覆項目內呼叫。或者，如果您的應用程式一律為使用中，您可以使用定時器。在此範例中， refresh 會在迴圈中呼叫，以供示範之用。即使 refresh 呼叫因任何原因而失敗，您的應用程式仍會繼續使用快取的組態。當設定的重新整理間隔通過，而且 refresh 呼叫是由您的應用程式活動觸發時，將會進行另一次嘗試。在設定的重新整理間隔經過之前，呼叫 refresh 是無作業，因此即使經常呼叫，其效能影響也很小。

新增下列程式代碼以輪詢受監看索引鍵/值的組態變更。
- 使用組態作為對應
- 使用組態作為物件
```
// 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 看起來應該像下列代碼段：

使用組態作為對應
使用組態作為物件

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 應用程式組態存放區。先更新索引鍵 message 的值，然後再 sentinel更新。

Key 值標籤內容類型

message Hello World - 已更新！ 保留空白保留空白

sentinel 2 保留空白保留空白
更新值之後，就會在重新整理間隔之後列印更新的值。
```
Hello World - Updated!
```

Key	值	標籤	內容類型
message	Hello World - 已更新！	保留空白	保留空白
sentinel	2	保留空白	保留空白

清除資源

如果您不想繼續使用本文中建立的資源，請刪除在此處建立的資源群組，以避免產生費用。

重要

刪除資源群組是無法回復的動作。資源群組和其中的所有資源都將被永久刪除。請確定您不會誤刪錯誤的資源群組或資源。如果您是在包含需保留其他資源的資源群組內部，建立本文的資源，則可以從每個資源各自的窗格中個別刪除每個資源，而不必刪除整個資源群組。

登入 Azure 入口網站，然後選取 [資源群組]。
在 [依名稱篩選] 方塊中，輸入您資源群組的名稱。
在結果清單中，選取資源群組名稱以查看概觀。
選取 [刪除資源群組]。
系統將會要求您確認是否刪除資源群組。輸入您資源群組的名稱以進行確認，然後選取 [刪除]。

不久後，系統便會刪除該資源群組及其所有的資源。

下一步

在本教學課程中，您已讓 JavaScript 應用程式能夠從 Azure 應用程式組態動態重新整理組態設定。如需了解如何使用 Azure 受控識別簡化存取 Azure 應用程式組態，請繼續進行下一個教學課程。

受控識別整合

共用方式為