Guia de início rápido: criar um aplicativo JavaScript com a Configuração de Aplicativo do Azure

Artigo
06/25/2024

Neste início rápido, você usa a Configuração do Aplicativo do Azure para centralizar o armazenamento e o gerenciamento das configurações do aplicativo usando a biblioteca de cliente do provedor JavaScript da Configuração do Aplicativo do Azure.

O provedor de Configuração de Aplicativo para JavaScript foi criado com base no SDK do Azure para JavaScript e foi projetado para ser mais fácil de usar com recursos mais avançados. Ele permite o acesso a valores-chave na Configuração do Aplicativo como um Map objeto. Ele oferece recursos como composição de configuração de vários rótulos, corte de prefixo de chave, resolução automática de referências do Key Vault e muito mais. Como exemplo, este tutorial mostra como usar o provedor JavaScript em um aplicativo Node.js.

Pré-requisitos

Uma conta do Azure com uma subscrição ativa. Crie um gratuitamente.
Uma loja de configuração de aplicativos. Crie uma loja.
Versões LTS do Node.js. Para obter informações sobre como instalar Node.js diretamente no Windows ou usando o Subsistema Windows para Linux (WSL), consulte Introdução ao Node.js

Adicionar valores-chave

Adicione os seguintes valores-chave à App Configuration store. Para obter mais informações sobre como adicionar valores-chave a uma loja usando o portal do Azure ou a CLI, vá para Criar um valor-chave.

Key	valor	Tipo do conteúdo
mensagem	Mensagem da Configuração do Aplicativo do Azure	Deixar em branco
app.saudação	Olá Mundo	Deixar em branco
app.json	{"myKey":"myValue"}	Aplicação/JSON

Criar um aplicativo de console Node.js

Neste tutorial, você cria um aplicativo de console Node.js e carrega dados da sua loja de configuração de aplicativos.

Crie um novo diretório para o projeto chamado app-configuration-quickstart.
```
mkdir app-configuration-quickstart
```
Alterne para o diretório app-configuration-quickstart recém-criado.
```
cd app-configuration-quickstart
```
Instale o provedor de Configuração de Aplicativo do Azure usando o npm install comando.
```
npm install @azure/app-configuration-provider
```

Conectar-se a uma loja de configuração de aplicativos

Os exemplos a seguir demonstram como recuperar dados de configuração da Configuração do Aplicativo do Azure e utilizá-los em seu aplicativo. Por padrão, os valores-chave são carregados como um Map objeto, permitindo que você acesse cada valor-chave usando seu nome de chave completo. No entanto, se seu aplicativo usa objetos de configuração, você pode usar a constructConfigurationObject API auxiliar que cria um objeto de configuração com base nos valores-chave carregados da Configuração do Aplicativo do Azure.

Crie um arquivo chamado app.js no diretório app-configuration-quickstart e copie o código de cada exemplo.

Amostra 1: Carregar valores-chave com o seletor padrão

Neste exemplo, você se conecta à Configuração do Aplicativo do Azure usando uma cadeia de conexão e carrega valores-chave sem especificar opções avançadas. Por padrão, ele carrega todos os valores-chave sem rótulo.

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

Amostra 2: Carregar valores-chave específicos usando seletores

Neste exemplo, você carrega um subconjunto de valores-chave especificando a selectors opção. Apenas as teclas que começam com "app." são carregadas. Observe que você pode especificar vários seletores com base em suas necessidades, cada um com keyFilter e labelFilter propriedades.

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

Exemplo 3: Carregar valores-chave e cortar prefixo de chaves

Neste exemplo, você carrega valores-chave com uma opção trimKeyPrefixes. Depois que os valores-chave são carregados, o prefixo "app." é cortado de todas as chaves. Isso é útil quando você deseja carregar configurações específicas para seu aplicativo filtrando para um determinado prefixo de chave, mas você não quer que seu código carregue o prefixo toda vez que ele acessa a configuração.

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

Executar a aplicação

Defina uma variável de ambiente chamada AZURE_APPCONFIG_CONNECTION_STRING e defina-a como a cadeia de conexão da sua loja de configuração de aplicativos. Na linha de comando, execute o seguinte comando:
Para executar o aplicativo localmente usando o prompt de comando do Windows, execute o seguinte comando e substitua <app-configuration-store-connection-string> pela cadeia de conexão do repositório de configuração do aplicativo:
```
setx AZURE_APPCONFIG_CONNECTION_STRING "<app-configuration-store-connection-string>"
```
Se você usar o Windows PowerShell, execute o seguinte comando e substitua <app-configuration-store-connection-string> pela cadeia de conexão do seu repositório de configuração de aplicativos:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING = "<app-configuration-store-connection-string>"
```
Se você usa macOS, execute o seguinte comando e substitua <app-configuration-store-connection-string> pela cadeia de conexão da sua loja de configuração de aplicativos:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Se você usa Linux, execute o seguinte comando e substitua <app-configuration-store-connection-string> pela cadeia de conexão da sua loja de configuração de aplicativos:
```
export AZURE_APPCONFIG_CONNECTION_STRING='<app-configuration-store-connection-string>'
```
Imprima o valor da variável de ambiente para validar se ela está definida corretamente com o comando a seguir.
Usando o prompt de comando do Windows, reinicie o prompt de comando para permitir que a alteração entre em vigor e execute o seguinte comando:
```
echo %AZURE_APPCONFIG_CONNECTION_STRING%
```
Se você usar o Windows PowerShell, execute o seguinte comando:
```
$Env:AZURE_APPCONFIG_CONNECTION_STRING
```
Se você usa macOS, execute o seguinte comando:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```
Se você usa Linux, execute o seguinte comando:
```
echo "$AZURE_APPCONFIG_CONNECTION_STRING"
```

Depois que a variável de ambiente estiver definida corretamente, execute o seguinte comando para executar o aplicativo localmente:

node app.js

Você deve ver a seguinte saída para cada exemplo:

Amostra 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' }

Amostra 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' }

Amostra 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' }

Clean up resources (Limpar recursos)

Se não quiser continuar a utilizar os recursos criados neste artigo, elimine o grupo de recursos que criou aqui para evitar cobranças.

Importante

A eliminação de um grupo de recursos é irreversível. O grupo de recursos e todos os recursos nele contidos são excluídos permanentemente. Certifique-se de não excluir acidentalmente o grupo de recursos ou recursos errados. Se você criou os recursos para este artigo dentro de um grupo de recursos que contém outros recursos que deseja manter, exclua cada recurso individualmente de seu respetivo painel em vez de excluir o grupo de recursos.

Entre no portal do Azure e selecione Grupos de recursos.
Na caixa Filtrar por nome, introduza o nome do seu grupo de recursos.
Na lista de resultados, selecione o nome do grupo de recursos para ver uma visão geral.
Selecione Eliminar grupo de recursos.
É-lhe pedido que confirme a eliminação do grupo de recursos. Insira o nome do grupo de recursos a ser confirmado e selecione Excluir.

Após alguns momentos, o grupo de recursos e todos os seus recursos são excluídos.

Próximos passos

Neste início rápido, você criou uma nova loja de Configuração de Aplicativo e aprendeu como acessar valores-chave usando o provedor JavaScript de Configuração de Aplicativo em um aplicativo Node.js. Para saber como configurar seu aplicativo para atualizar dinamicamente as definições de configuração, continue para o próximo tutorial.

Ativar configuração dinâmica

Partilhar via