One place for hosting & domains

      nuvem

      Como configurar a plataforma IDE em nuvem code-server 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 na nuvem, a criação e adoção de plataformas IDE (Ambiente de desenvolvimento integrado) em nuvem está crescendo. As 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, as IDEs 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ódigo 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 18.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 18.04, disponível no seu domínio e protegido com uma senha.

      Pré-requisitos

      • Um servidor executando o Ubuntu 18.04, com pelo menos 2 GB de memória RAM e uma conta não raiz com privilégios de 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 do tutorial de Como instalar o Nginx no Ubuntu 18.04.

      • Ambos os registros de DNS a seguir serão configurados para o seu servidor. Você pode seguir esta introdução ao DNS da DigitalOcean para obtermais detalhes sobre como adicioná-los.

        • Um registro do tipo A, com o your-domain apontando para o endereço IP público do seu servidor.
        • Um registro do tipo A, com o www.your-domain apontando para o endereço IP público do seu servidor.
      • Um nome de domínio totalmente registrado para hospedar o code-server, apontado para 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 registrador de domínios de sua escolha.

      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 em execução – 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:

      Navegue até ela:

      Será necessário ir até a página de lançamentos do Github e escolher a última compilação do Linux (o arquivo terá “linux” em seu nome). No momento em que este artigo foi escrito, a versão mais recente era a 2.1692. Baixe-a usando o wget, executando o seguinte comando:

      • wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

      Então, descompacte o arquivo executando:

      • tar -xzvf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

      Você receberá uma pasta com o mesmo nome do arquivo original que baixou, que contém o executável do code-server. Navegue até ela:

      • cd code-server2.1692-vsc1.39.2-linux-x86_64

      Copie o executável do code-server para /usr/local/bin, para que possa acessá-la em todo o sistema ao executar o seguinte comando:

      • sudo cp code-server /usr/local/bin

      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 seguintes:

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

      [Unit]
      Description=code-server
      After=nginx.service
      
      [Service]
      Type=simple
      Environment=PASSWORD=your_password
      ExecStart=/usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
      Restart=always
      
      [Install]
      WantedBy=multi-user.target
      

      Aqui, primeiro você vai especificar 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. --host 127.0.0.1 se vincula ao localhost. Assim, 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á uma saída similar a essa:

      Output

      ● code-server.service - code-server Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled) Active: active (running) since Mon 2019-12-09 20:07:28 UTC; 4s ago Main PID: 5216 (code-server) Tasks: 23 (limit: 2362) CGroup: /system.slice/code-server.service ├─5216 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password └─5240 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password Dec 09 20:07:28 code-server-ubuntu-1804 systemd[1]: Started code-server. Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info Server listening on http://127.0.0.1:8080 Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info - Using custom password for authentication Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: 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, o 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 usando seu editor:

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

      Adicione as linhas seguintes:

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

      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ê preciará 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:

      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, você precisará adicionar o repositório de pacotes do Certbot ao seu servidor, executando o seguinte comando:

      • sudo add-apt-repository ppa:certbot/certbot

      Aperte ENTER para aceitar.

      Na sequência, instale o Certbot e seu plug-in do Nginx:

      • sudo apt install python-certbot-nginx

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

      A saída 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:

      A saída mostrará:

      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.

      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 verá a interface gráfica do usuário (GUI) do seu editor.

      GUI do code-server

      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.

      A saída será semelhante a esta:

      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 Atividade.

      Painel lateral - GUI do code-server

      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.

      Painel do Git com o menu de contexto aberto

      A opção de depurador na Barra de Atividade fornece todas as ações comuns para o 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.

      Visualização do Depurador com o launch.json aberto

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

      Guias da GUI do code-server

      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.

      Exibição em Grade do Editor

      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.

      GUI do code-server - Nova pasta

      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, uma IDE em nuvem versátil, instalada no seu servidor Ubuntu 18.04, exposto no seu domínio e protegido usando 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 que 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.



      Source link

      Como configurar a plataforma de IDE em nuvem code-server no Ubuntu 18.04 [Guia de início rápido]


      Introdução

      O code-server é o Visual Studio Code da Microsoft em execução em um servidor remoto e acessível diretamente do seu navegador. Isso significa que você pode usar vários dispositivos, executando sistemas operacionais diferentes , tendo sempre um ambiente de desenvolvimento consistente à mão.

      Neste tutorial, você irá configurar a plataforma de IDE (Ambiente de Desenvolvimento Integrado) em nuvem code-server em sua máquina com Ubuntu 18.04 e expô-la no seu domínio, protegida com o certificado Let’s Encrypt. Para obter uma versão mais detalhada deste tutorial, consulte o artigo sobre Como configurar a plataforma de IDE em nuvem code-server no Ubuntu 18.04.

      Pré-requisitos

      • Um servidor executando o Ubuntu 18.04, com pelo menos 2 GB de memória RAM, acesso raiz e uma conta sudo não raiz. É possível configurar esses detalhes, seguindo o Guia de configuração inicial de servidor para Ubuntu 18.04.

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

      • Um nome de domínio totalmente registrado para hospedar o code-server, apontado para o seu servidor. Neste tutorial usaremos 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 registrador de domínios de sua escolha.

      • Ambos os registros de DNS a seguir serão configurados para o seu servidor. Você pode seguir esta introdução para DNS DigitalOcean para mais detalhes sobre como adicioná-los.

        • Um registro do tipo A, com o your-domain apontando para o endereço IP público do seu servidor.
        • Um registro do tipo A, com o www.your-domain apontando para o endereço IP público do seu servidor.

      Passo 1 — Instalando o code-server

      Crie o diretório para armazenar todos os dados para o code-server:

      Navegue até ele:

      Visite a página de versões do Github do code-server e escolha a última compilação do Linux. Baixe a versão, usando o seguinte:

      • wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

      Descompacte o arquivo:

      • tar -xzvf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

      Navegue até o diretório que contém o executável do code-server:

      • cd code-server2.1692-vsc1.39.2-linux-x86_64

      Para acessar o executável do code-server pelo seu sistema, copie-o com:

      • sudo cp code-server /usr/local/bin

      Crie uma pasta para o code-server armazenar os dados do usuário:

      • sudo mkdir /var/lib/code-server

      Crie um serviço systemd, code-server.service, no diretório /lib/systemd/system:

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

      Adicione as linhas seguintes:

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

      [Unit]
      Description=code-server
      After=nginx.service
      
      [Service]
      Type=simple
      Environment=PASSWORD=your_password
      ExecStart=/usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
      Restart=always
      
      [Install]
      WantedBy=multi-user.target
      
      • --host 127.0.0.1 vincula-o ao localhost.
      • --user-data-dir /var/lib/code-server define seu diretório de dados do usuário.
      • --auth password especifica que ele deve autenticar visitantes com uma senha.

      Lembre-se de substituir o your_password pela sua senha desejada.

      Salve e feche o arquivo.

      Inicie o serviço code-server:

      • sudo systemctl start code-server

      Verifique se ele foi iniciado corretamente:

      • 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 Mon 2019-12-09 20:07:28 UTC; 4s ago Main PID: 5216 (code-server) Tasks: 23 (limit: 2362) CGroup: /system.slice/code-server.service ├─5216 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password └─5240 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password ...

      Habilite o serviço code-server para iniciar automaticamente após a reinicialização de um servidor:

      • sudo systemctl enable code-server

      Passo 2 — Expondo o code-server

      Agora, você irá configurar o Nginx como um proxy reverso para o code-server.

      Crie o code-server.conf para armazenar a configuração para expor o code-server no seu domínio:

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

      Adicione as linhas a seguir para instalar o seu bloco de servidor com as diretivas necessárias:

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

      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 seu domínio desejado, na sequência, salve e feche o arquivo.

      Para tornar a configuração deste site ativa, crie um symlink dele:

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

      Teste a validade da configuração:

      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, reinicie o Nginx:

      • sudo systemctl restart nginx

      Passo 3 — Protegendo seu domínio

      Agora, você irá proteger seu domínio usando um certificado TLS do Let’s Encrypt.

      Adicione o repositório de pacotes Certbot ao seu servidor:

      • sudo add-apt-repository ppa:certbot/certbot

      Instale o Certbot e seu plug-in do Nginx:

      • sudo apt install python-certbot-nginx

      Configure o ufw para aceitar o tráfego criptografado:

      O resultado será:

      Output

      Rule added Rule added (v6)

      Recarregue-o para que a configuração entre em vigor:

      A saída mostrará:

      Output

      Firewall reloaded

      Navegue até seu domínio do code-server

      code-server login prompt

      Digite sua senha do code-server. Você verá a interface exposta no seu domínio.

      code-server GUI

      Para protegê-lo, instale um certificado TLS do Let’s Encrypt usando o Certbot.

      Peça um certificado para seu domínio com:

      • sudo certbot --nginx -d code-server.your_domain

      Forneça um endereço de e-mail para avisos urgentes, aceite os Termos de serviço do EFF e decida se quer redirecionar todo o tráfego HTTP para o HTTPS.

      A saída será semelhante a esta:

      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" ...

      O Certbot gerou os certificados TLS com êxito e os aplicou à configuração do Nginx para seu domínio.

      Conclusão

      Agora, você tem o code-server, um IDE em nuvem versátil, instalado no seu servidor Ubuntu 18.04, exposto no seu domínio e protegido com os certificados do Let’s Encrypt. Para obter mais informações, consulte a documentação do Visual Studio Code para obter recursos adicionais e instruções detalhadas sobre outros componentes do code-server.



      Source link

      Como configurar a plataforma IDE Eclipse Theia em nuvem no CentOS 7


      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 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.

      A Eclipse Theia é uma função do IDE em nuvem funcionando em um servidor remoto e acessível a partir de uma navegador Web. Visualmente, ele foi criado para observar e se comportar de maneira similar ao Microsoft Visual Studio Code, o que significa que ele é compatível com várias linguagens de programação, tem um layout flexível e um terminal integrado. O que separa o Eclipse Theia de outros softwares do IDE em nuvem é a sua extensibilidade; ele pode ser modificado usando 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 CentOS 7, 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 automático para o Docker que simplifica o processo de configuração do Nginx para servir como um proxy reverso para um contêiner. Você também irá proteger ele usando um certificado TLS do Let’s Encrypt gratuito, que irá fornecer usando seu add-on especializado. No final, você terá o Eclipse Theia executando em seu servidor CentOS 7, disponível através do protocolo HTTPS e que exige que o usuário faça login.

      Pré-requisitos

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

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

      Navegue até ele:

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

      • vi nginx-proxy-compose.yaml

      Adicione as linhas seguintes:

      ~/eclipse-theia/nginx-proxy-compose.yaml

      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ê está definindo dois serviços que o Docker Compose irá executar, o nginx-proxy e seu companheiro Let’s Encrypt. Para o proxy, especifique o jwilder/nginx-proxy como a imagem, mapeie as portas HTTP e HTTPS, e defina os volumes que serão acessíveis a ele durante o tempo de execução.

      Os volumes são diretórios no seu servidor que o serviço definido terá acesso total a eles, que serão usados mais tarde para configurar a autenticação do usuário. Para conseguir isso, certifique-se de usar o primeiro volume da lista, que mapeia o diretório local /etc/nginx/htpasswd para o mesmo no contêiner. Naquela pasta, o nginx-proxy espera encontrar um arquivo chamado exatamente como o domínio alvo, contendo credenciais de login para a autenticação de usuário no formato htpasswd (username:hashed_password).

      Para o add-on, nomeie a imagem do Docker e permita o acesso ao soquete do Docker, definindo um volume. Em seguida, especifique 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 reinicialização do sistema.

      Salve e feche o arquivo.

      Implante a configuração executando:

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

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

      A saída final ficará parecida com esta:

      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á de entrada. 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 nomeado após o 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 que foi especificado na configuração nginx-proxy.

      Para criar combinações de login, será necessário primeiro instalar o htpasswd, executando o seguinte comando:

      • sudo yum install httpd-tools

      O pacote httpd-tools 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 seu domínio:

      • sudo touch /etc/nginx/htpasswd/theia.your-domain

      Lembre-se de substituir o theia.your-domain pelo seu domínio do Eclipse Theia.

      Para adicionar um nome de usuário e uma combinação de 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. Será solicitado uma senha duas vezes. Após fornecê-los, o htpasswd adicionará o nome de usuário e a senha hash ao final do arquivo. Você pode repetir este comando para a quantidade de logins que quiser adicionar.

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

      • vi eclipse-theia-compose.yaml

      Adicione as linhas seguintes:

      ~/eclipse-theia/eclipse-theia-compose.yaml

      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
      

      Nesta configuração, defina um serviço único chamado de eclipse-theia com o restart ajustado para always e a theiaide/theia:next como a imagem do contêiner. Defina também o init para true para assim instruir o Docker para 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 é passada para o nginx-proxy e diz a ele em qual domínio o contêiner deve ser exposto, enquanto a última é usada pelo add-on do Let’s Encrypt e especifica para qual domínio se deve solicitar certificados 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; em seguida, salve e feche o arquivo.

      Agora implante o Eclipse Theia executando:

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

      A saída final se parecerá com a 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 está usando para o Eclipse Theia. Seu navegador mostrará um prompt pedindo que faça login. Após fornecer as credenciais corretas, você acessará o Eclipse Theia e verá imediatamente seu editor GUI. Na sua barra de endereço, você verá um cadeado que indica que a conexão está segura. Se não o ver imediatamente, espere alguns minutos para que os certificados TLS sejam provisionados, então recarregue a página.

      Eclipse Theia GUI

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

      Passo 3 — Usando a interface Eclipse Theia

      Nesta seção, você irá explorar alguns dos recursos da interface 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.

      Eclipse Theia GUI - Sidepanel

      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, verá um arquivo vazio aberto em uma nova aba. Assim que for salvo, veja 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.

      Eclipse Theia GUI - New Folder

      As duas opções seguintes fornecem acesso às funções buscar e substituir. Em seguida, o próximo 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 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.

      Visualização do Depurador com o launch.json aberto

      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.

      Exibição em Grade do Editor

      Você pode ter acesso a um terminal digitando CTRL+SHIFT+`, ou clicando no 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.

      Terminal open

      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 CentOS 7, 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. Também é possível tentar compilar sua própria versão do Eclipse Theia se precisar de recursos adicionais. Para obter mais informações sobre como fazer isso, visite os documentos do Theia.



      Source link