Como configurar a plataforma IDE na nuvem do Eclipse Theia no Ubuntu 18.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 para a nuvem, a adoção de plataformas IDE (Ambiente de desenvolvimento integrado) em nuvem está crescendo. Os IDEs em nuvem estão acessíveis a partir de todo tipo de dispositivo moderno através de navegadores Web e oferecem várias vantagens para cenários de colaboração em tempo real. Trabalhar em um IDE em nuvem fornece um ambiente unificado de desenvolvimento e teste para você e sua equipe, ao mesmo tempo que minimiza as incompatibilidades entre plataformas. Acessível através de navegadores Web, as IDEs em nuvem estão disponíveis em todo tipo de dispositivo moderno.

O Eclipse Theia é um IDE em nuvem extensível que executa em um servidor remoto, podendo ser acessado a partir de um navegador Web. Visualmente, ele foi criado para parecer e se comportar de maneira semelhante ao código do Microsoft Visual Studio, o que significa que ele é compatível com muitas linguagens de programação, tem um layout flexível e um terminal integrado. O que separa o Eclipse Theia de outros softwares de IDE em nuvem é a sua extensibilidade; ele pode ser modificado com extensões personalizadas, o que permite que você crie um IDE em nuvem adequado às suas necessidades.

Neste tutorial, você irá implantar o Eclipse Theia em seu servidor Ubuntu 18.04, usando o Docker Compose, uma ferramenta de orquestração de contêineres. Você irá expô-lo em seu domínio usando o nginx-proxy, um sistema automatizado para o Docker que simplifica o processo de configuração do Nginx para servir como um proxy reverso de um contêiner. Você também irá protegê-lo, usando um certificado TLS do Let’s Encrypt gratuito, o qual você provisionará com seu add-on especializado. No final, você terá o Eclipse Theia executando em seu servidor Ubuntu 18.04, disponível através do protocolo HTTPS e que exige que o usuário faça login.

Pré-requisitos

• Um servidor Ubuntu 18.04, com privilégios raiz e uma conta secundária não raiz. É possível configurar esses detalhes com o nosso Guia de configuração inicial de servidor para Ubuntu 18.04. Para este tutorial, o usuário não raiz será sammy.
• O Docker instalado no seu servidor. Siga o Passo 1 e o Passo 2 do artigo sobre Como instalar o Docker no Ubuntu 18.04. Para obter uma introdução ao Docker, consulte o artigo entitulado O ecossistema Docker: uma introdução aos componentes comuns.
• O Docker Compose instalado no seu servidor. Siga o Passo 1 do artigo sobre Como instalar o Docker Compose no Ubuntu 18.04.
• Um nome de domínio totalmente registrado. Este tutorial usará o theia.your_domain durante todo o processo. Você pode comprar um nome de domínio em Namecheap, obter um gratuitamente em Freenom ou usar o registrador de domínios de sua escolha.
• Um registro de DNS do tipo A com o theia.your_domain apontando para o endereço IP público do seu servidor. Você pode seguir esta introdução para DNS DigitalOcean para mais detalhes sobre como adicioná-los.

Passo 1 — Implantando o nginx-proxy com o Let’s Encrypt

Nesta seção, você implantará o nginx-proxy e seu add-on do Let’s Encrypt usando o Docker Compose. Isso habilitará o provisionamento e a renovação automáticos dos certificados de TLS, de modo que, quando implantar o Eclipse Theia, ele estará acessível em seu domínio através do protocolo HTTPS.

Para o objetivo deste tutorial, você armazenará todos os arquivos sob o ~/eclipse-theia. Crie o diretório executando o seguinte comando:

mkdir ~/eclipse-theia

Navegue até ele:

cd ~/eclipse-theia

Você armazenará a configuração do Docker Compose para o nginx-proxy em um arquivo chamado nginx-proxy-compose.yaml. Crie o arquivo usando seu editor de texto:

nano nginx-proxy-compose.yaml

Adicione as linhas a seguir:

version: '2'

services:
  nginx-proxy:
    restart: always
    image: jwilder/nginx-proxy
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - "/etc/nginx/htpasswd:/etc/nginx/htpasswd"
      - "/etc/nginx/vhost.d"
      - "/usr/share/nginx/html"
      - "/var/run/docker.sock:/tmp/docker.sock:ro"
      - "/etc/nginx/certs"

  letsencrypt-nginx-proxy-companion:
    restart: always
    image: jrcs/letsencrypt-nginx-proxy-companion
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
    volumes_from:
      - "nginx-proxy"

