자습서: JavaScript에서 동적 구성 사용

아티클
05/27/2024

이 자습서에서는 JavaScript 애플리케이션에서 동적 구성을 사용하도록 설정하는 방법을 알아봅니다. 이 자습서의 예제는 JavaScript 빠른 시작에 도입된 샘플 애플리케이션을 기반으로 합니다. 계속 진행하기 전에 먼저 Azure App Configuration을 사용하여 JavaScript 앱 만들기를 완료하세요.

필수 조건

빠른 시작 Azure App Configuration을 사용하여 JavaScript 앱 만들기를 완료하세요.

키-값 추가

Azure App Configuration 저장소에 다음 키-값을 추가합니다. Azure Portal 또는 CLI를 사용하여 저장소에 키-값을 추가하는 방법에 대한 자세한 내용은 키-값 만들기로 이동합니다.

키	값	Label	내용 유형
message	Hello World!	비워 둡니다.	비워 둡니다.
sentinel	1	비워 둡니다.	비워 둡니다.

참고 항목

sentinel 키는 다른 모든 키의 변경을 완료한 후 업데이트하는 키입니다. 앱은 Sentinel 키를 모니터링합니다. 변경이 감지되면 앱이 모든 구성 값을 새로 고칩니다. 이 방식은 앱에서 구성의 일관성을 보장하고, Azure App Configuration 저장소에 대한 전체 요청 수를 줄이는 데(모든 키의 변경 내용을 모니터링하는 것에 비해) 도움이 됩니다.

App Configuration에서 데이터 다시 로드

다음 예제에서는 콘솔 애플리케이션에서 새로 고칠 수 있는 구성 값을 사용하는 방법을 보여 줍니다. 애플리케이션이 App Configuration에서 로드한 구성 데이터를 Map 또는 구성 개체 중 하나로 사용하는 방식에 따라 다음 지침을 선택합니다.

app.js 파일을 열고 load 함수를 업데이트합니다. 새로 고침을 사용하도록 설정하고 새로 고침 옵션을 구성하는 refreshOptions 매개 변수를 추가합니다. 서버에서 변경 내용이 검색되면 로드한 구성이 업데이트됩니다. 기본 새로 고침 간격은 30초이지만 refreshIntervalInMs 속성으로 이를 재정의할 수 있습니다.

구성을 맵으로 사용
구성을 개체로 사용

// Connecting to Azure App Configuration using connection string
const settings = await load(connectionString, {
    // Setting up to refresh when the sentinel key is changed
    refreshOptions: {
        enabled: true,
        watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
    }
});

구성 개체는 constructConfigurationObject 함수를 호출하여 생성됩니다. 최신 구성을 보장하려면 구성 변경이 감지되고 구성이 업데이트될 때마다 트리거되는 onRefresh 콜백의 구성 개체를 업데이트합니다.

// Connecting to Azure App Configuration using connection string
const settings = await load(connectionString, {
    // Setting up to refresh when the sentinel key is changed
    refreshOptions: {
        enabled: true,
        watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
    }
});

// Constructing configuration object
let config = settings.constructConfigurationObject();

// Setting up callback to ensure `config` object is updated once configuration is changed.
settings.onRefresh(() => {
    config = settings.constructConfigurationObject();
});

refreshOptions 하나만 설정해도 구성이 자동으로 새로 고쳐지지는 않습니다. 새로 고침을 트리거하려면 refresh 메서드를 호출해야 합니다. 이 디자인은 애플리케이션이 유휴 상태일 때 App Configuration에 대한 불필요한 요청을 방지합니다. 애플리케이션 활동이 발생하는 refresh 호출을 포함해야 합니다. 이를 활동 기반 구성 새로 고침이라고 합니다. 예를 들어, 들어오는 메시지 또는 주문을 처리할 때 또는 복잡한 작업을 수행하는 반복 내에서 refresh를 호출할 수 있습니다. 아니면, 애플리케이션이 항상 활성 상태인 경우 타이머를 사용할 수 있습니다. 이 예제에서는 예시용 루프에서 refresh를 호출합니다. 어떤 이유로 refresh 호출이 실패하더라도 애플리케이션은 캐시된 구성을 계속 사용합니다. 구성된 새로 고침 간격이 지나고 refresh 호출이 애플리케이션 작업에 의해 트리거되는 경우 다른 시도가 수행됩니다. refresh를 호출하는 것은 구성된 새로 고침 간격이 지나기 전에 작동하지 않으므로 자주 호출하더라도 성능에 미치는 영향은 최소화됩니다.

