DEV Community

Cover image for Docker + VSCode para Montar Ambientes de Desenvolvimento Facilmente
Fernando Raposo da Camara Silva
Fernando Raposo da Camara Silva

Posted on

Docker + VSCode para Montar Ambientes de Desenvolvimento Facilmente

Você já passou por isso: Vai iniciar em um projeto e para tal, terá que passar pelo caminho das pedras que é configurar todo o ambiente de desenvolvimento. Baixar e instalar a IDE de dev, bibliotecas diversas, ferramentas necessárias... Pergunta para um, pergunta para outro até que 8 horas depois (com sorte), finalmente conseguiu levantar o ambiente.
Pois o Docker em conjunto com uma extensão do VSCode chamada Remote Development pode facilitar e agilizar a instalação destes ambientes, mesmo se a pilha de dependências grande.
Este artigo vai ser dividido em 3 partes:

  1. Docker + VSCode + Extensão Remote Development;
  2. Criar Ambiente de desenvolvimento com uma pilha de dependências;
  3. Testar Efetividade da solução.

Docker + VSCode + Extensão Remote Development

O Docker é uma ferramenta poderosa, já escrevi sobre ela aqui, com ela você consegue criar diversos tipos de ambiente de forma isolada em uma máquina hospedeira. Para instalar o Docker entre aqui.
O VSCode é ultimamente uma das IDEs mais populares para desenvolvimento de software, sendo leve, gratuito e intuitivo, além de ter diversas extensões para facilitar a vida enormemente. Ele está sendo o que o Eclipse foi uns anos atrás (não que o Eclipse não seja legal também!). Uma extensão do VSCode que me chamou a atenção foi a Remote Development.

Remote Development Extension

Esta extensão permite que um arquivo no computador hospedeiro seja aberto dentro de um Container, ou em uma máquina remota ou no WSL caso você esteja no Windows. Quais os benefícios disso?

  • Desenvolver no mesmo sistema operacional em que se implantará o sistema, ou utilizar hardware mais rápido e especializado do que o que está na sua máquina local. - Tenha em mente que o Container do Docker pode estar rodando na sua máquina de forma local, ou em qualquer lugar do mundo. Assim, se você tem um computador meio fraquinho, mas alguém te prover este container mais "poderoso" isso pode até reduzir os custos das empresas que ao invés de proverem computadores topo de linha para seus funcionários, poderiam prover uma configuração mais modesta (e barata) e focar em prover os Containers de desenvolvimento.
  • Acelerar novos membros da equipe a se tornarem mais produtivos padronizando ambientes de desenvolvimento mais uniformes e estruturados (conforme a historinha narrei no início).

Apesar do primeiro tópico ser um assunto quase ilimitado, ele também é complexo, assim neste artigo vou focar no segundo tópico.

Criando Ambiente de Desenvolvimento Padronizado

As precondições para a criação deste ambiente são:

  1. Ter o Docker e o VSCode instalados;
  2. Adicionar no VSCode a extensão Remote Development;
  3. Ter a necessidade de criar um ambiente de desenvolvimento específico.

Para instalar o Docker e o VSCode basta ir nos links já passados anteriormente. Uma vez com o VSCode aberto, busque e instale uma extensão (CTRL+Shift+X) que se chama Remote Development, como visto na figura abaixo.
image
A seguir vamos pensar em um ambiente de desenvolvimento que tenha dependências que não temos originalmente na máquina host, ou que estejam em versões diferentes das necessárias para o desenvolvimento. Poderia ser uma versão específica de JAVA, mas pensei em algo mais complexo para testarmos os "limites" desta abordagem.

Pilha de Desenvolvimento

Vamos imaginar que vamos desenvolver um App mobile, utilizando o Ionic. Para rodar o Ionic, precisamos:

  • Node (versão mais recente)
  • Angular (versão mais recente)
  • Ionic (versão mais recente) Vamos ver como está a minha máquina local: image Como pode ser visto, o Ionic está defasado (ele mesmo diz que há uma versão mais recente), o Angular também está antigo (na versão 10), assim como o Node (que está na versão v10.17 quando já há a v14 pelo menos). Certo, vou gastar tempo precioso tentando atualizar tudo isso? NÃO! Até por que pode ser que outros projetos que estou trabalhando precisem destas dependências aparentemente defasadas. ### Colocando Pilha de Dependências em um Container O primeiro passo que temos que fazer é abrir uma pasta no VSCode e escrever um arquivo Dockerfile descrevendo as pendências que precisam ser instaladas no nosso ambiente de desenvolvimento, sejam elas: Node (e npm), Angular e Ionic. E vamos rodar tudo isso dentro do Alpine que é uma versão bem pequena do Linux. O Dockerfile pode ser assim: ```

FROM alpine:3.14

WORKDIR "/home"

RUN apk add --update nodejs npm

RUN npm install -g @angular/cli

RUN npm install -g @ionic/cli

CMD [""]

Tendo em mente que esta pasta em que o Dockerfile está salvo será aberta dentro de um Container com as dependências que estão descritas nele, clique no botão verde que fica no lado esquerdo do VSCode. Uma caixa de opções será aberta e dentre as existentes escolha "Open Folder In Container..."
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnv7wl3fh4ofozyg1jvo.png)
Depois o que acontece é que o VSCode e a extensão tratarão de  baixar a imagem, criar o Container e deixá-lo rodando pronto para o início do trabalho.
OBS: Sim, este processo pode levar alguns minutos a depender da sua conexão de internet. 

## Testando Efetividade
Depois do tempo de criação do Container e instalação das dependências, o resultado será mais ou menos este:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq72lo7b0z7emuu6ni8g.png)
Vamos testar no terminal do Container para ver se as dependências estão diferentes das do host:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnznjldl6kd8x4be5js2.png)
Parece que está tudo de acordo, uma coisa importante é que lembre-se que há agora por baixo dos panos um Container Docker rodando, você pode comprovar isso com o comando 
`$ docker ps`
haverá uma linha assim:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va7402q5tr3dhxdu1dz9.png)
Fechar o VSCode não vai encerrar o Container, ele ficará rodando enquanto você não terminá-lo!
É isso, você pode começar a criar o seu projeto Ionic, basta digitar
`$ionic start`
E começar a fazer o App com as dependências que quiser, e se algum colega seu precisar da mesma coisa, é só mandar pra ele o Dockerfile que você tem.

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
kenjimaeda54 profile image
Kenji

Se eu instalar as dependências vão ficar salvas Docker e não na minha máquina? Porque busco alternativa para diminuir a quantidade de arquivos instalados na mina máquina,não aguento mais formatar.

Collapse
 
ferfox1981 profile image
Fernando Raposo da Camara Silva

O seu problema é de espaço na máquina e você acha que o Docker vai poupar espaço?