Aqui, você definirá dois serviços que o Docker Compose irá executar, o nginx-proxy e seu companheiro Let’s Encrypt. Para o proxy, você especificará o jwilder/nginx-proxy como a imagem, mapeando as portas HTTP e HTTPS e definindo os volumes que ficarão acessíveis para o proxy durante o tempo de execução.

Volumes são diretórios no seu servidor aos quais o serviço definido terá total acesso; além disso, posteriormente você os usará para configurar a autenticação do usuário. Para conseguir isso, você usará o primeiro volume da lista. Esse volume mapeará o diretório local /etc/nginx/htpasswd para o diretório de mesmo nome no contêiner. Naquela pasta, o nginx-proxy espera encontrar um arquivo com exatamente o mesmo nome do domínio-alvo, contendo credenciais de login para a autenticação de usuários no formato htpasswd (username:hashed_password).

Para o add-on, você nomeará a imagem do Docker e permitirá o acesso ao soquete do Docker, definindo um volume. Em seguida, você especificará que o add-on deve herdar o acesso aos volumes definidos para o nginx-proxy. Ambos os serviços têm o restart definido como always, que ordena que o Docker reinicie os contêineres em caso de falha ou reinicialize o sistema.

Salve e feche o arquivo.

Implante a configuração executando:

docker-compose -f nginx-proxy-compose.yaml up -d

Aqui, você envia o nome do arquivo nginx-proxy-compose.yaml para o parâmetro -f do comando docker-compose, o qual especifica o arquivo a ser executado. Em seguida, você envia o verbo up que o instrui a executar os contêineres. O sinalizador -d habilita o modo desanexado, o que significa que o Docker Compose irá executar os contêineres em segundo plano.

O resultado final ficará parecido com este:

Output
Creating network "eclipse-theia_default" with the default driver
Pulling nginx-proxy (jwilder/nginx-proxy:)...
latest: Pulling from jwilder/nginx-proxy
8d691f585fa8: Pull complete
5b07f4e08ad0: Pull complete
...
Digest: sha256:dfc0666b9747a6fc851f5fb9b03e65e957b34c95d9635b4b5d1d6b01104bde28
Status: Downloaded newer image for jwilder/nginx-proxy:latest
Pulling letsencrypt-nginx-proxy-companion (jrcs/letsencrypt-nginx-proxy-companion:)...
latest: Pulling from jrcs/letsencrypt-nginx-proxy-companion
89d9c30c1d48: Pull complete
668840c175f8: Pull complete
...
Digest: sha256:a8d369d84079a923fdec8ce2f85827917a15022b0dae9be73e6a0db03be95b5a
Status: Downloaded newer image for jrcs/letsencrypt-nginx-proxy-companion:latest
Creating eclipse-theia_nginx-proxy_1 ... done
Creating eclipse-theia_letsencrypt-nginx-proxy-companion_1 ... done

Você implantou o nginx-proxy e seu companheiro Let’s Encrypt usando o Docker Compose. Agora, siga em frente para configurar e proteger o Eclipse Theia em seu domínio.

Passo 2 — Implantando o Eclipse Theia em Docker

Nesta seção, você criará um arquivo que contém quaisquer combinações permitidas de login que um usuário precisará informar. Em seguida, você implantará o Eclipse Theia em seu servidor usando o Docker Compose e irá expô-lo em seu domínio protegido usando o nginx-proxy.

Como explicado no passo anterior, o nginx-proxy espera que as combinações de login estejam em um arquivo que tem o mesmo nome do domínio exposto, no formato htpasswd e armazenadas sob o diretório /etc/nginx/htpasswd no contêiner. O diretório local que mapeia para o virtual não precisa ser o mesmo, como foi especificado na configuração do nginx-proxy.

Para criar combinações de login, primeiro, você precisará instalar o htpasswd, executando o seguinte comando:

sudo apt install apache2-utils

O pacote apache2-utils contém o utilitário htpasswd.

Crie o diretório /etc/nginx/htpasswd:

sudo mkdir -p /etc/nginx/htpasswd

Crie um arquivo que armazenará os logins para o seu domínio:

sudo touch /etc/nginx/htpasswd/theia.your_domain

Lembre-se de substituir o theia.your_domain pelo seu domínio no Eclipse Theia.

Para adicionar uma combinação de nome de usuário e senha, execute o seguinte comando:

sudo htpasswd /etc/nginx/htpasswd/theia.your_domain username

Substitua o username com o nome de usuário que quiser adicionar. Você será solicitado a informar uma senha por duas vezes. Após fornecê-la, o htpasswd adicionará o nome de usuário e a senha hash ao final do arquivo. Você pode repetir esse comando para a quantidade de logins que quiser adicionar.

Agora, você criará a configuração para implantar o Eclipse Theia. Você o armazenará em um arquivo chamado eclipse-theia-compose.yaml​​​. Crie o arquivo usando seu editor de texto:

nano eclipse-theia-compose.yaml

Adicione as linhas a seguir:

version: '2.2'

services:
  eclipse-theia:
    restart: always
    image: theiaide/theia:next
    init: true
    environment:
      - VIRTUAL_HOST=theia.your_domain
      - LETSENCRYPT_HOST=theia.your_domain

Nessa configuração, você definirá um único serviço chamado eclipse-theia com o restart definido para always e a theiaide/theia:next como a imagem do contêiner. Definirá também o init para true para instruir o Docker a usar o init como o gerenciador de processos principal ao executar o Eclipse Theia dentro do contêiner.

Em seguida, especifique duas variáveis de ambiente na seção de environment: VIRTUAL_HOST e LETSENCRYPT_HOST. A primeira variável é enviada para o nginx-proxy e lhe diz em qual domínio o contêiner deve ser exposto, ao passo que a outra variável é usada por seu add-on do Let’s Encrypt e especifica para qual domínio deve solicitar os certificados de TLS. A menos que especifique um curinga como o valor para o VIRTUAL_HOST, eles devem ser iguais.

Lembre-se de substituir o theia.your_domain pelo seu domínio desejado e, então, salve e feche o arquivo.

Agora, implante o Eclipse Theia, executando:

docker-compose -f eclipse-theia-compose.yaml up -d

O resultado final se parecerá com o seguinte:

Output
...
Pulling eclipse-theia (theiaide/theia:next)...
next: Pulling from theiaide/theia
63bc94deeb28: Pull complete
100db3e2539d: Pull complete
...
Digest: sha256:c36dff04e250f1ac52d13f6d6e15ab3e9b8cad9ad68aba0208312e0788ecb109
Status: Downloaded newer image for theiaide/theia:next
Creating eclipse-theia_eclipse-theia_1 ... done

Em seguida, no seu navegador, navegue até o domínio que estiver usando para o Eclipse Theia. Seu navegador mostrará um prompt pedindo que você faça login. Após fornecer as credenciais corretas, você acessará o Eclipse Theia e verá imediatamente a interface gráfica do usuário (GUI) do editor. Na sua barra de endereço, você verá um cadeado que indica que a conexão é segura. Se não o ver imediatamente, espere alguns minutos para que os certificados TLS sejam provisionados; depois, recarregue a página.

Agora que você pode acessar seu IDE em nuvem com segurança, no próximo passo,você começará a usar o editor.

Passo 3 — Usando a interface do Eclipse Theia

Nesta seção, você irá explorar alguns dos recursos da interface do Eclipse Theia.

No lado esquerdo do IDE, há uma linha vertical de quatro botões que abrem os recursos mais usados em um painel lateral.

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, a primeira visualização abre o painel do Explorer que fornece navegação em formato de árvore da estrutura do projeto. Você pode gerenciar suas pastas e arquivos aqui —criando, excluindo, movendo e renomeando-as conforme necessário.

Após criar um novo arquivo através do menu File, você verá um arquivo vazio, aberto em uma nova guia. Assim que for salvo, você consegue ver o nome do arquivo no painel lateral do Explorer. Para criar pastas, clique com o botão direito na barra lateral do Explorer e clique em New Folder. Você pode expandir uma pasta clicando em seu nome e da mesma forma pode arrastar e derrubar arquivos e pastas nas partes superiores da hierarquia para movê-los para uma nova localização.

As duas opções seguintes dão acesso às funções de buscar e substituir. Na sequência, a próxima função fornece uma visualização dos sistemas de controle da fonte que você possa estar usando, como o Git.

A visualização final é a opção de depurador, que fornece todas as ações comuns para a depuração no painel. Você pode salvar as configurações de depuração no arquivo launch.json.

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. Como todos os IDEs modernos, o Eclipse Theia é compatível com o realce de sintaxe para seu código.

Você pode ter acesso a um terminal digitando CTRL+SHIFT+` , ou clicando em Terminal no menu 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 Eclipse Theia e revisou algumas das funcionalidades mais utilizadas.

Conclusão

Agora, você tem o Eclipse Theia, um IDE em nuvem versátil, instalado no seu servidor Ubuntu 18.04, usando o Docker Compose e o nginx-proxy. Você o protegeu com um certificado TLS do Let’s Encrypt gratuito e configurou a instância para exigir as credenciais de login do usuário. Você pode trabalhar no seu código e nos documentos de origem com ele sozinho ou colaborar com sua equipe. Você também pode tentar compilar sua própria versão do Eclipse Theia se precisar de recursos adicionais. Para obter mais informações sobre como fazer isso, acesse os documentos do Theia.