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

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

提示

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

必要條件

• 包含作用中訂用帳戶的 Azure 帳戶 - 建立免費帳戶。
• 應用程式組態存放區。 建立存放區。
• Node.js 的 LTS 版本。 如需關於直接在 Windows 上或是使用 Windows 子系統 Linux 版 (WSL) 安裝 Node.js，請參閱開始使用 Node.js

建立金鑰值

將下列金鑰值新增至應用程式組態存放區，並保留標籤和內容類型的預設值。 如需如何使用 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 文件。

設定您的應用程式組態連接字串

1. 設定名為 AZURE_APPCONFIG_CONNECTION_STRING 的環境變數，並設為應用程式組態存放區的連接字串。 在命令列中執行下列命令：

   Windows 命令提示字元

   若要使用 Windows 命令提示字元在本地執行應用程式，請執行下列命令，並以應用程式組態存放區的連接字串取代 <app-configuration-store-connection-string>：

   setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"
   

   PowerShell

   如果您使用 Windows PowerShell，請執行下列命令，並以應用程式組態存放區的連接字串取代 <app-configuration-store-connection-string>：

   $Env:AZURE_APPCONFIG_CONNECTION_STRING = "<app-configuration-store-connection-string>"
   

   macOS

   如果您使用 macOS，請執行下列命令，並以應用程式組態存放區的連接字串取代 <app-configuration-store-connection-string>：

   export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
   

   Linux

   如果您使用 Linux，請執行下列命令，並以應用程式組態存放區的連接字串取代 <app-configuration-store-connection-string>：

   export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
   

2. 輸出環境變數的值，以使用下面的命令驗證其設定是否正確。

   Windows 命令提示字元

   使用 Windows 命令提示字元時，重新啟動命令提示字元，以便變更生效並執行下列命令：

   echo %AZURE_APPCONFIG_CONNECTION_STRING%
   

   PowerShell

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

   $Env:AZURE_APPCONFIG_CONNECTION_STRING
   

   macOS

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

   echo "$AZURE_APPCONFIG_CONNECTION_STRING"
   

   Linux

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

   echo "$AZURE_APPCONFIG_CONNECTION_STRING"
   

程式碼範例

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

注意

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

在底下了解如何：

• 連線至應用程式組態存放區
• 取得組態設定
• 新增組態設定
• 取得組態設定清單
• 鎖定組態設定
• 解除鎖定組態設定
• 更新組態設定
• 刪除組態設定

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

下列程式碼片段使用儲存在環境變數中的連接字串建立 AppConfigurationClient 的執行個體。

const connection_string = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
const client = new AppConfigurationClient(connection_string);

取得組態設定

下列程式碼片段會依 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 { AppConfigurationClient } = require("@azure/app-configuration");

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

    const connection_string = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
    const client = new AppConfigurationClient(connection_string);

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

在主控台視窗中，瀏覽至包含 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 應用程式