Como Instalar o Visual Studio Code - IDE do Servidor no Ubuntu 20.04 LTS

O code-server é uma versão do Visual Studio (VS) Code que pode ser executada remotamente no servidor e acessada através de um navegador web. Ele permite que você crie e tenha um ambiente de desenvolvimento consistente que pode ser acessado a qualquer momento e em qualquer lugar.

Neste tutorial, mostraremos como instalar o Code-server com Nginx como um proxy reverso e SSL Letsencrypt no mais recente Ubuntu 20.04 Server.

Pré-requisitos

Para este guia, instalaremos o Visual Code Server no servidor Ubuntu 20.04 com 4GB de RAM, 25GB de espaço livre em disco e 2 CPUs.

O que faremos:

• Baixar e Instalar Pacotes do Visual Code Server
• Configurar Autenticação para o Visual Code Server
• Gerar SSL Letsencrypt
• Instalar e Configurar Nginx como um Proxy Reverso
• Testes

Passo 1 - Baixar e Instalar Pacotes do Visual Code Server

Primeiro, baixaremos a versão mais recente do Visual Code Server para o Ubuntu FocalFossa e a instalaremos em nosso sistema.

Por padrão, os pacotes do code server estão disponíveis para vários sistemas operacionais. Você pode verificar a página de lançamentos do code server no GitHub usando o seguinte link.

https://github.com/cdr/code-server/releases

Agora baixe os pacotes do Visual Code Server para Ubuntu usando o comando wget abaixo.

wget -q https://github.com/cdr/code-server/releases/download/3.4.1/code-server_3.4.1_amd64.deb

Depois disso, instale o pacote do visual code server usando o comando dpkg abaixo.

sudo dpkg -i code-server_3.4.1_amd64.deb

Uma vez que a instalação esteja concluída, inicie o serviço do code server e adicione-o à inicialização do sistema.

systemctl --user start code-server  
systemctl --user enable code-server

O Visual Code Server está em funcionamento, verifique usando o seguinte comando.

ss -plnt  
systemctl --user status code-server

Abaixo está o resultado que você obterá.

Como pode ser visto, o Visual Code Server é executado por padrão no endereço IP local ‘127.0.0.1’ com a porta TCP ‘8080’.

Passo 2 - Configurar Autenticação para o Visual Code Server

Por padrão, o visual code server está em execução com a autenticação habilitada.

A autenticação por senha do visual code server é gerada por padrão no arquivo ‘~/.config/code-server/config.yaml’.

Verifique a configuração do visual code server usando o seguinte comando.

cat ~/.config/code-server/config.yaml

Você obterá algo como esta configuração.

bind-addr: 127.0.0.1:8080  
auth: password  
password: 58403006a03529a2d26c08af  
cert: false

Configurações detalhadas:

• O ‘bind-addr’ é uma opção usada para definir em qual endereço IP e porta o Code Server estará em execução.
• A opção ‘auth’ é o método de autenticação para o Visual Code Server, e por padrão, é usado o método de autenticação ‘password’.
• As opções ‘password’ são usadas para definir sua senha para acesso ao Visual Code Server, e certifique-se de usar uma senha forte.

Para alterar o endereço de ligação, a porta e a senha do Visual Code Server, altere a configuração padrão ‘~/.config/code-server/config.yaml’ conforme necessário.

Passo 3 - Gerar SSL Letsencrypt

Neste passo, geraremos o SSL letsencrypt usando a ferramenta certbot para proteger o code-server.

Instale a ferramenta certbot usando o comando apt abaixo.

sudo apt install certbot -y

Uma vez que a instalação esteja completa, gere o SSL letsencrypt usando o comando certbot abaixo.

certbot certonly --standalone --agree-tos -m [email protected] -d vscode.hakase-labs.io

Uma vez concluído, seus certificados estarão localizados no diretório ‘/etc/letsencrypt/live/vscode.hakase-labs.io/‘.

ls -lah /etc/letsencrypt/live/vscode.hakase-labs.io/

Agora você gerou o SSL Letsencrypt para proteger a instalação do code-server usando a ferramenta certbot.

Passo 4 - Configurar Nginx como um Proxy Reverso

Neste passo, instalaremos o servidor web Nginx e o configuraremos como um proxy reverso para o code-server com SSL habilitado.

Instale o pacote Nginx usando o comando apt abaixo.

sudo apt install nginx -y

Uma vez que a instalação esteja completa, vá para o diretório ‘/etc/nginx/sites-available’ e crie uma nova configuração de host virtual ‘code-server’.

cd /etc/nginx/sites-available/  
vim code-server

Agora altere o nome do domínio e o caminho do SSL com os seus e cole a configuração nele.

server {  
 listen 80;  
 server_name vscode.hakase-labs.io;  
 # forçar https  
 return 301 https://$server_name:443$request_uri;  
}  
  
server {  
 listen 443 ssl http2;  
 server_name vscode.hakase-labs.io;  
  
 ssl_certificate /etc/letsencrypt/live/vscode.hakase-labs.io/fullchain.pem;  
 ssl_certificate_key /etc/letsencrypt/live/vscode.hakase-labs.io/privkey.pem;  
  
 location / {  
 proxy_pass http://127.0.0.1:8080/;  
 proxy_set_header Host $host;  
 proxy_set_header Upgrade $http_upgrade;  
 proxy_set_header Connection upgrade;  
 proxy_set_header Accept-Encoding gzip;  
 }  
}

Salve e feche.

Agora ative o host virtual ‘code-server’, teste a configuração do nginx e certifique-se de que não haja erro.

ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/  
nginx -t

Depois disso, reinicie o serviço nginx e adicione-o à inicialização do sistema.

systemctl restart nginx  
systemctl enable nginx

Agora o serviço Nginx está em funcionamento como um proxy reverso para o code-server. Verifique usando o comando abaixo.

netstat -plntu  
systemctl status nginx

E você obterá o resultado abaixo.

O serviço Nginx está em funcionamento no servidor Ubuntu 20.04 com as portas HTTP e HTTPS habilitadas.

Passo 5 - Testes

Abra seu navegador web e digite a URL da sua instalação do code-server.

https://vscode.hakase-labs.io/

Faça login com a sua senha que você configurou no arquivo de serviço do code-server.

Uma vez que a senha esteja correta, você verá o editor VS Code no seu navegador web como abaixo.

Como resultado, você instalou o code-server no servidor Ubuntu 20.04 com Nginx como um proxy reverso e protegeu a instalação do code-server com SSL Letsencrypt.

Referência

• https://github.com/cdr/code-server