Blog

Ao pensarmos em ambiente de desenvolvimento sabemos que isso envolve algumas pré configurações, e dependendo do projeto, serão “n” configurações locais. Dependendo também do tamanho do projeto a máquina pode ter certos gargalos para configuração inicial desse ambiente. Pensando nisso é que este artigo traz uma solução incrível para “conteinerizar” seu setup inicial de desenvolvimento, utilizando apenas o VSCode e Docker.

Para a configuração, será necessário ter o docker previamente configurado em sua máquina, e ter o VSCode instalado. Não vou me ater a como instalar essa ferramentas nesse artigo, deixo ao final algumas referências para ajudar.

Após instalar VSCode e docker, é necessário adicionar uma configuração de usuário no Docker. O docker group concede privilégios equivalentes ao root usuário. Para criar o docker e adicionar seu usuário:

1.Crie o docker grupo:

$ sudo groupadd docker

2. Adicione seu usuário ao grupo docker.

$ sudo usermod -aG docker $USER

Caso esteja no linux, execute o seguinte comando para ativar as alterações nos grupos: $ newgrp docker.

Em seus VScode pressione as teclas CTRL + P, para abrir a paleta de comandos para instalar a extensão necessária. Ao abrir a paleta digite ext install ms-vscode-remote.remote-containers e pressione ENTER

Observe no canto superior esquerdo que será instalado a extensão Remote — Containers

Após instalado, vamos clonar uma URL remote de repositório, para isso digite CTRL + SHIFT + P para abrir agora a paleta de comandos que executa uma ação. Digite o comando Remote-Containers: Clone Repository in Container Volume… Escolha a opção que será apresentada.

Será exibido um novo campo para adicionar a URL do Repositório remoto. Vá no seu repositório remoto copie a URL que será feito o clone e adicione no campo que é exibido.

Obs.: Caso este passo exiba um erro de permissão de usuário, execute o seguinte comando no terminal:

$ sudo chmod 666 /var/run/docker.sock

No próximo passo será exibido duas opções, escolha a primeira “Create a unique volume”.

O próximo passo será escolher em qual imagem será baseado o container. Neste exemplo escolhi Ubuntu, pois só preciso rodar um projeto front-end.

Por último escolha a opção focal(default) que será apresentada.

Enquanto configura o projeto, no canto inferior direito você pode acompanhar o loading do projeto.

Após terminar todo o processo de configuração do ambiente, será apresentado as pastas do projeto e ao abrir o terminal integrado do VSCode, pode-se ver o workspace do projeto:

Seu ambiente de desenvolvimento está pronto. Pelo terminal você pode instalar ferramentas como “yarn” para gerenciar os pacotes, e instalar as dependências necessárias do projeto, e tudo será executado dentro do container, sem precisar instalar nada localmente. Ao executar o comando para rodar o projeto, o VSCode pergunta se você deseja abri-lo no Browser.

Após terminar de compilar o projeto ele exibe que tudo foi feito com sucesso, e a própria extensão do VSCode já mapeou a porta local para porta externa do container, não havendo necessidade de se preocupar em fazer isso manualmente.

Acessando localhost:8080/ a página inicial da aplicação já será exibida.

Quando precisamos de uma máquina para programar e não dispomos de muito tempo para realizar todas as configurações, ou temos uma máquina menos robusta para rodar nossos projetos, podemos utilizar a extensão do Visual Studio Code para realizar a configuração da máquina em minutos e conseguir “codar” rapidamente.

Texto: Rebeca Lopes