快速入門：使用 Azure 應用程式組態建立 JavaScript 應用程式
在本快速入門中，您會使用 Azure 應用程式組態，使用 Azure 應用程式組態 JavaScript 提供者用戶端連結庫來集中儲存和管理應用程式設定。
適用於 JavaScript 的應用程式組態提供者建置在適用於 JavaScript 的 Azure SDK 之上，其設計訴求是要更容易搭配更豐富的功能使用。
它可讓您以 Map 物件的形式存取應用程式組態中的索引鍵/值。
它提供多個標籤的組態組合、索引鍵前置詞修剪、Key Vault 參考的自動解析等功能。
例如，本教學課程示範如何在 Node.js 應用程式中使用 JavaScript 提供者。
必要條件
- 具有有效訂用帳戶的 Azure 帳戶。 免費建立一個。
- 應用程式組態存放區。 建立存放區。
- Node.js 的 LTS 版本。 如需關於直接在 Windows 上或是使用 Windows 子系統 Linux 版 (WSL) 安裝 Node.js，請參閱開始使用 Node.js
新增索引鍵/值
將下列索引鍵/值新增至應用程式組態存放區。 如需如何使用 Azure 入口網站或 CLI 將索引鍵/值新增至存放區的詳細資訊，請移至建立索引鍵/值。
| 機碼 | 值 | 內容類型 |
|---|---|---|
| message | 來自 Azure 應用程式組態的訊息 | 保留空白 |
| app.greeting | Hello World | 保留空白 |
| app.json | {"myKey":"myValue"} | application/json |
建立Node.js主控台應用程式
在本教學課程中，您會建立Node.js控制台應用程式，並從 應用程式組態 存放區載入數據。
為專案建立名為 app-configuration-quickstart 的新目錄。
mkdir app-configuration-quickstart切換至新建立的 app-configuration-quickstart 目錄。
cd app-configuration-quickstart使用
npm install命令安裝 Azure 應用程式組態提供者。npm install @azure/app-configuration-provider
連線至應用程式組態存放區
下列範例示範如何從 Azure 應用程式組態 擷取組態數據，並在應用程式中加以利用。
根據預設，索引鍵/值會載入為 Map 物件，讓您能夠使用其完整索引鍵名稱來存取每個索引鍵值。
不過，如果您的應用程式使用組態物件，您可以使用constructConfigurationObject協助程式 API，根據從 Azure 應用程式組態 載入的索引鍵值來建立組態物件。
在 app-configuration-quickstart 目錄中建立名為 app.js 的檔案，並從每個範例複製程序代碼。
範例 1：使用預設選取器載入索引鍵/值
在此範例中，您會使用 連接字串和載入索引鍵/值來連線到 Azure 應用程式組態，而不需要指定進階選項。 根據預設，它會載入不含標籤的所有索引鍵/值。
const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
async function run() {
console.log("Sample 1: Load key-values with default selector");
// Connect to Azure App Configuration using a connection string and load all key-values with null label.
const settings = await load(connectionString);
console.log("---Consume configuration as a Map---");
// Find the key "message" and print its value.
console.log('settings.get("message"):', settings.get("message")); // settings.get("message"): Message from Azure App Configuration
// Find the key "app.greeting" and print its value.
console.log('settings.get("app.greeting"):', settings.get("app.greeting")); // settings.get("app.greeting"): Hello World
// Find the key "app.json" whose value is an object.
console.log('settings.get("app.json"):', settings.get("app.json")); // settings.get("app.json"): { myKey: 'myValue' }
console.log("---Consume configuration as an object---");
// Construct configuration object from loaded key-values, by default "." is used to separate hierarchical keys.
const config = settings.constructConfigurationObject();
// Use dot-notation to access configuration
console.log("config.message:", config.message); // config.message: Message from Azure App Configuration
console.log("config.app.greeting:", config.app.greeting); // config.app.greeting: Hello World
console.log("config.app.json:", config.app.json); // config.app.json: { myKey: 'myValue' }
}
run().catch(console.error);
範例 2：使用選取器載入特定索引鍵/值
在此範例中，您可以藉由指定 selectors 選項來載入索引鍵/值的子集。
只會載入開頭為 「app」 的金鑰。
請注意，您可以根據需求指定多個選取器，每個選取器都有 keyFilter 和 labelFilter 屬性。
const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
async function run() {
console.log("Sample 2: Load specific key-values using selectors");
// Load a subset of keys starting with "app." prefix.
const settings = await load(connectionString, {
selectors: [{
keyFilter: "app.*"
}],
});
console.log("---Consume configuration as a Map---");
// The key "message" is not loaded as it does not start with "app."
console.log('settings.has("message"):', settings.has("message")); // settings.has("message"): false
// The key "app.greeting" is loaded
console.log('settings.has("app.greeting"):', settings.has("app.greeting")); // settings.has("app.greeting"): true
// The key "app.json" is loaded
console.log('settings.has("app.json"):', settings.has("app.json")); // settings.has("app.json"): true
console.log("---Consume configuration as an object---");
// Construct configuration object from loaded key-values
const config = settings.constructConfigurationObject({ separator: "." });
// Use dot-notation to access configuration
console.log("config.message:", config.message); // config.message: undefined
console.log("config.app.greeting:", config.greeting); // config.app.greeting: Hello World
console.log("config.app.json:", config.json); // config.app.json: { myKey: 'myValue' }
}
run().catch(console.error);
範例 3：從索引鍵載入索引鍵值和修剪前置詞
在此範例中，您會使用 選項 trimKeyPrefixes載入索引鍵/值。
載入索引鍵/值之後，會從所有索引鍵修剪前置詞 “app”。
當您想要藉由篩選至特定索引鍵前置詞來載入應用程式特定的組態時，這非常有用，但您不希望程式代碼在每次存取組態時攜帶前置詞。
const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;
async function run() {
console.log("Sample 3: Load key-values and trim prefix from keys");
// Load all key-values with no label, and trim "app." prefix from all keys.
const settings = await load(connectionString, {
selectors: [{
keyFilter: "app.*"
}],
trimKeyPrefixes: ["app."]
});
console.log("---Consume configuration as a Map---");
// The original key "app.greeting" is trimmed as "greeting".
console.log('settings.get("greeting"):', settings.get("greeting")); // settings.get("greeting"): Hello World
// The original key "app.json" is trimmed as "json".
console.log('settings.get("json"):', settings.get("json")); // settings.get("json"): { myKey: 'myValue' }
console.log("---Consume configuration as an object---");
// Construct configuration object from loaded key-values with trimmed keys.
const config = settings.constructConfigurationObject();
// Use dot-notation to access configuration
console.log("config.greeting:", config.greeting); // config.greeting: Hello World
console.log("config.json:", config.json); // config.json: { myKey: 'myValue' }
}
run().catch(console.error);
執行應用程式
設定名為 AZURE_APPCONFIG_CONNECTION_STRING 的環境變數，並設為應用程式組態存放區的連接字串。 在命令列中執行下列命令：
若要使用 Windows 命令提示字元在本機執行應用程式，請執行下列命令，並以應用程式組態存放區的連接字串取代
<app-configuration-store-connection-string>：setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"列印環境變數的值，以驗證它是否已使用下列命令正確設定。
使用 Windows 命令提示字元時，重新啟動命令提示字元，以便變更生效並執行下列命令：
echo %AZURE_APPCONFIG_CONNECTION_STRING%正確設定環境變數之後，請執行下列命令，在本機執行應用程式：
node app.js您應該看到每個範例的下列輸出：
範例 1
Sample 1: Load key-values with default selector ---Consume configuration as a Map--- settings.get("message"): Message from Azure App Configuration settings.get("app.greeting"): Hello World settings.get("app.json"): { myKey: 'myValue' } ---Consume configuration as an object--- config.message: Message from Azure App Configuration config.app.greeting: Hello World config.app.json: { myKey: 'myValue' }範例 2
Sample 2: Load specific key-values using selectors ---Consume configuration as a Map--- settings.has("message"): false settings.has("app.greeting"): true settings.has("app.json"): true ---Consume configuration as an object--- config.message: undefined config.app.greeting: Hello World config.app.json: { myKey: 'myValue' }範例 3
Sample 3: Load key-values and trim prefix from keys ---Consume configuration as a Map--- settings.get("greeting"): Hello World settings.get("json"): { myKey: 'myValue' } ---Consume configuration as an object--- config.greeting: Hello World config.json: { myKey: 'myValue' }
清除資源
如果您不想繼續使用本文中建立的資源，請刪除在此處建立的資源群組，以避免產生費用。
重要
刪除資源群組是無法回復的動作。 資源群組和其中的所有資源都將被永久刪除。 請確定您不會誤刪錯誤的資源群組或資源。 如果您是在包含需保留其他資源的資源群組內部，建立本文的資源，則可以從每個資源各自的窗格中個別刪除每個資源，而不必刪除整個資源群組。
- 登入 Azure 入口網站，然後選取 [資源群組]。
- 在 [依名稱篩選] 方塊中，輸入您資源群組的名稱。
- 在結果清單中，選取資源群組名稱以查看概觀。
- 選取 [刪除資源群組]。
- 系統將會要求您確認是否刪除資源群組。 輸入您資源群組的名稱以進行確認，然後選取 [刪除]。
不久後，系統便會刪除該資源群組及其所有的資源。
下一步
在本快速入門中，您建立了新的應用程式組態存放區，並了解如何在 Node.js 應用程式中使用應用程式組態 JavaScript 提供者存取索引鍵/值。
如需更多程式碼範例，請瀏覽：