Integrando o Docker com o Visual Studio Code: um guia passo a passo

Integrando o Docker com o Visual Studio Code: um guia passo a passo

A integração do Docker com o Visual Studio Code (VS Code) aprimora significativamente a experiência de desenvolvimento, permitindo que os desenvolvedores criem e gerenciem arquivos Docker com eficiência, visualizem contêineres e imagens visualmente e acessem logs ou terminais com facilidade. Este artigo fornece um guia completo sobre como configurar o Docker no VS Code por meio da extensão Docker.

Como instalar a extensão Docker no VS Code

Antes de instalar a extensão do Docker, certifique-se de que tanto o Docker quanto o Visual Studio Code estejam configurados corretamente em sua máquina. Para começar, abra a visualização de Extensões no VS Code, pesquise por “Docker” e instale a extensão oficial do Docker fornecida pela Microsoft.

Instalar extensão Docker

Após a instalação ser bem-sucedida, você notará um ícone do Docker/Containers aparecer no canto inferior esquerdo do seu editor, indicando que o Docker Explorer agora está disponível.

Explorador do Docker

Estabelecendo uma conexão entre o Docker Desktop e o VS Code

Quando o Docker Desktop está em execução, a extensão do Docker com o VS Code se conecta perfeitamente. Normalmente, nenhuma configuração adicional é necessária, a menos que a configuração do Docker envolva configurações especiais (por exemplo, hosts remotos ou integração com WSL).

Para verificar a conexão, clique no ícone Docker/Containers para iniciar o Docker Explorer. Lá, você poderá observar seus contêineres em execução e parados, juntamente com imagens, registros, volumes e redes.

Verificar integração do Docker

Gerenciando contêineres, imagens e volumes diretamente do VS Code

Com o Docker totalmente integrado ao VS Code, gerenciar tarefas de contêiner nunca foi tão fácil. Você pode visualizar contêineres em execução e parados na seção CONTÊINERES.

Gerenciar contêineres

Além disso, clicar com o botão direito do mouse em qualquer contêiner lhe dará opções para iniciar, parar, reiniciar ou removê-lo com apenas um clique.

Iniciar Parar Remover Recipiente

Você também pode extrair novas imagens, criar imagens a partir de configurações existentes ou limpar imagens não utilizadas facilmente. Por exemplo, para excluir uma imagem que não é mais necessária, basta clicar com o botão direito do mouse sobre ela e selecionar Remover.

Remover imagem

Além disso, gerenciar volumes vinculados aos seus contêineres é simples: clique com o botão direito do mouse no volume desejado para inspecioná-lo ou modificá-lo.

Gerenciar volume

Você também pode explorar e gerenciar redes, registros, contextos do Docker e obter acesso a uma seção de ajuda e feedback, otimizando ainda mais seu fluxo de trabalho de desenvolvimento.

Criando e executando um aplicativo em contêiner no VS Code

Como exemplo prático, vamos criar um aplicativo Node.js Express simples para ilustrar os recursos da extensão Docker. Comece criando uma nova pasta no VS Code para o seu projeto. Dentro dessa pasta, crie um arquivo chamado index.jse insira o seguinte código:

const express = require("express"); const server = express(()); const PORT = 4000; server.get("/", (req, res) => { res.send("Welcome to our Express app!");}); server.listen(PORT, (() => { console.log(`App running on port ${PORT}`);});

Este trecho de código básico estabelece um pequeno aplicativo Express escutando na porta 4000, respondendo com a mensagem “Bem-vindo ao nosso aplicativo Express!” quando a URL raiz (/) é acessada. Ele estabelece uma base para testar seu Dockerfile.

Em seguida, você precisará de um Dockerfile. Em vez de criar um Dockerfile manualmente e especificar suas instruções, a extensão Docker pode facilitar esse processo. Abra a Paleta de Comandos pressionando ++ no ⇧⌘PMac ou Ctrl++ no Windows e digite o comando.ShiftPAdd Docker files to Workspace

Adicionar arquivos do Docker ao espaço de trabalho

Selecione Node.js como sua plataforma de aplicação entre as opções fornecidas.

Selecione o nó Js

Aponte para o arquivo “package.json” localizado na raiz do seu projeto. Este arquivo é o arquivo de configuração principal do seu aplicativo e guiará a extensão Docker na geração de arquivos essenciais relacionados ao Docker.

Selecione o arquivo JSON do pacote

Em seguida, indique o número da porta que seu aplicativo utilizará para que o Docker possa expô-lo adequadamente.

Selecione o número da porta

Selecione Sim quando solicitado a incluir o arquivo Docker Compose.

Arquivo Docker Compose

A extensão Docker agora gerará um Dockerfile, um arquivo “.dockerignore” e um arquivo “compose.yaml”, dependendo da sua seleção.

Gerar arquivos necessários

Para prosseguir com a criação da sua imagem do Docker, clique com o botão direito do mouse no Dockerfile e selecione Build Image ou, alternativamente, execute Docker Images: Build Image na Paleta de Comandos.

Construir imagem do Docker
Verificar imagem construída

Após o processo de compilação, navegue até a seção Imagens no Docker Explorer para ver seu projeto recém-criado refletido lá:

Projeto recém-adicionado

Agora, para executar a imagem, abra a Paleta de Comandos e execute container images: run, ou simplesmente clique com o botão direito na imagem e selecione Executar.

Executar imagem

Selecione sua imagem mais recente na lista exibida.

Escolha a imagem

Por fim, você pode validar se seu aplicativo está em execução verificando a seção Contêineres no Docker Explorer.

Confirmar execução do contêiner

Para acessar seu aplicativo, clique com o botão direito do mouse no contêiner em execução no Docker Explorer e selecione Abrir no navegador.

Abrir no navegador

Como resultado, você poderá ver o contêiner em ação com seu aplicativo acessível pela porta especificada anteriormente.

Saída

Conclusão

A integração do Docker com o Visual Studio Code agiliza o processo de desenvolvimento, permitindo que os desenvolvedores construam, executem e controlem contêineres com eficiência diretamente de seu ambiente de programação. Após concluir a configuração, você terá acesso direto para criar arquivos do Docker, navegar por contêineres e imagens e visualizar logs ou saídas de terminal com apenas um clique. Essa integração não apenas simplifica a execução e os testes de aplicativos, como também mantém um fluxo de trabalho organizado e produtivo.

Fonte e Imagens

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *