Como configurar a plataforma IDE em nuvem code-server no Ubuntu 20.04

O autor selecionou o Free and Open Source Fund para receber uma doação como parte do programa Write for DOnations.

Introdução

Com as ferramentas de desenvolvimento na nuvem, a criação e adoção de plataformas IDE (Ambiente de desenvolvimento integrado) em nuvem está crescendo. Os IDEs em nuvem permitem que a colaboração em tempo real entre as equipes de desenvolvedores funcione em um ambiente unificado de desenvolvimento que minimiza as incompatibilidades e aumenta a produtividade. Acessível através de navegadores Web, os IDEs [ambientes de desenvolvimento integrado] baseados em nuvem estão disponíveis em todo tipo de dispositivo moderno.

O code-server é o Visual Studio Code da Microsoft em execução em um servidor remoto e acessível diretamente do seu navegador. O Visual Studio Code é um editor de códigos moderno com suporte Git integrado, um depurador de códigos, um sistema de preenchimento automático inteligente e recursos personalizáveis e extensíveis. Isso significa que você pode usar vários dispositivos que executem sistemas operacionais diferentes, tendo sempre um ambiente de desenvolvimento consistente à mão.

Neste tutorial, você irá configurar a plataforma IDE em nuvem code-server na sua máquina com Ubuntu 20.04 e irá expô-la no seu domínio, protegida por certificados TLS gratuitos do Let’s Encrypt. Ao final, terá o Microsoft Visual Studio Code em execução no seu servidor Ubuntu 20.04, disponível no seu domínio e protegido com uma senha.

Pré-requisitos

• Um servidor executando o Ubuntu 20.04, com pelo menos 2 GB de memória RAM e uma conta não root com privilégios sudo. Você pode configurar isso seguindo este guia de configuração inicial de servidor.

• O Nginx instalado no seu servidor. Para obter um guia sobre como instalar o Nginx, complete os Passos 1 a 4 de Como instalar o Nginx no Ubuntu 20.04.

• Um nome de domínio totalmente registrado para hospedar o code-server, apontado para o seu servidor. Este tutorial usará o code-server.your-domain durante todo o processo. Você pode comprar um nome de domínio em Namecheap, obter um gratuitamente em Freenom ou usar o registrado de domínios de sua escolha. Para a DigitalOcean, siga esta introdução ao DNS da DigitalOcean para obter mais detalhes sobre como adicioná-los.

Passo 1 — Instalando o code-server

Nesta seção, você irá configurar o code-server no seu servidor. Isso implica em baixar a versão mais recente e criar um serviço systemd que irá manter o code-server executando sempre em segundo plano. Você também especificará uma política de reinicialização para o serviço, de modo que o code-server permaneça disponível após possíveis falhas ou reinicializações.

Todos os dados relacionados com o code-server serão armazenados em uma pasta chamada ~/code-server. Crie-a executando o seguinte comando:

mkdir ~/code-server

Navegue até ela:

cd ~/code-server

Você precisará acessar a página de lançamentos do Github do code-server e escolher a compilação mais recente do Linux (o arquivo terá ‘linux’ em seu nome). No momento em que este artigo foi escrito, a versão mais recente era a 3.3.1. Baixe-a usando o wget, executando o seguinte comando:

wget https://github.com/cdr/code-server/releases/download/v3.3.1/code-server-3.3.1-linux-amd64.tar.gz

Então, descompacte o arquivo executando:

tar -xzvf code-server-3.3.1-linux-amd64.tar.gz

Você receberá uma pasta com o mesmo nome do arquivo original que baixou, que contém o código fonte do code-server. Copie-o para a pasta /usr/lib/code-server, para que você possa acessá-lo em todo o sistema ao executar o seguinte comando:

sudo cp -r code-server-3.3.1-linux-amd64 /usr/lib/code-server

Em seguida, crie um link simbólico em /usr/bin/code-server, apontando para o executável do code-server:

sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

Em seguida, crie uma pasta para o code-server, onde serão armazenados os dados de usuário:

sudo mkdir /var/lib/code-server

Agora que baixou o code-server e o tornou disponível em todo o sistema, você criará um serviço systemd para manter o code-server executando sempre em segundo plano.

