Como integrar e usar Docker no VS Code

A integração do Docker ao Visual Studio Code torna o desenvolvimento mais fácil e eficiente. Você pode criar rapidamente arquivos Docker, explorar contêineres e imagens em um painel visual e alternar para logs ou terminais com um único clique. Neste artigo, exploraremos como configurar o Docker no VS Code com a extensão Docker.

Índice

• Instalando a extensão Docker no código VS
• Conectando Docker Desktop ao VS Code
• Gerenciando contêineres, imagens e volumes do VS Code
• Crie e execute um aplicativo em contêiner no VS Code

Instalando a extensão Docker no código VS

Antes de instalar a extensão Docker, certifique-se de que o Docker e o Visual Studio Code já estejam configurados em seu sistema. Abra a visualização Extensões no Visual Studio Code, pesquise Docker e instale a extensão oficial do Docker da Microsoft.

Após a conclusão da instalação, você verá umDocker/Contêinereslogotipo aparece no canto inferior esquerdo do editor, que serve comoExplorador do Docker.

Conectando Docker Desktop ao VS Code

Quando o Docker Desktop está em execução, o VS Code se conecta automaticamente por meio da extensão Docker. Você não precisa de configuração extra, a menos que o Docker exija configuração especial (como hosts remotos ou integração WSL).

Para confirmar a conexão, clique no botãoDocker/Contêineresícone para abrir o Docker Explorer. A partir daqui, você pode verificar seus contêineres em execução e parados, bem como visualizar imagens, registros, volumes e redes.

Gerenciando contêineres, imagens e volumes do VS Code

Depois que o Docker estiver devidamente integrado, você poderá gerenciar a maioria das tarefas de contêiner diretamente do VS Code. Por exemplo, você pode visualizar contêineres em execução e parados na seção CONTAINERS.

Além disso, você pode clicar com o botão direito em um contêiner específico para iniciá-lo, interrompê-lo, reiniciá-lo ou removê-lo.

Você também pode extrair imagens, criar novas ou limpar imagens não utilizadas. Por exemplo, para remover uma imagem não utilizada, posso simplesmente clicar com o botão direito nela e selecionar Remover para excluí-la imediatamente.

Além disso, você pode clicar com o botão direito em um volume específico vinculado aos seus contêineres para inspecioná-lo ou gerenciá-lo.

Você também pode explorar e gerenciar redes de contêineres, registros, contextos Docker e até mesmo acessar a seção de ajuda e feedback para simplificar seu fluxo de trabalho.

Crie e execute um aplicativo em contêiner no VS Code

Vamos construir um aplicativo Node.js Express simples para testar a extensão. Para fazer isso, primeiro crie uma nova pasta no VS Code para o seu projeto, depois um arquivo chamado “index.js” e adicione o seguinte código nesse arquivo:

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 código cria um pequeno aplicativo Express que roda na porta 4000. Ao abrir o URL raiz (/), ele mostra a mensagem “Bem-vindo ao nosso aplicativo Express!“. É apenas uma configuração básica para testes do Dockerfile.

Em seguida, você precisa adicionar um arquivo Docker. Normalmente, adicionar Docker significa criar um Dockerfile, escrever as instruções, construir uma imagem a partir do terminal e executá-la manualmente. Com a extensão Docker, o VS Code pode gerar esses arquivos para você. Para fazer isso, abra a Paleta de Comandos (⇧⌘P no Mac ou Ctrl + Shift + P no Windows) e digite o comandoAdd Docker files to Workspace.

Selecione Node.js como sua plataforma de aplicação.

Selecione o arquivo “package.json” localizado na raiz do seu projeto (a mesma pasta do arquivo index.js). Este é o arquivo de configuração principal do seu aplicativo e a extensão Docker o usará para gerar o Dockerfile necessário e outros arquivos relacionados.

Especifique a porta em que seu aplicativo é executado para que o Docker o exponha.

SelecioneSimpara incluir o arquivo Docker Compose.

Leia também:Docker Desktop vs Docker Engine: Qual é a diferença?

A extensão Docker irá gerar um Dockerfile, um arquivo “.dockerignore” e, opcionalmente, um arquivo “compose.yaml”, se você escolher.

Finalmente, para construir uma imagem Docker, clique com o botão direito no Dockerfile eselecione Construir imagemou correrImagens Docker: construir imagemna paleta de comandos.

A seguir, vá para oImagensseção no Docker Explorer para ver seu projeto recém-adicionado:

Agora, abra a Paleta de Comandos, execute o comandocontainer images: runou clique com o botão direito na sua imagem e selecioneCorrer.

Na lista de imagens, escolha sua imagem mais recente.

E, finalmente, você pode confirmar se está em execução verificando a seção Containers no Docker Explorer.

Para ver seu aplicativo em ação, clique com o botão direito no contêiner em execução no Docker Explorer e escolhaAbrir no navegador.

Na saída, você pode ver que o contêiner está em execução e nosso aplicativo pode ser acessado por meio da porta especificada.

Concluindo

A integração do Docker ao VS Code agiliza seu desenvolvimento, permitindo que você crie, execute e gerencie contêineres diretamente em seu editor. Depois de configurado, você pode criar facilmente arquivos Docker, explorar contêineres e imagens e acessar logs ou terminais com um único clique. Ele simplifica a execução e o teste de aplicativos e mantém seu fluxo de trabalho organizado e eficiente.