使用 Azure SDK for JavaScript 建立 Node.js 應用程式

本文件顯示如何使用適用於 JavaScript 的 Azure SDK 存取 Azure 應用程式組態中的金鑰值範例。

重要

應用程式組態提供以 JavaScript SDK 為基礎建置的 JavaScript 提供者程式庫，其設計目的是更容易與更豐富的功能搭配使用。 這可讓組態設定像 Map 物件一樣使用，並提供其他功能，例如來自多個標籤的組態組合、金鑰名稱修剪，以及金鑰保存庫參考的自動解析。 移至 JavaScript 快速入門以深入了解。

必要條件

建立金鑰值

將下列金鑰值新增至應用程式組態存放區，並保留標籤和內容類型的預設值。 如需有關如何使用 Azure 入口網站或 CLI 將鍵值新增至存放區的詳細資訊，請參閱 建立鍵值。

鍵 值
TestApp：設定：訊息 Azure 應用程式組態中的資料

設定 Node.js 應用程式

  1. 在本教學課程中，您將為專案建立名為 app-configuration-example 的新目錄。

    mkdir app-configuration-example

  2. 切換至新建立的 app-configuration-example 目錄。

    cd app-configuration-example

  3. 使用 npm install 命令安裝 Azure 應用程式組態用戶端程式庫。

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

注意

這個範例中的程式碼片段幫助你開始使用 JavaScript 的應用程式配置客戶端函式庫。 在你的申請中，根據你的需求處理例外情況。 欲了解更多資訊，請參閱 JavaScript SDK 文件。

程式碼範例

本節中的範例程式碼片段示範如何使用適用於 JavaScript 的應用程式組態用戶端程式庫來執行一般作業。 將這些程式碼片段新增至您先前建立的 app-configuration-example.js 檔案中 run 函式的主體內。

注意

應用程式組態用戶端程式庫會將索引鍵/值物件稱作為 ConfigurationSetting。 因此，在本文中，應用程式組態存放區中的索引鍵/值會被稱作為組態設定。

學習怎麼做：

連線至應用程式組態存放區

下列代碼段會建立AppConfigurationClient的實例。 您可以使用 Microsoft Entra ID（建議使用）或連接字串，連線至您的 App Configuration 存放區。

您可以使用 DefaultAzureCredential 來向 應用程式組態 存放區進行驗證。 按照指示操作，將應用程式組態資料讀取者角色指派給您的認證。 執行應用程式之前，請務必預留足夠的時間，讓權限完成傳播。

const { DefaultAzureCredential } = require("@azure/identity");
const { AppConfigurationClient } = require("@azure/app-configuration");

const client = new AppConfigurationClient(
  process.env.AZURE_APPCONFIG_ENDPOINT,
  new DefaultAzureCredential()
);

取得組態設定

下列程式碼片段會依 key 名稱來擷取組態設定。

    const retrievedConfigSetting = await client.getConfigurationSetting({
        key: "TestApp:Settings:Message"
    });
    console.log("\nRetrieved configuration setting:");
    console.log(`Key: ${retrievedConfigSetting.key}, Value: ${retrievedConfigSetting.value}`);

新增組態設定

下列程式碼片段會建立具有 ConfigurationSetting 和 key 欄位的 value 物件，並叫用 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}`);
    }

鎖定組態設定

應用程式組態中索引鍵/值的鎖定狀態是由 readOnly 物件的 ConfigurationSetting 屬性所表示。 如果 readOnly 為 true，則會鎖定此設定。 您可以使用 setReadOnly 做為第二個引數來叫用 true 方法，以鎖定組態設定。

    const lockedConfigSetting = await client.setReadOnly(addedConfigSetting, true /** readOnly */);
    console.log(`\nRead-only status for ${lockedConfigSetting.key}: ${lockedConfigSetting.isReadOnly}`);

解除鎖定組態設定

如果 readOnly 的 ConfigurationSetting 屬性為 false，則會將此設定解除鎖定。 您可以使用 setReadOnly 做為第二個引數來叫用 false 方法，以解除鎖定組態設定。

    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}`);

執行應用程式

在此範例中，您已建立 Node.js 應用程式，其使用 Azure 應用程式組態用戶端程式庫來擷取透過 Azure 入口網站建立的組態設定、新增設定、擷取現有設定的清單、鎖定和解除鎖定設定、更新設定，最後刪除設定。

此時，您的 app-configuration-example.js 檔案應該會有下列程式碼：

const { DefaultAzureCredential } = require("@azure/identity");
const { AppConfigurationClient } = require("@azure/app-configuration");

async function run() {
    console.log("Azure App Configuration - JavaScript example");

    const client = new AppConfigurationClient(
        process.env.AZURE_APPCONFIG_ENDPOINT,
        new DefaultAzureCredential()
    );

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

設定環境變數

  1. 使用 Microsoft Entra ID 或 連接字串 來設定環境變數。

    將名為 AZURE_APPCONFIG_ENDPOINT 的環境變數設定為您在 Azure 入口網站中存放區 [概觀] 下找到的 [應用程式組態] 存放區端點。

    如果您使用 Windows 命令提示字元，請執行下列命令，然後重新啟動命令提示字元以讓變更生效：

    setx AZURE_APPCONFIG_ENDPOINT "endpoint-of-your-app-configuration-store"

    如果您使用 PowerShell，請執行下列命令：

    $Env:AZURE_APPCONFIG_ENDPOINT = "endpoint-of-your-app-configuration-store"

    如果您使用 macOS 或 Linux，請執行下列命令：

    export AZURE_APPCONFIG_ENDPOINT='<AppConfigurationEndpoint>'

  2. 在主控台視窗中，瀏覽至包含 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 入口網站，然後選取 [資源群組]。
  2. 在 [依名稱篩選] 方塊中，輸入您資源群組的名稱。
  3. 在結果清單中，選取資源群組名稱以查看概觀。
  4. 選取 [刪除資源群組]。
  5. 系統將會要求您確認是否刪除資源群組。 輸入您資源群組的名稱以進行確認，然後選取 [刪除]。

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

下一步

本指南示範如何使用適用於 JavaScript 的 Azure SDK 來存取 Azure 應用程式組態 中的鍵值。

如需其他程式碼範例，請造訪：

Azure 應用程式組態用戶端程式庫範例

若要了解如何搭配 JavaScript 應用程式使用 Azure 應用程式組態，請移至：

使用 Azure 應用程式組態建立 JavaScript 應用程式

  • 上次更新時間：