Configurando e iniciando projeto Angular no ambiente Docker

O objetivo deste post, é explicar os procedimentos de configuração e inicialização do projeto Angular no ambiente Docker.

Preparando o ambiente Angular no Docker

A premissa é ter o Docker e Docker-Compose instalados, caso ainda não tenha, verifique Instalando Docker e Docker Compose no Linux (qualquer distro) ou Instalando Docker no Windows 10

$ mkdir $HOME/ambiente-angular-docker && cd $HOME/ambiente-angular-docker

$ docker run --rm --volume "/home/reginaldo/ambiente-angular-docker:/usr/node/app" --workdir "/usr/node/app" --publish 4200:4200 -it node:18 bash

O comando acima, irá conectar ao conteiner node, de modo similar como estiver conectado a outro computador via SSH.

Na primeira vez que executar, o Docker irá fazer o download da imagem node:18 e pode levar alguns minutos.

Explicando os parâmetros informados:

--volume "/home/reginaldo/ambiente-angular-docker:/usr/node/app" Cria o link entre o diretório do HOST (/home/reginaldo/ambiente-angular-docker) com o diretório do CONTAINER (/usr/node/app).

--WORKDIR "/usr/node/app" Diretório inicial no momento que o container foi inicializado.

--publish 4200:4200 Cria um link entre a porta 4200 do HOST com a porta 4200 do CONTAINER

--it Cria um link entre o terminal do container com o terminal do HOST

--rm Remove antigos containers (muito útil depois da primeira execução)

Criando o primeiro projeto Angular

Estando conectado no container node com o comando que executou anteriormente, conforme explicado.

Primeiro, vamos instalar o Angular via NPM

npm install -g @angular/cli

Agora vamos criar o projeto Angular

ng new .

O . indica que irá criar o nome do projeto com mesmo nome do diretório criado.

Informe as configurações desejadas para seu projeto e só aguardar o projeto ser configurado.

Pronto, o primeiro aplicativo Angular foi criado.

É importante salientar que ambiente com Docker é volátil, quando não criado o volume que mapeia o diretório entre HOST e CONTAINER, conforme foi criado no comando é adicionado o volume.

No diretório volume do HOST, observe o Owner, provavelmente irá precisar alterar para o seu usuário.

$ sudo chown -R $USER $HOME/ambiente-angular-docker

Além do arquivo .gitignore é recomendado criar o arquivo .dockerignore e adicionar o node_modules

Executando o projeto Angular no Docker

No diretório do volume, adaptando o nome do seu usuário, execute:

$ docker run --rm --volume "/home/reginaldo/ambiente-angular-docker:/usr/node/app" --workdir "/usr/node/app" --publish 4200:4200 -it node:18 bash

Estando conectado no container node, execute o comando:

ng serve

Abre o browser http://localhost:4200

Configurando o ambiente Angular no Docker Compose

Para não precisar executar o comando Docker Run toda hora, pode simplificar e organizar com o Docker Compose

Pode criar o arquivo docker-compose.yml no diretório de sua preferência

docker-compose.yml

version: '3'

services:
  node:
    image: node:18
    container_name: ambiente-angular
    args:
      user: saitam
      uid: 1000
    ports:
      - '4200:4200'
    volumes:
      - ./src:/usr/node/app
    working_dir: /usr/node/app
    command: 'ng serve'

$ docker-compose up

OU

$ docker-compose up -d

O primeiro comando o log fica aberto em tempo de execução. O segundo é executado em background. Eu prefiro executar o segundo, quando preciso verificar o log, executo docker ps

E para acessar o container é $ docker exec -it <CONTAINERID> bash

Pronto, a partir desse momento já tem o ambiente Angular no Docker para seus projetos.

Feito!