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

2025-05-20

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

필수 조건

빠른 시작 Azure App Configuration을 사용하여 JavaScript 앱 만들기를 완료하세요.
@azure/app-configuration-provider 패키지를 버전 2.0.0 이상으로 업데이트합니다.

키-값 추가

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

키	값	라벨	내용 유형
메시지	전 세계 여러분 안녕하세요!	비워 둡니다.	비워 둡니다.

콘솔 애플리케이션

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

App Configuration에서 데이터 로드

Microsoft Entra ID(권장) 또는 연결 문자열 사용하여 App Configuration에 연결할 수 있습니다. 다음 코드 조각에서는 Microsoft Entra ID를 사용하는 방법을 보여 줍니다. DefaultAzureCredential을 사용하여 App Configuration 저장소에 인증합니다. 필수 구성 요소에 나열된 빠른 시작을 완료하는 동안 이미 App Configuration 데이터 판독기 역할에 자격 증명을 할당했습니다.

app.js 파일을 열고 load 함수를 업데이트합니다. 새로 고침을 사용하도록 설정하고 새로 고침 옵션을 구성하는 refreshOptions 매개 변수를 추가합니다. 서버에서 변경 내용이 검색되면 로드한 구성이 업데이트됩니다. 기본 새로 고침 간격은 30초이지만 refreshIntervalInMs 속성으로 이를 재정의할 수 있습니다.
- 구성을 맵으로 사용
- 구성을 개체로 사용
```
// Connecting to Azure App Configuration using endpoint and token credential
const appConfig = await load(endpoint, credential, {
    // Enabling the dynamic refresh
    refreshOptions: {
        enabled: true
    }
});
```
구성 개체는 constructConfigurationObject 함수를 호출하여 생성됩니다. 최신 구성을 보장하려면 구성 변경이 감지되고 구성이 업데이트될 때마다 트리거되는 onRefresh 콜백의 구성 개체를 업데이트합니다.
```
// Connecting to Azure App Configuration using endpoint and token credential
const appConfig = await load(endpoint, credential, {
    // Enabling the dynamic refresh
    refreshOptions: {
        enabled: true
    }
});

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

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

"새로 고침이 활성화되었지만 감시된 설정이 지정되지 않았습니다."라는 오류가 표시되면 패키지를 버전 @azure/app-configuration-provider 이상으로 업데이트 하세요.

팁 (조언)

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

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

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

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

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const { DefaultAzureCredential } = require("@azure/identity");
const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility

async function run() {
    // Connecting to Azure App Configuration using endpoint and token credential
    const appConfig = await load(endpoint, credential, {
        // Enabling the dynamic refresh
        refreshOptions: {
            enabled: true
        }
    });

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

run().catch(console.error);

const sleepInMs = require("util").promisify(setTimeout);
const { load } = require("@azure/app-configuration-provider");
const { DefaultAzureCredential } = require("@azure/identity");
const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility

async function run() {
    // Connecting to Azure App Configuration using endpoint and token credential
    const appConfig = await load(endpoint, credential, {
        // Enabling the dynamic refresh
        refreshOptions: {
            enabled: true
        }
    });

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

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

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

run().catch(console.error);

애플리케이션 실행

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

키 값 라벨 내용 유형

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

키	값	라벨	내용 유형
메시지	Hello World - 업데이트됨!	비워 둡니다.	비워 둡니다.

서버 애플리케이션

다음 예제에서는 새로 고칠 수 있는 구성 값을 사용 하도록 기존 http 서버를 업데이트 하는 방법을 보여 집니다.

명명 server.js 된 새 JavaScript 파일을 만들고 다음 코드를 추가합니다.

const http = require('http');

function startServer() {
    const server = http.createServer((req, res) => {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end("Hello World!");
    });

    const hostname = "localhost";
    const port = 3000;
    server.listen(port, hostname, () => {
    console.log(`Server running at http://localhost:${port}/`);
    });
}

