Introdução

Pensando nas etapas de desenvolvimento e publicação de uma aplicação, seja ela front-end ou back-end, é normal ter mais de um ambiente como: desenvolvimento, homologação e produção.

Gerenciar esses ambientes não é uma tarefa simples. Caso você não tenha um documento oficial “definition of done” com um passo a passo, que siga toda vez que for publicar o seu projeto, pode ser que por um simples descuido suba uma API apontando para uma base de homologação ou um admin apontando para base de desenvolvimento.

Quando estamos trabalhando em uma aplicação Angular, podemos utilizar as variáveis de ambiente para não cair nesse fluxo de erro. Quando você cria um projeto com Angular CLI, por default, dentro da sua solution tem dois arquivos: environment.ts para desenvolvimento e environment.prod.ts para produção.

O compile do Angular sabe qual utilizar no momento do seu build. Quando você executa o comando ng build, ele utiliza os valores de desenvolvimento; quando executa ng build -prod ele utiliza os valores de produção.

Abaixo você tem um trecho de código demostrando o conteúdo default desses dois arquivos.

// environment.ts 
export const environment = {
  production: false
};

//environment.prod.ts 
export const environment = {
  production: true
};

O objetivo desse artigo será demonstrar como nós podemos trabalhar com esses ambientes utilizando o Docker. Para que você possa ver um exemplo completo e mais próximo do nosso dia a dia, irei adicionar um novo ambiente para homologação.

Criação do projeto

Nosso primeiro passo será a criação de um projeto. Para isso, execute o comando abaixo no seu terminal:

ng new angular-environments

Esse comando criará um novo projeto chamado angular-environments.

Abra o projeto no seu editor de textos preferido, em seguida vá até src/environments/ e adicione um novo arquivo chamado environment.homolog.ts; esse será o nosso arquivo de homologação. Agora atualize ele com o trecho de código abaixo:

export const environment = {
  production: true,
  API_URL: '//homolog.com'
};

O próximo passo será adicionar a variável API_URL nos dois arquivos environment.prod.ts e environment.ts. Para validarmos, adicione essa variável com um valor que possa diferenciar os três ambientes, como: API_URL: ‘//producao.com’ para o ambiente de produção e API_URL: ‘//desenvolvimento.com’ para o ambiente de desenvolvimento.

O próximo passo será informar para o compiler que ele tem um novo ambiente. Para isso, adicione o trecho de código abaixo dentro do seu arquivo angular.json. Ele deve ficar depois de configurations -> production {},.

          "homolog": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.homolog.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }

Agora, para facilitar o build adicione o comando abaixo dentro do seu package.json:

"buildhml": "ng build --configuration=homolog",

Para validar o ambiente, abra um terminal e execute o comando npm run buildhml. Caso tudo esteja OK, esse comando irá gerar um novo pacote dentro do diretório dist apontando para o arquivo de homologação.

Com o passo anterior OK, vamos chamar a nossa variável de ambiente dentro do AppComponent para apresentarmos na tela o seu valor. Para isso, atualize os arquivos: app.component.ts e app.component.html com os trechos de código abaixo:

app.component.ts

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-environments';
  public API_URL = environment.API_URL;
}

app.component.html

<h1>{{API_URL}}</h1>

Criando ambientes com Docker

O próximo passo será criar o nosso Dockerfile. Para isso, adicione um novo arquivo chamado Dockerfile na sua solution, em seguida atualize ele com o trecho de código abaixo:

Dockerfile para criar imagem projeto Angular

FROM nginx:alpine

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /usr/share/nginx/html

COPY dist/ .

Agora crie um novo arquivo chamado nginx.conf, e atualize ele com o trecho de código abaixo:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name  localhost;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;
        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

Esses valores acima são default do ngnix. Caso tenha interesse em saber mais sobre ele, eu recomendo a leitura do seguinte link: Ngnix Docs.

Agora vamos testar o nosso projeto nos ambientes de desenvolvimento, homologação e produção.

Desenvolvimento

Abra um terminal e execute o comando ng server -open. Esse comando abrirá no seu navegador o seguinte endereço: http://localhost:4200/.

Resultado:

Homologação

Ainda no seu terminal, execute o comando npm run buildhml para gerar o seu pacote de homologação. Em seguida execute docker build -t angular-hml . na raiz do seu projeto para criar a sua imagem de homolog. Assim que esse comando finalizar, execute o comando docker run -d -p 4300:80 angular-hml.

Resultado:.

Produção

Para finalizar vamos ao nosso ambiente de produção. Para isso, execute no seu terminal o comando ng build — prod. Assim que o comando anterior finalizar, execute docker build -t angular-prod na raiz do seu projeto novamente para criar a sua imagem de produção. Agora execute o comando docker run -d -p 4400:80 angular-prod.

Resultado:

Caso tenha interesse em baixar a versão final do código apresentado nesse artigo, segue o seu link no meu GitHub: Angular-Environment.

Com isso eu finalizo mais esse artigo, espero que tenha gostado e até a próxima pessoal.