Como automatizar seu ambiente de desenvolvimento com VSCode Remote Container

Você já considerou utilizar a extensão VSCode Remote Container para automatizar a criação do ambiente de desenvolvimento da sua equipe?

Neste artigo quero falar brevemente sobre esta extensão, os pré-requisitos para usá-lo e como dar seus primeiros passos para dominar esta funcionalidade.

O Remote Container é uma extensão para o editor VSCode da Microsoft. Ela permite executar um container Docker que contém o mínimo de ferramentas e executáveis úteis para o seu projeto. Por exemplo, no caso de um projeto que utilize Node.js e MongoDB, o container poderia conter o Node.js e o MongoDB Shell previamente instalados.

Quando você ou um colega de sua equipe clonar um projeto preparado para funcionar com a extensão Remote Container para VSCode, o container será iniciado e será possível abrir qualquer diretório deste container por dentro do editor VSCode, aproveitando desta forma todo o poder e recursos que o editor VSCode proporciona.

Pré Requisitos

Para acompanhar este artigo e fazer uso desta nova funcionalidade para VSCode, é necessário atender a alguns pré-requisitos:

• Instalar o Docker
• Instalar o docker-compose
• Instalar o VSCode
• Instalar a extensão Remote – Containers no seu VSCode.

Criando um ambiente Node.js + Mongo do zero

São muitas as maneiras de dar os primeiros passos desenvolvendo com o VSCode dentro de um container. Mas, por ora, vou focar no que considero mais simples, ou seja, criar um novo projeto do zero usando um assistente.

Para começarmos, o primeiro passo é criar um diretório onde serão salvos todos os arquivos do seu projeto – no meu caso, criei um diretório chamado projeto.

mkdir -p ~/Downloads/projeto

Abra esta nova pasta usando o VSCode em File -> Open Folder. Escolha a pasta projeto que você acabou de criar e clique no botão OK.

O próximo passo é usar o assistente para criar os arquivos de configuração. Aperte Ctrl + Shift + P e digite Remote Remote-Containers: Add. Isso deve filtrar as opções de comandos possíveis. Selecione a opção Remote-Containers: Add Development Container Configuration Files... e escolha a opção Node.js & Mongo DB.

Observe que, se tudo executou com sucesso, um diretório chamado .devcontainer foi criado. Nele contém os arquivos devcontainer.json, docker-composer.yml e Dockerfile. Esses são os arquivos responsáveis por criar e configurar nosso ambiente de desenvolvimento para começarmos nosso projeto usando Node.js e Mongo DB.

O arquivo de configuração devcontainer.json

No diretório .devcontainer foram criados os arquivos necessários para subir um container para o desenvolvimento do projeto. Em breve vou mostrar como subir este ambiente e, quando isso acontecer, seremos conectados em um container com suporte para Node.js – que deverá possuir acesso a um serviço executando o banco de dados noSQL Mongo DB.

Agora, separe um tempo para analisar os arquivos que foram criados e conhecê-los um pouco melhor. Docker é um tópico fora do escopo deste artigo, no entanto, conhecê-lo será útil para que você entenda o conteúdo dentro dos arquivosdocker-compose.yml e Dockerfile.

Resumidamente, o papel destes arquivos do universo Docker é subir dois serviços. O serviço app é nosso ambiente de desenvolvimento Node.js. O serviço db tem como objetivo servir um banco de dados usando Mongo DB.

Enquanto isso, no arquivo devcontainer.json são configurados detalhes, como: nome do ambiente, usuário que executará o container, qual é o diretório montado por padrão, como ambiente de trabalho, e quais outras extensões do VSCode precisam ser instaladas automaticamente no nosso VSCode Remoto.

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at: // https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/javascript-node-mongo // Update the VARIANT arg in docker-compose.yml to pick a Node.js version: 10, 12, 14 { "name": "Node.js & Mongo DB", "dockerComposeFile": "docker-compose.yml", "service": "app", "workspaceFolder": "/workspace", // Set *default* container specific settings.json values on container create. "settings": {}, // Add the IDs of extensions you want installed when the container is created. "extensions": [ "dbaeumer.vscode-eslint", "mongodb.mongodb-vscode" ], // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [3000, 27017], // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "yarn install", // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. "remoteUser": "node" } 