startServer();

스크립트를 실행합니다.
```
node server.js
```
방문 http://localhost:3000 하면 다음과 같은 응답이 표시됩니다.

App Configuration에서 데이터 로드

App Configuration을 server.js 사용하도록 업데이트하고 동적 새로 고침을 사용하도록 설정합니다.

const http = require("http");

const { load } = require("@azure/app-configuration-provider");
const { DefaultAzureCredential } = require("@azure/identity");
const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility

let appConfig;
async function initializeConfig() {
    appConfig = await load(endpoint, credential, {
        refreshOptions: {
            enabled: true,
            refreshIntervalInMs: 15_000 // set the refresh interval
        }
    });
}

function startServer() {
    const server = http.createServer((req, res) => {
        // refresh the configuration asynchronously when there is any incoming request
        appConfig.refresh();
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end(appConfig.get("message"));
    });

    const hostname = "localhost";
    const port = 3000;
    server.listen(port, hostname, () => {
    console.log(`Server running at http://localhost:${port}/`);
    });
}

// Initialize the configuration and then start the server
initializeConfig()
    .then(() => startServer());

요청 기반 구성 새로 고침

대부분의 경우 App Configuration 공급자의 새로 고침 작업은 no-op으로 처리될 수 있습니다. 설정한 새로 고침 간격 시간이 경과한 경우에만 App Configuration의 값을 확인하는 요청을 보냅니다.

웹 애플리케이션에 대한 요청 기반 구성 새로 고침을 구현하는 것이 좋습니다. 구성 새로 고침은 웹앱에 들어오는 요청에 의해 트리거됩니다. 들어오는 요청이 없는 경우 앱이 유휴 상태이면 새로 고침이 발생하지 않습니다. 앱이 활성화된 경우 미들웨어 또는 유사한 메커니즘을 사용하여 애플리케이션에 들어오는 모든 요청에 대한 호출을 트리거 appConfig.refresh() 할 수 있습니다.

변경 감지를 위해 App Configuration에 보낸 요청이 실패하면 앱은 캐시된 구성을 계속 사용합니다. 앱에 새로 들어오는 요청이 있는 경우 변경 내용을 확인하기 위한 새로운 시도가 주기적으로 이루어집니다.
구성 새로 고침은 앱의 들어오는 요청 처리에 대해 비동기식으로 수행됩니다. 새로 고침을 트리거한 들어오는 요청을 차단하거나 속도가 저하되지 않습니다. 새로 고침을 트리거한 요청은 업데이트된 구성 값을 얻지 못할 수도 있지만 후속 요청은 새 구성 값을 얻을 수 있습니다.

애플리케이션 실행

http 서버를 다시 시작합니다.
```
node server.js
```
App Configuration 저장소의 키인 http://localhost:3000 응답을 방문하여 message 확인합니다.
다음 키-값을 Azure App Configuration 저장소로 업데이트합니다. 키의 값을 업데이트합니다 message.

키 값 라벨 내용 유형

메시지 Hello World - 업데이트됨! 비워 둡니다. 비워 둡니다.
약 15초 후에 페이지를 여러 번 새로 고치면 메시지가 업데이트됩니다.

키	값	라벨	내용 유형
메시지	Hello World - 업데이트됨!	비워 둡니다.	비워 둡니다.

리소스 정리

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

중요합니다

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

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

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

다음 단계

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

관리 ID 통합

JavaScript 구성 공급자 라이브러리의 전체 기능 개요를 보려면 다음 문서를 계속 진행합니다.

JavaScript 구성 공급자

다음을 통해 공유

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

필수 조건

키-값 추가

콘솔 애플리케이션

App Configuration에서 데이터 로드

애플리케이션 실행

서버 애플리케이션

App Configuration에서 데이터 로드

요청 기반 구성 새로 고침

애플리케이션 실행

리소스 정리

다음 단계

피드백

추가 리소스