Dev Container

Cara, recentemente eu descobri o DevContainer e meu mundo virou de cabea pra baixo. Eu sempre tive problemas com ambientes de desenvolvimento, principalmente quando se tratava de configurar tudo do zero. Ainda estou me acostumando com o fato de ter o ambiente configurado desta forma, mas é bem legalzinho de ver funcionando.

A ideia é que você tenha um container Docker rodando com todas as dependências necessárias para o seu projeto, e você pode abrir esse container diretamente no VSCode. Isso significa que você não precisa mais se preocupar em instalar tudo na sua máquina local, o que é uma mão na roda. Ele lembra muito o que se faz o com o desenvolvimento em WSL, mas com a vantagem de ser mais leve e fácil de configurar.

Exemplo rápido de como uso aqui

Quando criei o blog eu nao queria misturar a quantidade de coisas que eu tinha na minha maquina, um parceirinho me sugeriu usar o DevContainer (na vdd era pra solucionar o BO do trampo, mas acabei usando pra tudo). A ideia era ter um container rodando o Hugo, e eu só precisava abrir o VSCode dentro desse container. Assim, eu poderia editar os arquivos do blog sem me preocupar com as dependências do Hugo na minha máquina local.

A configuração do DevContainer é feita através de um arquivo chamado devcontainer.json, que fica dentro da pasta .devcontainer. Esse arquivo contém todas as informações necessárias para criar o container, como a imagem base, as extensões do VSCode que você quer instalar e os comandos que você quer rodar quando o container for iniciado.

{
	"name": "Alpine",
	"image": "mcr.microsoft.com/devcontainers/base:alpine-3.20",
	// "features": {},
	// "forwardPorts": [],
	"postCreateCommand": "apk add --no-cache --repository=https://dl-cdn.alpinelinux.org/alpine/edge/community hugo",
	"customizations": {
		"vscode": {
			"extensions": [
				"gydunhn.hugo-essentials"
			]
		}
	},
	"remoteUser": "root"
}

A parte mais legal é que você pode usar o DevContainer em qualquer projeto, não só no blog. Você pode criar um container para qualquer linguagem ou framework que você estiver usando, e o processo de configuração é bem parecido.

explicando o que está acontecendo no arquivo:

• name: o nome do container que vai aparecer no VSCode.
• image: a imagem base do container. No caso, estou usando uma imagem do Alpine Linux simplesmente porque é leve e rápido.
• features: aqui você pode adicionar recursos adicionais que você quer instalar no container. No caso, não estou usando nada, mas você pode adicionar o que quiser como por exemplo o Node.js, Python, etc.
• forwardPorts: aqui você pode adicionar as portas que você quer expor do container. Eu costumo não expor nada pois o devcontainer reconhece automaticamente as portas que estão sendo usadas e pede para você expor.
• postCreateCommand: o comando que vai ser executado depois que o container for criado. No caso, estou instalando o Hugo para que já esteja disponível no container na linha de comando. Voce pode por exemplo instalar seu node modules aqui logo de cara, assim seu projeto sempre estará fresquinho. (não é o que eu faço, mas é uma opção).
• customizations: aqui você pode adicionar extensões do VSCode que você quer instalar no container. No caso, estou usando a extensão Hugo Essentials, que é basicamente o que preciso, logo mais mostro onde conseguir o nome das extensões.
• remoteUser: o usuário que vai ser usado dentro do container.

Para definir as suas extensões, você pode usar o comando code --list-extensions no terminal do VSCode. Isso vai listar todas as extensões que você tem instaladas na sua máquina local, e você pode copiar o nome delas para o arquivo devcontainer.json. Ou se voce quiser uma extensão específica, você pode procurar no marketplace do VSCode e copiar o nome dela que fica no canto direito da tela. por exemplo:

Depoins de tudo instalado, basta voce rodar apertando F1 e procurar por Dev Containers: Reopen in Container, isso vai abrir o container que você acabou de criar e instalar todas as extensões que você definiu no arquivo devcontainer.json. No meu caso ele instala o Hugo logo após abrir o container, e depois instala a extensão do Hugo Essentials. Algumas pessoas gostam de usar para instalar dependencias do projecto, como por exemplo o npm install ou yarn install.

Com isso, mesmo em um ambiente de desenvolvimento windows você consegue simular exatamente o mesmo ambiente que você teria em um servidor linux, ou de produção, o que é muito legal.

Como apanhei pra cacete pra colocar uma unica imagem o post fica por aqui, voce pode dar uma olhada na documentação do DevContainer aqui e ver como funciona.

Logo eu volto aqui e atualizo com mais informações, mas por enquanto é isso.