Angular — Configurando variáveis de ambiente do angular via dockerfile e docker-compose
Olá pessoal, como vocês estão?
Neste artigo vou mostrar como configurar seu projeto angular para poder injetar via dockerfile e docker-compose os valores à suas variáveis de ambiente.
Parece ser algo trivial porém tive que fazer algumas pesquisas para entender como fazer isso, e por isso quero compartilhar o que aprendi com vocês.
Mãos a massa.
Primeiramente, vamos criar um projeto angular. Vou criar meu projeto com o seguinte nome angular-variable-environment-docker com o comando:
- ng new angular-variable-environment-docker — routing
Deverá ter algo como a imagem abaixo:
Para começarmos precisaremos alterar a configuração do webpack default do angular, o custom webpack que iremos instalar irá ler as variáveis de ambiente configurada no Dockerfile e passá-las para nosso aplicativo angular durante o tempo de compilação, resumidamente isso será necessário para podermos ter acesso aos valores das variáveis de ambiente informadas no docker, sigamos os passos abaixo.
Na raiz do seu projeto, instale o seguinte pacote:
- custom-webpack
- npm install -D @angular-builders/custom-webpack
Acesse o arquivo angular.json e altere o webpack do angular
Após essa alteração, ainda no arquivo angular.json será necessário criar o seguinte objeto dentro da propriedade options
- “customWebpackConfig”: { “path”: “custom-webpack.config.js” }
Deverá ficar como na imagem abaixo, consiga as informações abaixo no repositorio do github clicando aqui:
Agora na raiz do seu projeto, crie um arquivo javascript chamado custom-webpack.config.js e insira as informações conforme imagem abaixo, consiga as informações abaixo no repositorio do github clicando aqui:
No arquivo acima estamos criando um plugin webpack. Este plugin irá ler as variáveis de ambiente do Sistema Operacional que estiver rodando no nosso caso a imagem do docker em si e irá passar os valores para o Angular, via webpack, com isso estamos agrupando todas as nossas variáveis de ambiente na variável $ENV para que possamos acessá-las da seguinte forma:
- $ENV.API_URL
Não se preocupem, iremos fazer utilização dessas variáveis mais a frente, pode confiar, rs.
Para podermos acessar a nossa variável $ENV será necessário criar uma tipagem para ela, para isso, dentro da pasta src crie um arquivo com o seguinte nome typings.d.ts e inclua as informações conforme imagem abaixo, consiga as informações abaixo no repositorio do github clicando aqui:
Acima estamos declarando uma variável global $ENV do tipo interface ENV , e estamos adicionando os campos que irão representar os campos que serão passados pelo nosso plug-in do webpack que foi criado no passo anterior.
Agora vamos criar nossas variáveis nos nossos arquivos environment.ts e environment.prod.ts, consiga as informações abaixo no repositorio do github clicando aqui:
Perceba que no arquivo environment.prd.ts estamos fazendo uso da nossa variável global $ENV para poder ter acesso aos valores que serão retornado do ambiente.
Agora vamos criar a configuração do nginx, criar o Dockerfile e o docker-compose.yml para então, passar os valores para a nossas variáveis de ambiente.
Inicialmente vamos fazer a configuração do nginx no nosso projeto angular.
Na raiz do projeto crie uma pasta com o nome config e dentro dessa pasta crie um arquivo com o seguinte nome nginx.conf e dentro deste arquivo inclua os valores conforme a imagem abaixo, consiga as informações abaixo no repositorio do github clicando aqui:
Essa configuração é uma config padrão do nginx, não iremos entrar no detalhe, porém caso queiram se aprofundar no assunto, há diversos conteúdos disponíveis para estudo.
Na raiz do projeto crie um arquivo com o nome Dockerfile que deverá ter as seguintes informações, consiga as informações abaixo no repositorio do github clicando aqui:
Se atentem nos Argumentos e Variáveis criada no arquivo Dockerfile. Se fossemos utilizar somente o Dockerfile para fazer o build do projeto, não seria necessário a declaração dos Argumentos, eles são necessário por que iremos fazer a passagem dos valores pelo docker-compose, este é o meio para que possamos setar as variáveis de ambiente do Dockerfile pelo docker-compose.
Na raiz do projeto cria um arquivo com o seguinte nome docker-compose.yml quee deverá ter as informações conforme imagem abaixo, consiga as informações abaixo no repositorio do github clicando aqui:
Perceba que no docker-compose.yml as variáveis são passadas no atributo args, vou tentar explicar o motivo com a imagem abaixo:
Os argumentos são setados antes da criação da imagem, e as variáveis de ambiente são utilizadas na execução do container. Para que as informações do docker-compose pudessem subscrever as informações do Dockerfile, foi necessário passar as informações via argumento para que assim ele pudesse subscrever as informações setadas no Dockerfile. Pegou a jogada?
Agora iremos organizar o arquivo app.component.ts e app.component.html para apresentarmos o valor das variáveis de ambiente no browser, conforme a imagem abaixo, consiga as informações abaixo no repositório do github clicando aqui:
Bom, agora vamos ver as coisas acontecerem? Então bora lá!
Abra o prompt de comando na raiz do projeto e execute o comando docker-compose up, após a execução do comando, deveremos ter algo assim no terminal:
Ao tentarmos acessar o endereço http://localhost:4200 deveremos ver algo semelhante a imagem abaixo:
Conclusão
Agora podemos manter as informações das variáveis de ambiente por responsabilidade do ambiente em que estiver sendo executado.
Por exemplo, nesse modelo se estivéssemos utilizando o Rancher para orquestrar nossos contêineres, poderíamos setar essas variáveis no ConfigMap do Rancher e não deixar as variáveis fixas dentro dos arquivos de ambientes do projeto.
Bom pessoal, era isso que eu gostaria de mostrar para vocês.
Para acessar o repositório do projeto clique aqui e seja feliz hehe.
Deixe uma estrelinha no projeto no github e uma curtida aqui na página pra ajudar esse artigo a chegar em mais pessoas.
Espero que tenham curtido tanto quanto eu e estou aberto para criticas e sugestões, bora discutir mais sobre o assunto, coloca nos comentários suas experiências sobre esse tema e vamos aprender juntos.
Valeu galera, até a próxima =].
Referências:
