Projeto angular com docker

Neste post vamos ver como podemos utilizar Angular com Docker.
A ideia é que você consiga executar um projeto angular mantendo apenas Docker instalado no seu
computador. Devo ressaltar que vamos ver como trabalhar apenas no ambiente de desenvolvimento, ou seja, é possível (e bastante vantajoso) utilizar Docker no ambiente de produção.

Ou seja: ISSO NÃO DEVE SER USADO EM PRODUÇÃO!

Vamos utilizar a última versão do Angular, que hoje está em: 8.2.13.

Primeiro vamos precisar de um projeto Angular para utilizar como base. Você poderia criar sem problemas na sua maquina, porem estou
supondo que não temos nem node instalado.
Para facilitar, subi um projeto na minha conta do github na versão mencionada. Você também poderia
criar o projeto angular utilizando o Docker, mas quero simplificar os passos.

Vamos clonar o projeto para nossa maquina (ou baixar caso prefira).

https://github.com/andrebtoe/angular8-base

Clonar nosso projeto, através do comando no terminal:

git clone https://github.com/andrebtoe/angular8-base.git

Após baixar o projeto,vamos criar um arquivo “Dockerfile” na raiz do projeto e declarar as definições no arquivo, como segue

FROM node
WORKDIR /app
COPY package.json ./
RUN npm install -g @angular/cli@8.3.19
RUN npm install
COPY . .
EXPOSE 4200
CMD npm run start

Na primeira linha definimos qual imagem deve ser utilizada para que nosso projeto rode dentro do container.
Em seguida definimos a pasta onde o projeto deve funcionar (não é necessário criar a pasta, o WORKDIR se encarrega disso).
Copiamos o arquivo “package.json”, neste estão declaradas as dependências do projeto.
Temos que instalar o angular CLI globalmente, para seja possível executar os comandos do CLI dentro do container.
Agora vamos baixar as dependências do projeto através do comando “npm install”.
Após baixar as dependências, vamos copiar os arquivos do projeto para pasta dentro do container.
Também devemos expor a porta 4200, aqui definimos a exposição da porta dentro do container e não fora.
E por último rodamos o “npm run start”, neste passo damos um start na aplicação angular, o que
na prática irá executar a instrução que esta informada no arquivo “package.json”.

Devemos alterar a definição da instrução de start. Abra o arquivo “package.json” na raiz do projeto e altere

De: “start”: “ng serve”
Para: “start”: “ng serve –host 0.0.0.0 –poll 1”

Neste último passo, estamos definindo que a execução do server angular deve ser 0.0.0.0, ou seja, não tem um especifico dentro
do container para IPv4. E também estamos habilitando o poll do server, neste caso o server deve monitorar
as alterações do projeto (eu tive problemas com docker no windows, ele não identificava as alterações).

E por último, e para facilitar, vamos definir um docker-compose, para subir todo no ambiente de uma vez só (assim não temos que ficar criando uma imagem, depois subindo o container, e por ai vai).
Vamos criar um arquivo na raiz do projeto chamado: docker-compse.yml com o seguinte conteúdo (respeite a indentação, sem esta, não funcioná):

Primeiro definimos a versão do compose, em seguida declaramos os serviços, neste caso apenas um serviço
que nomeamos como: dev-app-angular. Definimos a imagem que deve ser utilizada neste serviço (através da propriedade “build”)
deve ser local, ou seja, utilizada na definição do Dockerfile. O atributo “ports” define uma porta de entrada, neste caso
sua maquina deve acessar o container através da porta 8089 (poderia ser 4200), e redirecionará para porta 4200
do container, que por sua vez responde a aplicação pendurada no serve do angular.
Também temos que definir os volumes que devem ser mapeados, neste caso estamos mapeando a pasta
de dependências e a pasta de WORKDIR do container.

Agora vamos subir nosso ambiente, através do comando:

docker-compose up -d

Com este comando subimos nosso ambiente, de forma que roda em background, por causa do “-d”, isso indica que o container
fica “desatachado” do seu terminal.

Agora já podemos ver a aplicação no navegador da nossa maquina através da url: http://127.0.0.1:8089

Você vai perceber que se alterar o conteúdo de “app.component.html” o navegador deve se manter
sincronizado com a aplicação.

Ao decorrer do desenvolvimento do projeto, temos a condição de executar comando do Angular CLI.
Porem neste caso, nosso ambiente está rodando dentro do container, e quando subimos o ambiente, deixamos ele
desatachado. Como vamos se conectar a ele para adicionar um component, por exemplo?

Podemos se conectar via terminal no conectar para executar qualquer comando que seja necessário.
Primeiro vamos listar nossos container em execução:

docker container ps

Você deve obter o id do container em execução, para executar o comando que se conecta ao terminal do container, como no exemplo:

docker exec -t -i 48138d90f965 /bin/bash

Após executar este comando, você pode verificar se estará navegando na mesma pasta definda no WORKDIR.
Agora podemos executar o comando para criação de um container, por exemplo, que o mesmo se refletirá no projeto
em sua máquina:

ng g c teste

Espero te ajudado!
Até a próxima!