|
|
|
Esta página descreve uma técnica para desenvolver qualquer aplicação sem precisar instalar as suas dependências diretamente em sua máquina e faz parte do [Catálogo do LabES](../home).
|
|
|
|
|
|
|
|
## O que é?
|
|
|
|
|
|
|
|
O [Dev Container](https://code.visualstudio.com/docs/devcontainers/containers) é uma extensão do Visual Studio Code que permite desenvolver aplicações em um ambiente isolado, sem precisar instalar as dependências diretamente em sua máquina. Ele funciona criando um ambiente de desenvolvimento em um container Docker, que contém todas as ferramentas necessárias para desenvolver a aplicação, e acessando esse ambiente diretamente do Visual Studio Code.
|
|
|
|
|
|
|
|
## Quando se aplica?
|
|
|
|
|
|
|
|
O Dev Container é útil para desenvolvedores que trabalham em projetos com muitas dependências ou que precisam de um ambiente de desenvolvimento específico. Ele permite que você desenvolva a aplicação em um ambiente isolado. Isso é útil para garantir que a aplicação funcione corretamente em diferentes ambientes e para evitar conflitos entre as dependências.
|
|
|
|
|
|
|
|
## Como instalar?
|
|
|
|
|
|
|
|
Para instalar o Dev Container, siga os passos abaixo:
|
|
|
|
|
|
|
|
1. Abra o Visual Studio Code;
|
|
|
|
2. Clique no ícone de extensões na barra lateral esquerda;
|
|
|
|
3. Pesquise por "Dev Containers" e clique em "Instalar";
|
|
|
|
4. Após a instalação, reinicie o Visual Studio Code.
|
|
|
|
|
|
|
|
## Como usar/aplicar?
|
|
|
|
|
|
|
|
Existem duas formas de usar o Dev Container: quando o projeto já possui um arquivo de configuração do Dev Container ou quando você deseja criar um novo Dev Container para o projeto.
|
|
|
|
|
|
|
|
### Usando um projeto com Dev Container existente
|
|
|
|
|
|
|
|
1. Abra o Visual Studio Code;
|
|
|
|
2. Abra a pasta do projeto que você deseja desenvolver em um container;
|
|
|
|
3. Clique no ícone de **"Abrir em Container"** que aparece no canto inferior direito da janela do Visual Studio Code.
|
|
|
|
4. Selecione a opção **"Reopen in Container"** para abrir o projeto em um container.
|
|
|
|
5. O Visual Studio Code irá criar um container Docker com todas as ferramentas necessárias para desenvolver a aplicação.
|
|
|
|
6. Após a criação do container, você pode acessar o ambiente de desenvolvimento diretamente do Visual Studio Code.
|
|
|
|
|
|
|
|
### Criando um novo Dev Container para o projeto
|
|
|
|
|
|
|
|
1. Abra o Visual Studio Code;
|
|
|
|
2. Abra a pasta do projeto que você deseja desenvolver em um container;
|
|
|
|
3. Clique no ícone de **"Abrir em Container"** que aparece no canto inferior direito da janela do Visual Studio Code.
|
|
|
|
4. Selecione a opção **"New Dev Container"** para selecionar a imagem Docker que será utilizada para o container. Nela você pode adicionar programas e extensões que deseja instalar no container. Como Git, Node.js, Python, Java, etc.
|
|
|
|
5. O Visual Studio Code irá criar um container Docker com todas as ferramentas necessárias para desenvolver a aplicação.
|
|
|
|
6. Após a criação do container, você pode acessar o ambiente de desenvolvimento diretamente do Visual Studio Code.
|
|
|
|
|
|
|
|
## Configuração do Dev Container
|
|
|
|
|
|
|
|
Para configurar o Dev Container, você pode criar um arquivo `.devcontainer/devcontainer.json` na raiz do projeto com as configurações do container. Esse arquivo contém as configurações do container, como a imagem Docker que será utilizada, as extensões do Visual Studio Code que serão instaladas no container e as configurações do ambiente de desenvolvimento.
|
|
|
|
|
|
|
|
Existem containers prontos para diversas linguagens e plataformas de desenvolvimento, como Node.js, Python, Java, etc. Você pode encontrar esses containers no [repositório de exemplos do Dev Container](https://containers.dev/templates). Mas você também pode criar o seu próprio container com uma imagem Docker personalizada a partir de um Dockerfile, ou utilizar um docker-compose.yml para definir um projeto com vários serviços.
|
|
|
|
|
|
|
|
### Exemplo de arquivo `.devcontainer/devcontainer.json`
|
|
|
|
|
|
|
|
```json
|
|
|
|
{
|
|
|
|
"name": "Node.js",
|
|
|
|
"image": "ghcr.io/devcontainers/templates/javascript-node:3.1.0",
|
|
|
|
"customizations": {
|
|
|
|
"vscode": {
|
|
|
|
"settings": {
|
|
|
|
"terminal.integrated.shell.linux": "/bin/bash"
|
|
|
|
},
|
|
|
|
"extensions": [
|
|
|
|
"dbaeumer.vscode-eslint",
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## Referências
|
|
|
|
|
|
|
|
- [Remote - Containers](https://code.visualstudio.com/docs/remote/containers)
|
|
|
|
- [Docker](https://www.docker.com/)
|
|
|
|
- [Visual Studio Code](https://code.visualstudio.com/)
|
|
|
|
- [Artigo: Visual Studio Code](../ferramentas/Visual-Studio-Code) |
