Tradicionalmente, quando estamos preparando nosso ambiente de desenvolvimento local, acabamos investindo boa parte de tempo configurando esse ambiente, com tarefas como instalar SDKs, servidores de aplicação, linguagens e banco de dados. Dependendo do tamanho da sua aplicação e das quantidades de dependências, fazer essa configuração manualmente pode demorar ainda mais, além de ser propenso a falhas.
Pensando nesse tipo de cenário, pode ser interessante configurar todo seu ambiente de desenvolvimento em máquina virtuais ou containers Docker para não precisar sempre repetir essas operações e auxiliar na preparação do ambiente de desenvolvimento para um novo membro do time, por exemplo.
Embora seja uma abordagem muito útil, rodar ambientes de desenvolvimento em máquinas virtuais ou containers, dependendo do sistema operacional que você esteja utilizando, pode resultar numa experiência não tão agradável do que utilizar uma IDE diretamente no host da sua máquina.
Vendo que esse cenário de ambientes em containers tem se tornado bastante popular, a Microsoft lançou uma extensão para o VS Code com o objetivo de melhorar a experiência e reduzir as diferenças entre um ambiente de desenvolvimento local e remoto. Essa extensão de chama Remote Development, e vamos conhecer como ela funciona.
O Remote Development Pack
O VS Code é um editor de código open-source mantido pela Microsoft muito utilizado atualmente. Ele é desenvolvido para funcionar em Linux, Windows e MacOS, e graças a suas inúmeras extensões ele acaba suportando grande parte das principais stacks atuais, desde Javascript, C#, PHP, Pyhton, até Java e ferramentas de DevOps, como Terraform.
Essas extensões podem fornecer diversas funcionalidades para o VS Code, desde integrar seu ambiente com um debugger de código, integrar com sistemas de controle de código (git, mercurial e svn), até integração com containers Docker. Dentre essas inúmeras extensões, temos um pack de extensões mantidas pela Microsoft chamada Remote Development.
Esse pack acompanha três extensões: Remote WSL, Remote SSH e Remote Containers. Cada uma delas te permite acessar o sistema de arquivos de um sistema remote e utilizá-lo como se você estivesse trabalhando localmente na sua máquina. É possível instalar individualmente cada extensão, assim se você não precisa de suporte ao WSL você pode instalar as outras extensões.
Todos os processos executados pela sua aplicação e seu código fonte ficam armazenados dentro do sistema remoto. Para ter acesso a todas essas ferramentas, o VS Code Remote configura no sistema remoto um servidor, que será responsável por controlar os processos iniciados pelo VS Code no seu sistema local, bem como instalar extensões específicas do seu workspace, como suporte a alguma linguagem ou debuggers.
Na figura abaixo temos diagrama da documentação do Remote Development que mostra como é a integração entre o sistema remoto e seu sistema local:
Vamos conhecer em seguida cada uma dessas extensões.
Containers
Com a extensão de containers instalada, o VS Code irá executar seu projeto dentro de containers. Ele irá utilizar um Dockefile dentro do diretório .devcontainer e o arquivo devcontainer.json com as configurações de como o VS Code deve iniciar seu container.
Antes de mais nada, preciso que o Docker esteja instalado e rodando no nosso sistema. As seguintes versões do Docker são suportadas pela extensão:
- Windows: Docker Desktop 2.0+ com Windows 10 Pro ou Enterprise. (Docker Toolbox não é suportado.)
- macOS: Docker Desktop 2.0+.
- Linux: Docker 18.06+ e Docker Compose 1.21+
Seu container também precisa rodar com uma distribuição x86_64 suportada:
- Debian 8+
- Ubuntu 16.04+
- CentOS / RHEL 7+
- Alpine Linux
Curso Docker - Containers, Imagens, Volumes e Networks
Conhecer o cursoAtendendo esses requisitos, vamos criar um projeto de exemplo.
Primeiro, vamos clonar um projeto exemplo para ser utilizado com containers. Vou utilizar o seguinte repositório de um projeto desenvolvido em Pyhton.
https://github.com/microsoft/vscode-remote-try-python
Formação Desenvolvedor Python
Conhecer a formaçãoDepois de clonado esse projeto em um diretório local, vamos iniciar o VS Code com Remote Containers. Após instalar as extensões, repare um ícone verde no canto inferior esquerdo do VS Code. Com ele você pode iniciar uma sessão remota com o projeto desejado:
No nosso caso, vamos selecionar a opção Remote-Containers: Open Folder in Container e selecionar o diretório que clonamos o repositório. Isso irá abrir uma nova janela conectada ao nosso ambiente remoto:
Repare que nessa nova janela o ícone verde do canto esquerdo mostra algumas informações adicionais. Caso você esteja utilizando uma conexão remota, você verá o tipo da conexão remota e o nome do projeto que estamos rodando no container. Esse container já vem preparado para você executar seu projeto, inclusive configurado para utilizar com o debugger do VSCode.
No menu lateral, basta você definir os breakpoints no seu código e iniciar o modo debug. Toda a configuração de mapeamento de portas é feito no arquivo devcontainer.json, assim você pode acessar diretamente do navegador na sua máquina o container que está em execução.
Essa integração também acontece com o terminal integrado do VSCode. Ao abrir o terminal, ao invés de abrir a linha de comando do sistema local, você estará acessando a linha de comando do container, podendo executar todas as ferramentas instaladas no seu container.
SSH
Com a extensão SSH é possível acessar ambientes remotos através de um túnel SSH. Pode ser utilizado em um ambiente de desenvolvimento num servidor de desenvolvimento com uma configuração de Hardware mais potente, em um ambiente mais próximo ao de produção, ou até mesmo um Vagrant configurado na sua máquina local.
Como requisitos, é preciso ter instalado na sua máquina local um cliente compatível com OpenSSH e no seu servidor ter um servidor SSH rodando em um dos sistemas abaixo:
- Debian 8+
- Ubuntu 16.04+
- CentOS/RHEL 7+
- Raspbian Stretch/9+
Temos também suporte experimental para:
- Ubuntu 18.04+ rodando em ARM 64
- Windows 10 1803+ ou Server 2016/2019 usando o OpenSSH Server oficial
Para acessar e configurar o túnel é preciso configurar um usuário SSH para essa configuração. Você pode criar um arquivo de configuração SSH e chaves SSH para a autenticação. O VS Code permite que você configure seu arquivo de configuração do SSH, geralmente localizado em ~/.ssh/config no Linux e macOS e %USERPROFILE\.ssh\config no Windows.
Abaixo temos um exemplo de um arquivo de configuração do SSH. Modifique ele de acordo com o seu ambiente:
Host host-remoto
User usuario-remoto
HostName ip-ou-fqdn-do-host
Host host-remoto-autenticacao-chave
User usuario-remoto
HostName ip-ou-fqdn-de-outro-host
IdentityFile ~/.ssh/id_rsa-remote-ssh
Depois de configurado seu ambiente, na barra lateral temos um explorer dos nossos ambientes remotos, logo no início temos os servidores SSH configurados.
A partir daí, da mesma forma que fizemos com a extensão de Containers, podemos abrir uma nova sessão remota com SSH e selecionar uma pasta do servidor para podermos trabalhar. Ao abrir o terminal integrado por exemplo, ao invés de utilizar o terminal local, você já estará utilizando uma sessão SSH dentro do servidor.
Windows Subsystem for Linux (WSL)
Por último, com a extensão do WSL, é possível executar um projeto dentro do WSL e alterar os arquivos diretamente pelo VS Code, sem a necessidade de utilizar o compartilhamento de arquivos entre o Windows e o WSL.
Utilizando essa extensão é a melhor forma de utilizar seu ambiente de desenvolvimento no WSL 2, sendo que seu sistema de arquivos não é compartilhável diretamente com o ambiente local. Assim você pode fazer uso da performance de disco que o WSL 2 te entrega.
Ao clicar novamente no ícone verde do canto inferior esquerdo é possível abrir uma nova janela do VS Code com acesso ao sistema de arquivos da sua distribuição no WSL.
Ao abrir essa nova janela, será instalado um agente dentro do WSL que permite a conexão com o VS Code. O ícone verde indicará o nome da sua distribuição que o VS Code está conectado. Ao abrir um diretório você navegará no sistema de arquivos do WSL.
Vá até o diretório em que tenha um projeto salvo. Nesse caso, tenho salvo aqui no WSL o projeto que foi utilizado no artigo Criando um ambiente de desenvolvimento PHP com WSL. Ao navegar no diretório do projeto, todos os arquivos daquele diretório estão acessíveis.
O agente que é instalado no WSL permite uma melhor integração com o VS Code a partir do WSL também, como por exemplo, dentro do WSL abrir qualquer diretório que você esteja navegando utilizando o comando code .. A partir do VS Code é possível utilizar o terminal integrado com acesso direto dentro do WSL.
Conclusão
Vimos aqui como utilizar a extensão Remote Development do VS Code. Com ela podemos utilizar ambientes de desenvolvimento remoto com uma experiência bem próxima de um ambiente local, com a vantagem de não precisar investir horas, até mesmo dias, configurando nosso ambiente local para começar a desenvolver.
Na documentação da Microsoft é possível consultar mais informações e configurações mais avançadas para cada uma das extensões. O link se encontra aqui.
O que vocês acharam dessa extensão? Deixem a sua opinião nos comentários, e até mais!
