Padronizando ambiente de desenvolvimento de sua equipe com Dev Containers.

Desenvolvedores com experiência já enfrentaram situações em que um novo colaborador é inserido em sua equipe e possui dificuldades para configurar seu ambiente de desenvolvimento para o projeto. Além disso, desenvolvedores com baixa produtividade podem ter um ambiente mal configurado e bagunçado. O Docker nos serviu muito bem para contornar isso, ajudando a iniciar um projeto em poucos minutos e reduzir conflitos com outros. A partir disso, surgiu a ferramenta Dev Containers, que facilita ainda mais a criação de containers para atuarem como ambientes de desenvolvimento.

Este artigo servirá como um guia para criar um ambiente de desenvolvimento padronizado com ferramentas úteis para sua equipe, principalmente para desenvolvedores menos experientes.

Iniciando com Dev Containers

Dev Containers é uma extensão do Vs Code, que a partir da configuração declarada em um arquivo ‘devcontainer.json’, a mesma prepara um container Docker com ferramentas, extensões e bibliotecas úteis para o projeto. Mantendo este arquivo JSON dentro do repositório, cada desenvolvedor com a extensão instalada, pode se beneficiar de um ambiente de desenvolvimento ready-to-code, bastando apenas abrir a pasta do projeto dentro do container criado.

Para ilustrar o processo, usaremos o projeto quick-start do NestJs + Postgres. Primeiro, precisamos dos arquivos do Docker para aplicação e banco de dados:

# Dockerfile
FROM node:19-slim
WORKDIR /home/node/app
CMD ["tail", "-f", "/dev/null"]

# Docker-compose.yml
version: '3'
services:
app:
build: .
ports:
- 3000:3000
volumes:
- .:/home/node/app
db:
image: postgres:latest
env_file:
- .env

Com a extensão Dev Containers já instalada em seu Vs Code, você pode usar um comando da palheta para gerar a configuração inicial do container. Com isso, já teremos uma pasta chamada ‘.devcontainer’ e um arquivo JSON. A partir da configuração inicial, podemos personalizá-la para definir configurações do Vs Code, instalar extensões e ferramentas úteis.

"customizations": {
"vscode": {
"extensions": ["eslinter.vscode-eslint", "prettier.vscode-prettier", "jest.vscode-jest", "mutantdino.resourcemonitor", "MS-vsliveshare.vsliveshare"],
"settings": {
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true,
"editor.rulers": [80],
"editor.tabSize": 2
}
}
},
"features": {
"ghcr.io/devcontainers/features/common-utils:2": {},
"ghcr.io/devcontainers-contrib/features/zsh-plugins:0": {
"plugins": "git git-flow F-Sy-H zsh-autosuggestions zsh-completions",
"omzPlugins": "https://github.com/z-shell/F-Sy-H https://github.com/zsh-users/zsh-autosuggestions https://github.com/zsh-users/zsh-completions"
},
"ghcr.io/stuartleeks/dev-container-features/shell-history:0": {}
},
"postCreateCommand": "npm install"

Com apenas algumas linhas de código, os membros da equipe podem configurar seu ambiente de desenvolvimento. Este ambiente já incluirá o zsh, juntamente com vários plugins. Além disso, extensões como Jest, Prettier, EsLint e Liveshare já estarão pré-instaladas. As configurações do Vs Code também serão ajustadas para se alinharem ao padrão do projeto.

Abrindo o projeto no Dev Container

Com a configuração do container já pronta, o projeto pode ser aberto dentro do próprio container. A extensão será responsável por sua criação, e então poderemos seguir com o desenvolvimento. Para isso, basta executar o comando ‘remote-containers.reopenInContainer’ na paleta de comandos do Vs Code. Após alguns minutos, nosso editor será aberto dentro do container, com as extensões e dependências do projeto já instaladas, configurações do editor definidas e terminal com ZSH configurado.

$ npm run start:dev
[8:59:09 PM] Starting compilation in watch mode…
[8:59:10 PM] Found 0 errors. Watching for file changes.
[Nest] 562–01/03/2024, 8:59:10 PM LOG [NestFactory] Starting Nest application…
[Nest] 562–01/03/2024, 8:59:10 PM LOG [InstanceLoader] AppModule dependencies initialized +7ms
[Nest] 562–01/03/2024, 8:59:10 PM LOG [RoutesResolver] AppController {/}: +5ms
[Nest] 562–01/03/2024, 8:59:10 PM LOG [RouterExplorer] Mapped {/, GET} route +2ms
[Nest] 562–01/03/2024, 8:59:10 PM LOG [NestApplication] Nest application successfully started +1ms

Se a aplicação não conter erros, poderemos abrir o navegador e acessar a aplicação.

Concluindo

Padronizar o ambiente de desenvolvimento não é uma regra, mas é valido integrar em seu projeto e oferecer a sua equipe uma forma rápida de iniciar com o desenvolvimento. Para membros menos experientes, isso elimina a complexidade de configurar um ambiente de desenvolvimento do zero, permitindo que eles se concentrem no que é mais importante: o desenvolvimento de software. Além disso, a ferramenta dev-containers ajuda a reduzir o tempo gasto na solução de problemas relacionados ao ambiente de desenvolvimento.

→ Siga o nosso blog pelo Medium e fique por dentro de tudo o que acontece no Ateliê de Software.

Dê um alô pra gente! E nos acompanhe nas redes sociais:

→ E-mail: contato@atelie.software
→ Site
→ Facebook
→ Instagram
→ LinkedIn
→ Discord
→ Podcast: Spotfy | Deezer