다음 코드를 추가하여 감시된 키-값의 구성 변경 내용을 폴링합니다.
- 구성을 맵으로 사용
- 구성을 개체로 사용
```
// Polling for configuration changes every 5 seconds
while (true) {
    await sleepInMs(5000); // Waiting before the next refresh
    await settings.refresh(); // Refreshing the configuration setting
    console.log(settings.get("message")); // Consume current value of message from a Map
}
```
```
// Polling for configuration changes every 5 seconds
while (true) {
    await sleepInMs(5000); // Waiting before the next refresh
    await settings.refresh(); // Refreshing the configuration setting
    console.log(config.message); // Consume current value of message from an object
}
```

이제 app.js 파일은 다음 코드 조각과 같이 표시됩니다.

구성을 맵으로 사용
구성을 개체로 사용

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;

async function run() {
    // Connecting to Azure App Configuration using connection string
    const settings = await load(connectionString, {
        // Setting up to refresh when the sentinel key is changed
        refreshOptions: {
            enabled: true,
            watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
        }
    });

    // Polling for configuration changes every 5 seconds
    while (true) {
        await sleepInMs(5000); // Waiting before the next refresh
        await settings.refresh(); // Refreshing the configuration setting
        console.log(settings.get("message")); // Consume current value of message from a Map
    }
}

run().catch(console.error);

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const connectionString = process.env.AZURE_APPCONFIG_CONNECTION_STRING;

async function run() {
    // Connecting to Azure App Configuration using connection string
    const settings = await load(connectionString, {
        // Setting up to refresh when the sentinel key is changed
        refreshOptions: {
            enabled: true,
            watchedSettings: [{ key: "sentinel" }] // Watch for changes to the key "sentinel" and refreshes the configuration when it changes
        }
    });

    // Constructing configuration object
    let config = settings.constructConfigurationObject();

    // Setting up callback to ensure `config` object is updated once configuration is changed.
    settings.onRefresh(() => {
        config = settings.constructConfigurationObject();
    });

    // Polling for configuration changes every 5 seconds
    while (true) {
        await sleepInMs(5000); // Waiting before the next refresh
        await settings.refresh(); // Refreshing the configuration setting
        console.log(config.message); // Consume current value of message from an object
    }
}

run().catch(console.error);

애플리케이션 실행

스크립트를 실행합니다.
```
node app.js
```
출력을 확인합니다.
```
Hello World!
```
5초마다 새 줄에 "Hello World!"를 계속 출력합니다.
다음 키-값을 Azure App Configuration 저장소로 업데이트합니다. message 키 값을 먼저 업데이트한 다음 sentinel 값을 업데이트합니다.

키 값 Label 내용 유형

message Hello World - 업데이트됨! 비워 둡니다. 비워 둡니다.

sentinel 2 비워 둡니다. 비워 둡니다.
값이 업데이트되면 새로 고침 간격 후에 업데이트된 값이 출력됩니다.
```
Hello World - Updated!
```

키	값	Label	내용 유형
message	Hello World - 업데이트됨!	비워 둡니다.	비워 둡니다.
sentinel	2	비워 둡니다.	비워 둡니다.

리소스 정리

이 문서에서 만든 리소스를 계속 사용하지 않으려면 여기서 만든 리소스 그룹을 삭제하여 요금이 부과되지 않도록 합니다.

Important

리소스 그룹을 삭제하면 다시 되돌릴 수 없습니다. 리소스 그룹 및 포함된 모든 리소스가 영구적으로 삭제됩니다. 잘못된 리소스 그룹 또는 리소스를 자동으로 삭제하지 않도록 합니다. 유지하려는 다른 리소스가 포함된 리소스 그룹 내에서 이 문서에 대한 리소스를 만든 경우 리소스 그룹을 삭제하는 대신 해당 창에서 각 리소스를 개별적으로 삭제합니다.

Azure Portal에 로그인하고 리소스 그룹을 선택합니다.
이름으로 필터링 상자에서 리소스 그룹의 이름을 입력합니다.
결과 목록에서 리소스 그룹 이름을 선택하여 개요를 확인합니다.
리소스 그룹 삭제를 선택합니다.
리소스 그룹 삭제를 확인하는 메시지가 표시됩니다. 리소스 그룹의 이름을 입력하여 확인하고 삭제를 선택합니다.

잠시 후, 리소스 그룹 및 모든 해당 리소스가 삭제됩니다.

다음 단계

이 자습서에서는 JavaScript 앱을 사용하도록 설정하여 Azure App Configuration에서 구성 설정을 동적으로 새로 고칩니다. Azure 관리 ID를 사용하여 Azure App Configuration에 대한 액세스를 간소화하는 방법을 알아보려면 다음 자습서로 계속 진행하세요.

관리 ID 통합

다음을 통해 공유