Como usar o Visual Studio Code para o desenvolvimento remoto por meio do plug-in Remote-SSH

Introdução

O Visual Studio Code é um Ambiente integrado de desenvolvimento (IDE) para desenvolvedores. Sua grande seleção de plug-ins, de design mínimo e suporte multiplataforma tornam-no uma ótima escolha para os desenvolvedores de todos os níveis. Este tutorial se concentra no uso do plug-in Remote-SSH para habilitar o desenvolvimento de softwares remotos. Com esse plug-in , você pode editar arquivos na sua estação de trabalho local, mas executar tarefas de desenvolvimento, como a execução do programa, testes de unidade ou análise estática, em um servidor remoto.

Há muitas razões para que isso seja benéfico para você. Por exemplo, você pode ter uma estação de trabalho Windows e querer desenvolver no Windows, mas seu código acabará sendo executado no Linux. Você pode precisar de mais RAM ou poder de processamento do que sua máquina atual tem disponível, ou querer manter o código fora da sua máquina pessoal devido a uma política de empresa ou pela vontade de manter sua estação de trabalho inalterada.

Neste tutorial, você irá habilitar o plug-in Remote-SSH, configurar o Visual Studio Code para executar o código no servidor remoto e executar o código de sua instalação local do Visual Studio Code no servidor remoto.

Pré-requisitos

Para acompanhar este guia, você vai precisar do seguinte:

• Uma máquina local de desenvolvimento executando o Windows, MacOSX ou Linux. Este tutorial não funcionará nos dispositivos ChromeOS.
• O Visual Studio Code, que pode ser baixado e instalado no site oficial.
• Um par de chaves SSH gerado:
  • Se estiver usando o macOS ou o Linux, siga o Passo 1 do Como configurar chaves SSH no Ubuntu 18.04. Os comandos são os mesmos, então não se preocupe se o tutorial disser que é para o Ubuntu 18.04.
  • Se estiver usando o Windows, siga o tutorial Como criar chaves SSH com o PuTTY no Windows para criar sua chave SSH.
  • Se estiver usando a DigitalOcean, siga o guia Como enviar chaves SSH públicas para uma conta da DigitalOcean.
• Um servidor Ubuntu 18.04 configurado conforme o Guia de configuração inicial do servidor Ubuntu 18.04, incluindo um usuário não raiz habilitado para o sudo e um firewall.

Passo 1 — Instalando o plug-in Remote-SSH

O Marketplace de extensões é o local onde pode você pode baixar extensões compatíveis e de terceiros para uma variedade de ferramentas e linguagens de programação diferentes. É aqui que você procurará pelo plug-in Remote-SSH e o instalará

No lado esquerdo da IDE, há uma linha vertical de cinco ícones. O ícone mais abaixo, que se parece com quatro quadrados em uma caixa, estando o do topo direito descolando, é o ícone para o Marketplace de extensões:

Você também pode acessar essa seção pressionando Ctrl+Shift+X. Quando a página for aberta, você verá os plug-ins sugeridos para baixar e instalar.

Assim que tiver o Marketplace de extensões aberto, digite Remote-SSH na barra de busca Search Extensions in Marketplace. Quando encontrar o plug-in, selecione-o e, em seguida, clique no botão verde Install para instalar a extensão.

A extensão agora está instalada. Em seguida, você configurará a extensão para que você consiga conectar-se ao seu servidor.

Passo 2 — Configurando o plug-in Remote-SSH e conectando-se ao seu servidor

Agora que o plug-in está instalado, você pode configurá-lo para que se conecte a um servidor. Para fazer isso, serão necessárias as seguintes informações:

• O IP ou nome do host do servidor.
• O nome de usuário com o qual você se conectará.
• A chave privada que você usará para autenticar seu usuário.

Você usará essas informações para criar um arquivo de configuração SSH, que o Visual Studio Code pode usufruir para usar o SSH no servidor para sincronizar os arquivos e executar códigos em seu nome. Essa configuração será criada usando o Visual Studio Code.

Agora que você tem o plug-in Remote-SSH instalado, verá uma pequena caixa verde no canto inferior esquerdo da interface do Visual Studio Code. Se você passar o ponteiro do mouse pela caixa, o pop-up dirá Open a remote window (Abrir uma janela remota). O botão se parece com um sinal “maior que” abaixo de um sinal “menor que” ><, como o da seguinte imagem:

Clique no botão e uma caixa de diálogo aparece no centro superior. Selecione Remote-SSH: Open Configuration File… da lista:

O próximo prompt perguntará qual arquivo de configuração você deseja abrir. Se estiver no Windows, verá duas localizações: uma no seu diretório de usuário pessoal e outra na localização de instalação para o SSH. Você deve utilizar o arquivo no seu diretório de usuário enquanto estiver configurando o servidor.

Selecione o arquivo e seu editor abrirá o arquivo config. Adicione o código a seguir ao arquivo para definir a conexão com seu servidor, substituindo as seções destacadas pelas informações do seu servidor:

Host my_remote_server
    HostName your_server_ip_or_hostname
    User sammy
    IdentityFile /location/of/your/private/key

Aqui está como este arquivo de configuração funciona:

• Host: especifica um nome para seu host. Isso permite que você use como alternativa um nome curto ou uma abreviação, em vez do endereço IP completo ou nome do host ao se conectar ao servidor.
• HostName: o nome real do host do servidor, que é um endereço IP ou um nome de domínio totalmente qualificado.
• User: o usuário com o qual você deseja se conectar.
• IdentityFile: o caminho para sua chave SSH privada. Em sistemas Mac e Linux, você encontrará isso em seu diretório base, em um diretório .ssh escondido, chamado normalmente de id_rsa. Se estiver no Windows, você terá especificado um local para salvar este arquivo quando o criou usando o putty-gen.

Especifique os valores apropriados no seu arquivo e salve o arquivo.

O Visual Studio Code está agora configurado e pronto para se conectar ao seu servidor. Clique no botão verde Open a remote window, no canto inferior esquerdo e selecione Remote-SSH: Connect to Host…

Assim que tiver feito isso, todos os servidores disponíveis e configurados aparecerão no menu suspenso. Selecione o servidor ao qual você deseja se conectar dessa lista.

Se essa é a primeira vez que você se conecta a este servidor de sua máquina, provavelmente será exibido um diálogo de verificação do SSH Fingerprint, como a da seguinte imagem:

Isso é para garantir que você esteja se conectando ao servidor correto. É possível verificar isso fazendo login manualmente e executando ssh-keygen -l -f /etc/ssh/ssh_host_key.pub para visualizar as impressões digitais do servidor. Se essa impressão for a mesma que aquela sendo apresentada a você no Visual Studio Code, então você de fato está se conectando ao servidor correto, logo, clique em Continue.

Por padrão, o Visual Studio Code abre uma nova janela quando uma nova conexão é feita. Uma nova janela aparecerá com a tela de boas-vindas. Você saberá se sua conexão foi bem-sucedida caso veja SSH: your_ip_address_or_hostname na caixa verde no canto inferior esquerdo. Isso significa que o Visual Studio Code está conectado e se comunicando com seu servidor remoto.

Agora que está conectado, execute comandos e códigos do seu editor.

Passo 3 — Executando códigos no servidor remoto

O plug-in Remote-SSH está configurado e é hora de executar algum código em sua máquina remota. Abra uma janela de terminal selecionando Terminal da barra de navegação no topo da janela do Visual Studio e clicando em New Terminal. Também é possível abrir um terminal pressionando ``CTRL+Shift+```. O terminal que é aberto é um terminal no seu servidor remoto, não um na sua máquina local.

Quando o terminal abrir, emita o seguinte comando para visualizar o endereço IP do seu servidor para verificar se você está conectado ao seu servidor remoto:

ip addr

Você verá o seguinte resultado no seu terminal:

Output
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host
       valid_lft forever preferred_lft forever
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff
    inet your_server_ip brd your_broadcast_address scope global eth0
       valid_lft forever preferred_lft forever
    ...

Para testar a capacidade de executar códigos remotos, crie um novo arquivo do Python chamado hello.py no seu editor. Quando estiver conectado ao seu servidor remoto, todos os arquivos criados através do Visual Studio Code serão salvos no servidor, não na sua máquina local.

Adicione o conteúdo a seguir ao arquivo:

print("Hello Sammy!")

Para executar este programa no seu servidor, abra um terminal no Visual Studio Code por meio do menu de navegação ou pressionando a sequência de teclas CTRL+Shift+'. Como essa sessão de terminal está conectada ao seu servidor remoto, execute o seguinte comando no terminal para executar seu programa hello.py:

python3 hello.py

O resultado do seu programa será exibido.

Também é possível executar o arquivo a partir do menu de contexto Debug, selecionando Run without Debugging.

Conclusão

Agora, você tem o Visual Studio Code configurado para o desenvolvimento em um servidor remoto usando o SSH. A execução remota com uma IDE traz muitos benefícios, incluindo a capacidade de testar rapidamente como seu código é executado em diferentes sistemas operacionais e diferentes especificações de hardware. Enquanto tiver uma conexão de Internet, você pode se conectar ao seu servidor e trabalhar em seu código de qualquer computador e será capaz de desenvolver usando um ambiente Linux, mesmo se estiver usando o Windows como seu sistema operacional primário.