Blog
24 de março de 2021
Iniciando um ambiente de desenvolvimento frontend com Docker + Visual Studio Code
Docker é uma plataforma aberta para desenvolvimento, envio e execução de aplicativos. O Docker permite que você separe seus aplicativos de sua infraestrutura para que possa entregar o software rapidamente.
Com um contêiner, podemos desenvolver nossas aplicações sem depender de uma configuração e instalação prévia de dependências em sua máquina local. Se sua aplicação precisar se comunicar com o Kernel, ela irá se comunicar com o Kernel host da sua máquina local, pois o contêiner em si, não possui um Kernel. Um Kernel apenas consegue gerenciar todos os contêineres que tiver em sua máquina.
Uma diferença interessante entre uma VM e um contêiner, é que com a VM é necessário virtualizar um sistema operacional inteiro, já em um container não é necessário, pois você consegue criar um container somente com os recursos que sua aplicação irá utilizar. Os contêineres compartilham o sistema operacional, mas mantêm seus recursos isolados.
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