Você armazenará a configuração de serviço em um arquivo chamado code-server.service, no diretório /lib/systemd/system, onde o systemd armazena seus serviços. Crie-o usando seu editor de texto:

sudo nano /lib/systemd/system/code-server.service

Adicione as linhas a seguir:

[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/bin/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
Restart=always

[Install]
WantedBy=multi-user.target

Aqui, especifique primeiro a descrição do serviço. Depois, você vai declarar que o serviço nginx deve ser iniciado antes deste aqui. Após a seção [Unit], você deve definir o tipo de serviço (simple, que significa que o processo deve ser simplesmente executado) e fornecer o comando que será executado.

Você também especificará que o executável global do code-server deve ser iniciado com alguns argumentos específicos do code-server. --bind-addr 127.0.0.1:8080 vincula-o ao localhost na porta 8080, de modo que ele somente fica acessível diretamente de dentro do seu servidor. --user-data-dir /var/lib/code-server define seu diretório de dados de usuário e – auth password especifica que ele deve autenticar visitantes com uma senha, especificada na variável de ambiente PASSWORD, declarada na linha acima dele.

Lembre-se de substituir o your_password pela senha desejada e, em seguida, salve e feche o arquivo.

A próxima linha diz ao systemd para reiniciar o code-server em todos os eventos de mal funcionamento (por exemplo, quando ele falha ou o processo é terminado). A seção [Install] ordena que o systemd inicie esse serviço quando for possível fazer login no seu servidor.

Inicie o serviço code-server executando o seguinte comando:

sudo systemctl start code-server

Verifique se ele foi iniciado corretamente, observando seu status:

sudo systemctl status code-server

Você verá um resultado parecido com este:

Output
● code-server.service - code-server
     Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
     Active: active (running) since Wed 2020-05-20 13:03:40 UTC; 12s ago
   Main PID: 14985 (node)
      Tasks: 18 (limit: 2345)
     Memory: 26.1M
     CGroup: /system.slice/code-server.service
             ├─14985 /usr/lib/code-server/bin/../lib/node /usr/lib/code-server/bin/.. --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth>
             └─15010 /usr/lib/code-server/lib/node /usr/lib/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password

May 20 13:03:40 code-server-update-2004 systemd[1]: Started code-server.
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  Wrote default config file to ~/.config/code-server/config.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  Using config file ~/.config/code-server/config.yaml
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  Using user-data-dir /var/lib/code-server
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  code-server 3.3.1 6f1309795e1cb930edba68cdc7c3dcaa01da0ab3
May 20 13:03:40 code-server-update-2004 code-server[15010]: info  HTTP server listening on http://127.0.0.1:8080
May 20 13:03:40 code-server-update-2004 code-server[15010]: info      - Using password from $PASSWORD
May 20 13:03:40 code-server-update-2004 code-server[15010]: info      - To disable use `--auth none`
May 20 13:03:40 code-server-update-2004 code-server[15010]: info    - Not serving HTTPS

Para fazer o code-server iniciar automaticamente após a reinicialização de um servidor, habilite seu serviço executando o seguinte comando:

sudo systemctl enable code-server

Neste passo, você baixou o code-server e o disponibilizou globalmente. Depois, você criou um serviço systemd para ele e o habilitou, de modo que o code-server será iniciado a cada inicialização do servidor. Em seguida, você irá expô-lo no seu domínio, configurando o Nginx para servir como um proxy reverso entre o visitante e o code-server.

Passo 2 — Expondo o code-server em seu domínio

Nesta seção, você irá configurar o Nginx como um proxy reverso para o code-server.

Como aprendeu no passo com os pré-requisitos para usar o Nginx, os arquivos de configuração do servidor Nginx ficam armazenados em /etc/nginx/sites-available e posteriormente deverão ser simbolicamente associados ao /etc/nginx/sites-enabled para se tornarem ativos.

Você armazenará a configuração para expor o code-server em seu domínio, em um arquivo chamado code-server.conf, sob /etc/nginx/sites-available. Inicie criando o arquivo, usando o seu editor:

sudo nano /etc/nginx/sites-available/code-server.conf

Adicione as linhas a seguir:

server {
	listen 80;
	listen [::]:80;

	server_name code-server.your-domain;

	location / {
	  proxy_pass http://localhost:8080/;
	  proxy_set_header Upgrade $http_upgrade;
	  proxy_set_header Connection upgrade;
	  proxy_set_header Accept-Encoding gzip;
	}
}

Substitua code-server.your-domain pelo domínio desejado e, em seguida, salve e feche o arquivo.

Nesse arquivo, você vai definir que o servidor Nginx deverá escutar a porta HTTP 80. Então, especificará um server_name que dirá ao Nginx para qual domínio ele deve aceitar pedidos, aplicando essa configuração específica. No próximo bloco, para o local raiz (/), você especificará que os pedidos devem ser intercambiados com o code-server que está executando no localhost:8080. As três linhas seguintes (começando por proxy_set_header) ordenam que o Nginx transporte alguns cabeçalhos de pedidos HTTP - que são necessários para o funcionamento correto do WebSockets e que o code-server utiliza amplamente.

Para ativar a configuração desse site, você precisará criar uma ligação simbólica dele na pasta /etc/nginx/sites-enabled, executando:

sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

Para testar a validade da configuração, execute o seguinte comando:

sudo nginx -t

Você verá o seguinte resultado:

Output
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Para que a configuração entre em vigor, você precisará reiniciar o Nginx:

sudo systemctl restart nginx

Agora, você tem sua instalação do code-server acessível no seu domínio. No próximo passo, irá protegê-lo, aplicando um certificado TLS gratuito do Let’s Encrypt.

Passo 3 — Protegendo seu domínio

Nesta seção, você irá proteger seu domínio usando um certificado TLS do Let’s Encrypt, que será fornecido usando o Certbot.

Para instalar a versão mais recente do Certbot e do seu plug-in do Nginx, execute o seguinte comando:

sudo apt install certbot python3-certbot-nginx

Como parte dos pré-requisitos, você habilitou o ufw (Uncomplicated Firewall) [Firewall descomplicado] e o configurou de modo a permitir tráfego de HTTP não criptografado. Para conseguir acessar o site protegido, você precisará configurá-lo para aceitar o tráfego criptografado, executando o seguinte comando:

sudo ufw allow https

O resultado será:

Output
Rule added
Rule added (v6)

Assim como acontece com o Nginx, você terá que recarregá-lo para que a configuração entre em vigor:

sudo ufw reload

O resultado será:

Output
Firewall reloaded

Depois, no seu navegador, navegue até o domínio que usou para o code-server. Você verá o prompt de login do code-server.

O code-server está pedindo sua senha. Digite a senha que você definiu no passo anterior e pressione** Enter IDE**. Agora, você entrará no code-server e logo verá a interface gráfica do usuário (GUI) do seu editor.

Agora que verificou se o code-server está corretamente exposto no seu domínio, você instalará certificados TLS do Let’s Encrypt para protegê-lo, usando o Certbot.

Para solicitar certificados para seu domínio, execute o seguinte comando:

sudo certbot --nginx -d code-server.your-domain

Nesse comando, você executa o certbot para solicitar certificados para o seu domínio — e envia o nome de domínio com o parâmetro -d. O sinalizador --nginx diz a ele para alterar automaticamente a configuração do site do Nginx para oferecer suporte ao HTTPS. Lembre-se de substituir o code-server.your-domain pelo seu próprio nome de domínio.

Se for a primeira vez que você executa o Certbot, será solicitado que você forneça um endereço de e-mail para avisos urgentes e aceite os Termos de serviço do EFF. Então, o Certbot irá solicitar certificados do Let’s Encrypt para o seu domínio. Em seguida, ele irá perguntar se você deseja redirecionar todo o tráfego HTTP para o HTTPS:

Output
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

É recomendável selecionar a segunda opção para maximizar a segurança. Após digitar sua seleção, pressione ENTER.

O resultado será semelhante a este:

Output
IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
 /etc/letsencrypt/live/code-server.your-domain/fullchain.pem
 Your key file has been saved at:
 /etc/letsencrypt/live/code-server.your-domain/privkey.pem
 Your cert will expire on ... To obtain a new or tweaked
 version of this certificate in the future, simply run certbot again
 with the "certonly" option. To non-interactively renew *all* of
 your certificates, run "certbot renew"
- Your account credentials have been saved in your Certbot
 configuration directory at /etc/letsencrypt. You should make a
 secure backup of this folder now. This configuration directory will
 also contain certificates and private keys obtained by Certbot so
 making regular backups of this folder is ideal.
- If you like Certbot, please consider supporting our work by:

 Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
 Donating to EFF:                    https://eff.org/donate-le

Isso significa que o Certbot gerou com sucesso os certificados TLS e que os aplicou à configuração do Nginx para seu domínio. Neste ponto, você já pode recarregar o domínio do seu code-server no seu browser. Poderá, ainda, observar um cadeado à esquerda do endereço do site, o que significa que sua conexão está devidamente protegida.

Agora que o code-server se encontra acessível em seu domínio, através de um proxy reverso protegido do Nginx, você está pronto para revisar a interface de usuário do code-server.

Passo 4 — Usando a interface do code-server

Nesta seção, você irá usar alguns dos recursos da interface do code-server. Como o code-server é o Visual Studio Code executado em nuvem, ele tem a mesma interface que a edição da área de trabalho independente.

À esquerda do IDE, há uma linha vertical de seis botões que abrem os recursos usados com mais frequência, em um painel lateral conhecido como Barra de Atividades.

Essa barra pode ser personalizada para que você possa mover essas visualizações em uma ordem diferente ou removê-las da barra. Por padrão, o primeiro botão abre o menu geral em uma lista suspensa, enquanto a segunda visualização abre o painel do Explorer que fornece navegação do tipo árvore da estrutura do projeto. Você pode gerenciar suas pastas e arquivos aqui —criando, excluindo, movendo e renomeando-as conforme necessário. A próxima visualização fornece acesso a uma funcionalidade de busca e substituição.

Depois disso, na ordem padrão, vem sua visualização dos sistemas de controle de origem, como o Git. O Visual Studio Code também oferece suporte a outros fornecedores de controle de origem; você pode encontrar mais instruções para fluxos de trabalho de controle de origem nesta documentação.

A opção de depurador na Barra de Atividades fornece todas as ações comuns para depuração no painel. O Visual Studio Code vem com suporte integrado para o depurador de tempo de execução do Node.js e qualquer linguagem que transcompila para o Javascript. Para outras linguagens, você pode instalar as extensions para o depurador necessário. Você pode salvar as configurações de depuração no arquivo launch.json.

A visualização final na Barra de Atividades fornece um menu para acessar as extensões disponíveis no Marketplace.

A parte central da GUI é o seu editor, que pode ser separado por guias para a edição de códigos. Você pode alterar sua visualização de edição para um sistema em grade ou para arquivos lado a lado.

Após criar um novo arquivo através do menu File, um arquivo vazio irá abrir em uma nova guia e, uma vez salvo, o nome do arquivo poderá ser visualizado no painel lateral do Explorer. Para criar pastas, clique com o botão direito do mouse na barra lateral do Explorer e clique na opção New Folder. Você pode expandir uma pasta clicando em seu nome, bem como arrastar e soltar arquivos e pastas nas partes superiores da hierarquia - para movê-los para uma nova localização.

Você pode obter acesso a um terminal, digitando CTRL+SHIFT+` , ou clicando em Terminal, no menu suspenso superior e selecionando New Terminal. O terminal abrirá em um painel inferior e seu diretório de trabalho será definido como o espaço de trabalho do projeto, que contém os arquivos e pastas mostrados no painel lateral do Explorer.

Você explorou uma visão geral de alto nível da interface do code-server e revisou algumas das funcionalidades mais utilizadas.

Conclusão

Agora, você tem o code-server, um IDE em nuvem versátil, instalado no seu servidor Ubuntu 20.04, exposto no seu domínio e protegido com os certificados do Let’s Encrypt. Desta forma, você pode trabalhar em projetos individualmente, bem como em uma configuração de trabalho colaborativo em equipe. Executar um IDE em nuvem libera recursos em sua máquina local e permite a você dimensionar os recursos quando necessário. Para mais informações, consulte a documentação do Visual Studio Code para obter recursos adicionais e instruções detalhadas em outros componentes do code-server.

Caso queira executar o code-server no cluster do seu Kubernetes da DigitalOcean, verifique nosso tutorial sobre Como configurar a plataforma IDE em nuvem do code-server no Kubernetes da DigitalOcean.