Visite a documentação oficial para saber mais sobre o arquivo de configuração devcontainer.json.

Como reiniciar o ambiente de desenvolviemnto dentro do container

Para executar o novo ambiente dentro de um container, vamos fazer o seguinte: aperte Ctrl
+ Shift + P e selecione a opção Remote-Containers:
Rebuild and Reopen in Container. Esta ação deverá fazer com que o VSCode tente reabrir o projeto, no entanto, desta vez executando tudo dentro do container Node.js para desenvolvimento.

Como esta pode ser sua primeira vez executando este comando, é normal que demore um pouco. Clique em Starting Dev Container para visualizar uma saída de tudo que está acontecendo. Você pode notar que o VSCode está baixando as imagens do Node e Mongo DB para então iniciá-los como serviço.

Com esse passo a passo que demonstrei, você criou seu primeiro ambiente para desenvolvimento com Node.js + Mongo DB usando VSCode com a extensão Remote Containers. Experimente abrir um terminal para validar que você está realmente dentro de um container Node.js e não mais em sua máquina local.

Assim como eu também experimente executar alguns comandos no terminal remoto. Eu executei os comandos whoami e node -v para validar que o usuário logado no container é o mesmo definido no arquivo devcontainer.json e que existe de fato um Node.js perfeitamente functional.

Como validar se o serviço Mongo DB está funcional

Não faz parte do escopo deste projeto se aprofundar no banco de dados noSQL Mongo DB. Mas vou mostrar rapidamente como podemos validar se o serviço Mongo DB também está funcional e acessível de dentro do nosso container de desenvolvimento.

Dentro do terminal, execute o comando mongo --host db. Isso deve conectar no nosso Mongo DB.

Agora, digite, por exemplo, o comando show dbs para listar algumas bases de dados disponíveis no Mongo DB por padrão, só para confirmar que a conexão não é fake, hehe. Para fechar a conexão execute o comando quit().

Como executar uma aplicação em Node.js

Também está totalmente fora do escopo deste artigo se aprofundar em Node. Mas para tornar este artigo mais completo, será divertido subir uma aplicação dentro do nosso container de desenvolvimento.

Para isso, precisamos primeiro criar um arquivo chamado app.js e abri-lo no nosso editor. Execute esses comandos por dentro do terminal do VSCode.

touch app.js
code app.js

Abaixo, vou disponibilizar um código de uma simples aplicação para você copiar e colar dentro do arquivo app.js.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('hello, world!');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Execute nosso aplicativo executando o seguinte comando no terminal. A aplicação vai subir na porta 3000 e o VSCode fará para nós o encaminhamento (binding) das portas para nossa máquina local automaticamente.

node app.js

Provavelmente, um popup no VSCode aparecerá informando que a aplicação está rodando na porta 3000. Você pode clicar no botão Open in Browser, ou acesse manualmente o endereço http://localhost:3000/
no seu navegador.

Apareceu no seu navegador uma página contendo o texto hello, world!? Se sim, então, parabéns. Você não apenas criou um ambiente para desenvolver com Node.js do ZERO, como também criou um aplicativo com sucesso.

Considerações finais

Neste artigo você aprendeu como criar um novo ambiente do ZERO usando o VSCode Remote Container. Você também aprendeu quais as motivações para usar este tipo de tecnologia em seus projetos, sendo elas: configurar o ambiente uma vez para que você e seus colegas possam facilmente clonar um projeto sem precisar recriar todo o ambiente do ZERO.

Líder em Treinamento e serviços de Consultoria, Suporte e Implantação para o mundo open source. Conheça nossas soluções:

CURSOSCONSULTORIA