Navegação

• Navegação
• Introdução {#introducao}
• Exemplo rápido de como uso aqui {#exemplo-rapido}
• Arquivo devcontainer.json {#arquivo-devcontainerjson}
• O que o arquivo faz {#o-que-o-arquivo-faz}
• Extensões no container {#extensoes-no-container}
• Abrindo o projeto no container {#abrindo-o-projeto-no-container}
• Por que usar {#por-que-usar}
• Conclusão {#conclusao}

Introdução

Cara, recentemente eu descobri o Dev Container e meu mundo virou de cabeça 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 VS Code. 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. Lembra bastante o que se faz com 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 não queria misturar a quantidade de coisas que eu tinha na minha máquina, um parceirinho me sugeriu usar o Dev Container (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.

Arquivo devcontainer.json

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

{
  "name": "Blog",
  "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 Dev Container em qualquer projeto, não só no blog. Dá pra criar um container para qualquer linguagem ou framework, e o processo de configuração é bem parecido.

O que o arquivo faz

Explicando rapidamente cada campo:

• name: o nome do container que vai aparecer no VSCode.
• image: a imagem base do container. Aqui usei Alpine Linux por ser leve e rápido.
• features: recursos adicionais para instalar no container. Não usei nada, mas você pode incluir Node.js, Python etc.
• forwardPorts: portas que você quer expor do container. Costumo não expor nada; o Dev Container detecta automaticamente e pergunta se quer expor.
• postCreateCommand: comando executado após criar o container. Estou instalando o Hugo para já ficar disponível na linha de comando. Você pode, por exemplo, instalar os seus node modules aqui para o projeto já abrir pronto.
• customizations: extensões do VS Code para instalar no container. Usei a extensão Hugo Essentials; mais abaixo mostro como achar o nome das extensões.
• remoteUser: o usuário que será usado dentro do container.

Extensões no container

Para definir as suas extensões, você pode usar o comando code --list-extensions no terminal do VS Code. Isso lista todas as extensões instaladas na sua máquina local; copie os nomes para o devcontainer.json. Se quiser uma extensão específica, procure no marketplace do VS Code e copie o identificador que fica no canto direito da tela. por exemplo:

Abrindo o projeto no container

Depois de tudo instalado, aperte F1 e procure por Dev Containers: Reopen in Container. Isso abre o container que você acabou de configurar e instala as extensões definidas no devcontainer.json. Aqui, o setup instala o Hugo logo após abrir o container e depois a extensão Hugo Essentials. Muita gente aproveita para instalar dependências do projeto, como npm install ou yarn install.

Por que usar

Com isso, mesmo em um ambiente de desenvolvimento Windows você consegue simular exatamente o mesmo ambiente que teria em um servidor Linux (ou de produção). É bem útil.

Conclusão

Como apanhei pra cacete pra colocar uma única imagem, o post fica por aqui. Você 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.