JavaScript용 Azure SDK를 사용하여 Node.js 앱 만들기

이 문서에서는 JavaScript용 Azure SDK를 사용하여 Azure App Configuration의 키-값에 액세스하는 방법의 예를 보여 줍니다.

팁

App Configuration은 JavaScript SDK를 기반으로 빌드되고 더 다양한 기능으로 사용하기 쉽도록 설계된 JavaScript 공급자 라이브러리를 제공합니다. 구성 설정을 맵 개체처럼 사용할 수 있으며 여러 레이블의 구성 컴퍼지션, 키 이름 트리밍 및 Key Vault 참조의 자동 확인과 같은 다른 기능을 제공합니다. 자세히 알아보려면 JavaScript 빠른 시작으로 이동하세요.

필수 조건

• 활성 구독이 있는 Azure 계정 - 무료로 만들기
• App Configuration 저장소. 저장소를 만듭니다.
• Node.js의 LTS 버전. Windows에서 직접 또는 WSL(Linux용 Windows 하위 시스템)을 사용하여 Node.js를 설치하는 방법에 대한 자세한 내용은 Node.js 시작하기를 참조하세요.

키-값 만들기

App Configuration 저장소에 다음 키-값을 추가하고 레이블 및 콘텐츠 형식을 기본값으로 둡니다. Azure Portal 또는 CLI를 사용하여 저장소에 키-값을 추가하는 방법에 대한 자세한 내용은 키-값 만들기로 이동합니다.

키	값
TestApp:Settings:Message	Azure App Configuration의 데이터

Node.js 앱 설정

1. 이 자습서에서는 app-configuration-example이라는 프로젝트에 대한 새 디렉터리를 만듭니다.

   mkdir app-configuration-example
   

2. 새로 만든 app-configuration-example 디렉터리로 전환합니다.

   cd app-configuration-example
   

3. npm install 명령을 사용하여 Azure App Configuration 클라이언트 라이브러리를 설치합니다.

   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용 App Configuration 클라이언트 라이브러리를 시작하는 데 도움이 됩니다. 애플리케이션의 경우 필요에 따라 예외를 처리하는 것도 고려해야 합니다. 예외 처리에 대한 자세한 내용은 당사의 JavaScript SDK 설명서를 참조하세요.

App Configuration 연결 문자열 구성

1. AZURE_APPCONFIG_CONNECTION_STRING이라는 환경 변수를 설정하고, App Configuration 저장소에 대한 연결 문자열로 설정합니다. 명령줄에서 다음 명령을 실행합니다.

   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 클라이언트 라이브러리를 사용하여 일반적인 작업을 수행하는 방법을 보여 줍니다. 이러한 코드 조각을 이전에 만든 app-configuration-example.js 파일의 run 함수 본문에 추가합니다.

참고 항목

App Configuration 클라이언트 라이브러리는 키-값 개체를 ConfigurationSetting으로 참조합니다. 따라서 이 문서에서는 App Configuration 저장소의 키-값을 구성 설정이라고 합니다.

아래 방법 알아보기:

• App Configuration 저장소에 연결
• 구성 설정 가져오기
• 구성 설정 추가
• 구성 설정 목록 가져오기
• 구성 설정 잠금
• 구성 설정 잠금 해제
• 구성 설정 업데이트
• 구성 설정 삭제

App Configuration 저장소에 연결

다음 코드 조각에서는 환경 변수에 저장된 연결 문자열을 사용하여 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 메서드를 호출합니다. 이미 저장소에 있는 구성 설정을 추가하려고 하면 이 메서드에서 예외를 throw합니다. 이 예외를 방지하려면 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}`);
    }

구성 설정 잠금

App Configuration에서 키-값의 잠금 상태는 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}`);

앱 실행

이 예제에서 Azure App Configuration 클라이언트 라이브러리를 사용하여 Azure Portal을 통해 만든 구성 설정을 검색하고, 새 설정을 추가하고, 기존 설정 목록을 검색하고, 설정을 잠금 및 잠금 해제하고, 설정을 업데이트하고, 마지막으로 설정을 삭제하는 Node.js 앱을 만들었습니다.

이 시점에서 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 파일이 포함된 디렉터리로 이동하고, 다음 Python 명령을 실행하여 앱을 실행합니다.

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!

리소스 정리

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

Important

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

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

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

다음 단계

이 가이드에서는 JavaScript용 Azure SDK를 사용하여 Azure App Configuration의 키-값에 액세스하는 방법을 보여 줬습니다.

추가 코드 샘플은 다음을 방문하세요.

Azure App Configuration 클라이언트 라이브러리 샘플

JavaScript 앱에서 Azure App Configuration을 사용하는 방법을 알아보려면 다음으로 이동하세요.

Azure App Configuration을 사용하여 JavaScript 앱 만들기