Experts in Angular

The Twelve-Factor AppIII. Config – Armazenar configurações no ambiente
Separar configurações do código para evitar problemas entre ambientes de desenvolvimento e produção

III. Config – Armazenar configurações no ambiente

Separar configurações do código para evitar problemas entre ambientes de desenvolvimento e produção

3º Fator: Armazenamento de Configurações no Ambiente

A forma como uma aplicação gerencia suas configurações é crucial para garantir a sua flexibilidade e portabilidade. No contexto do Angular 18+, o terceiro fator da metodologia de doze fatores — armazenar configurações no ambiente — ganha ainda mais relevância, especialmente ao lidar com diferentes ambientes de deploy, como desenvolvimento, homologação e produção.

O Que é Considerado Configuração?

Configuração refere-se a tudo que pode variar entre diferentes deploys da aplicação. Isso inclui:

  • Credenciais de serviços externos (bancos de dados, APIs, etc.).
  • URLs de APIs ou outros serviços de suporte.
  • Chaves secretas e tokens de autenticação.
  • Configurações específicas por ambiente, como o nome de domínio usado em produção ou o modo de execução (desenvolvimento ou produção).

Essas configurações não devem estar embutidas no código da aplicação, pois isso quebra o princípio de separação entre código e configuração. Quando essas informações são armazenadas no código, qualquer mudança para um novo ambiente de execução requer alterações no código, o que não é uma prática segura nem escalável.

Configuração em Variáveis de Ambiente

Na abordagem de doze fatores, todas as configurações que podem variar entre ambientes devem ser armazenadas em variáveis de ambiente (environment variables ou env vars). Isso garante que o mesmo código base possa ser utilizado em diferentes ambientes, simplesmente alterando os valores das variáveis de ambiente sem precisar modificar o código.

Implementação no Angular

No Angular, a forma mais comum de gerenciar configurações específicas para diferentes ambientes é através dos arquivos de configuração para cada ambiente (por exemplo, environment.ts para desenvolvimento e environment.prod.ts para produção). Esses arquivos armazenam as configurações específicas de cada ambiente, mas é importante que as credenciais sensíveis sejam sempre configuradas como variáveis de ambiente, para não correr o risco de incluí-las no código.

Por exemplo, o arquivo environment.ts pode ter uma configuração assim:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

Enquanto o arquivo environment.prod.ts pode ter:

export const environment = {
  production: true,
  apiUrl: process.env.API_URL // Aqui está utilizando a variável de ambiente
};

Aqui, a URL da API é controlada pela variável de ambiente API_URL, que será configurada no ambiente de execução, mas o código base permanece o mesmo.

Benefícios de Usar Variáveis de Ambiente

  1. Separação clara entre código e configuração: O código pode ser publicado sem expor credenciais ou configurações sensíveis, garantindo que a aplicação possa ser executada em diferentes ambientes de forma segura.
  2. Flexibilidade nos deploys: Variáveis de ambiente podem ser alteradas a qualquer momento sem necessidade de modificar o código, facilitando a implementação de novos ambientes como homologação, produção ou QA.
  3. Evitando erros de configuração: Ao usar variáveis de ambiente, você evita o risco de que arquivos de configuração sensíveis, como credenciais de banco de dados ou chaves de API, sejam acidentalmente comitados no repositório de código.
  4. Escalabilidade: À medida que novos ambientes são adicionados, as variáveis de ambiente podem ser facilmente configuradas de forma independente, sem a necessidade de criar grupos de configurações complexas e frágeis.

Cuidados ao Usar Configurações

Ainda que os arquivos environment.ts do Angular forneçam uma maneira conveniente de gerenciar configurações, é importante garantir que os valores sensíveis, como chaves de API, nunca sejam incluídos diretamente no código. Em vez disso, eles devem ser lidos a partir do ambiente, usando serviços de terceiros ou configurados durante o processo de build ou deploy, como nos exemplos a seguir:

  1. Docker: Ao usar Docker para criar containers de produção, as variáveis de ambiente podem ser passadas diretamente no docker-compose.yml ou no comando de execução do Docker:
docker run -e API_URL=https://api.prod.com -e API_KEY=prodkey my-angular-app

2. Serviços de Nuvem: Plataformas como Heroku, AWS, e Azure oferecem ferramentas nativas para configurar variáveis de ambiente que serão utilizadas durante a execução da aplicação.

3. Ferramentas de Build: Ferramentas como Webpack podem ser configuradas para substituir variáveis durante o processo de build com base no ambiente em que a aplicação será executada.

Conclusão

Armazenar configurações no ambiente é um fator essencial para garantir que sua aplicação Angular seja flexível, segura e escalável. Usando variáveis de ambiente para gerenciar configurações que mudam entre diferentes ambientes de deploy, você mantém o código limpo e evita a exposição de dados sensíveis. Além disso, essa prática facilita a manutenção e expansão da aplicação ao longo do tempo.