共用方式為

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

  • 發行項

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

重要

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

必要條件

建立金鑰值

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

機碼 值
TestApp:Settings:Message 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 或 連接字串，連線到您的 應用程式組態 存放區。

您可以使用 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}`);

新增組態設定

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

鎖定組態設定

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

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

解除鎖定組態設定

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

    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='<endpoint-of-your-app-configuration-store>'

  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 應用程式