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

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

必要條件

完成使用 Azure 應用程式組態建立 JavaScript 應用程式的快速入門。
將 @azure/app-configuration-provider 套件更新為 2.0.0 版或更新版本。

新增索引鍵/值

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

機碼	值	標籤	內容類型
訊息	世界您好！	保留空白	保留空白

主控台應用程式

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

從應用程式組態載入數據

您可以使用 Microsoft Entra ID 或連接字串連線到應用程式組態。下列代碼段示範如何使用 Microsoft Entra ID。您可以使用 DefaultAzureCredential 向應用程式組態存放區進行驗證。完成必要條件中列出的快速入門時，您已將認證指派給應用程式組態數據讀取者角色。

開啟檔案 app.js 並更新函 load 式。 refreshOptions新增參數以啟用重新整理並設定重新整理選項。在伺服器上偵測到變更時，將會更新載入的組態。根據預設，會使用 30 秒的重新整理間隔，但您可以使用屬性來覆寫它 refreshIntervalInMs 。
- 使用組態作為對應
- 使用組態作為物件
```
// 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();
});
```
注意

如果您收到錯誤：「已啟用重新整理，但未指定任何監看的設定」，請將套件更新@azure/app-configuration-provider為 2.0.0 版或更新版本。

小提示

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

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

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

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

機碼值標籤內容類型

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

機碼	值	標籤	內容類型
訊息	Hello World - 已更新！	保留空白	保留空白

伺服器應用程式

下列範例示範如何更新現有的 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 ，您會看到回應：

從應用程式組態載入數據

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

要求驅動的設定重新整理

在大部分情況下，應用程式組態提供者的重新整理作業可以視為無作業。它只會在您設定的重新整理間隔時間通過時，傳送要求來檢查應用程式組態中的值。

建議您為 Web 應用程式實作要求驅動組態重新整理。設定重新整理是由對您 Web 應用程式的連入要求所觸發。如果您的應用程式處於閑置狀態，且沒有傳入要求，則不會進行重新整理。當您的應用程式處於使用中狀態時，您可以使用中間件或類似的機制，在每次連入要求時觸發 appConfig.refresh() 呼叫您的應用程式。

如果對應用程式組態的變更偵測要求失敗，您的應用程式會繼續使用快取的設定。在您的應用程式有新的傳入要求時，將會定期嘗試檢查變更。
相對於對您應用程式傳入要求的處理，系統會以非同步方式進行設定重新整理。其將不會封鎖已觸發重新整理的傳入要求或使其變慢。觸發重新整理的要求可能不會取得更新的設定值，但後續的要求將會取得新的設定值。

執行應用程式

重新啟動 HTTP 伺服器：
```
node server.js
```
請瀏覽http://localhost:3000並確認回應，這是message您應用程式組態存放區中的金鑰。
將下列索引鍵/值更新至 Azure 應用程式組態存放區。更新索引鍵 message的值。

機碼值標籤內容類型

訊息 Hello World - 已更新！ 保留空白保留空白
大約 15 秒之後，請重新整理頁面多次，並更新訊息。

機碼	值	標籤	內容類型
訊息	Hello World - 已更新！	保留空白	保留空白

清除資源

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

重要

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

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

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

下一步

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

受控識別整合

如需 JavaScript 設定提供者連結庫的完整功能取消，請繼續進行下列檔。

JavaScript 組態提供者

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-02-25

共用方式為

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

必要條件

新增索引鍵/值

主控台應用程式

從 應用程式組態 載入數據

執行應用程式

伺服器應用程式

從 應用程式組態 載入數據

要求驅動的設定重新整理

執行應用程式

清除資源

下一步

意見反應

其他資源

從應用程式組態載入數據

從應用程式組態載入數據