One place for hosting & domains

      plataforma

      Cómo configurar la plataforma de IDE en la nube de code-server en Ubuntu 20.04


      El autor seleccionó la Free and Open Source Fund para recibir una donación como parte del programa Write for DOnations.

      Introducción

      Con el traslado de las herramientas de desarrollo a la nube, la creación y la adopción de plataformas de IDE (entorno de desarrollo integrado) en la nube se encuentra en expansión. Los IDE en la nube permiten la colaboración en tiempo real entre los equipos de desarrolladores para trabajar en un entorno de desarrollo unificado, lo cual minimiza las incompatibilidades y mejora la productividad. Los IDE en la nube, a los que se puede acceder a través de los navegadores web, se encuentran disponibles en cualquier tipo de dispositivo moderno.

      code-server es Microsoft Visual Studio Code en ejecución en un servidor remoto, y usted puede acceder a él de forma directa desde su navegador. Visual Studio Code es un editor de código moderno con soporte de Git integrado, un depurador de código, autocompletado inteligente y características personalizables y extensibles. Esto significa que puede usar varios dispositivos con diferentes sistemas operativos y tener siempre a mano un entorno de desarrollo uniforme.

      En este tutorial, configurará la plataforma de IDE en la nube de code-server en su máquina con Ubuntu 20.04 y la mostrará en su dominio, con protección de certificados TLS de Let´s Encrypt. Al final, contará con código de Microsoft Visual Studio en su servidor de Ubuntu 20.04 disponible en su dominio y protegido con contraseña.

      Requisitos previos

      • Un servidor con Ubuntu 20.04 con al menos 2 GB de RAM, acceso root y una cuenta sudo no root. Puede configurarlo siguiendo esta guía de configuración inicial para servidores.

      • Nginx instalado en su servidor. Para obtener una guía sobre cómo hacer esto, complete los pasos 1 a 4 de Cómo instalar Nginx en Ubuntu 20.04.

      • Un nombre de dominio registrado por completo para alojar code-server, apuntando a su servidor. En este tutorial, se utilizará code-server.your-domain​​​ en todo momento. Puede adquirir un nombre de dominio en Namecheap, obtener uno gratuito en Freenom o utilizar un registrador de dominios de su elección. Para DigitalOcean, puede seguir esta introducción al DNS de DigitalOcean para obtener más información sobre cómo añadirlos.

      Paso 1: Instalar code-server

      En esta sección, configurará code-server en su servidor. Esto implica descargar la versión más reciente y crear un servicio systemd que mantendrá code-server siempre en ejecución en segundo plano. También especificará una política para reiniciar el servicio, de modo que code-server se mantenga disponible después de posibles errores o reinicios.

      Almacenará todos los datos relacionados con code-server en una carpeta llamada ~/code-server. Para crearla, ejecute el siguiente comando:

      Diríjase a este:

      Deberá dirigirse a la página de versiones de Github de code-server y elegir la última compilación de Linux (el archivo contendrá “linux” en su nombre). En el momento en que se redactó el presente artículo, la última versión fue la 3.3.1. Descárguela con wget ejecutando el siguiente comando:

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

      Luego, desempaquete el archivo ejecutando lo siguiente:

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

      Como resultado, verá una carpeta que tendrá exactamente el nombre del archivo original que descargó, que contiene código de origen de code-server. Cópielo a /usr/lib/code-server para poder acceder a este en todo el sistema con el siguiente comando:

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

      A continuación, cree un enlace simbólico en /usr/bin/code-server, apuntando al ejecutable de code-server:

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

      A continuación, cree una carpeta para code-server en la que almacenará datos del usuario:

      • sudo mkdir /var/lib/code-server

      Ahora que descargó code-server e hizo que estuviera disponible en todo el sistema, creará un servicio systemd para que code-server esté en ejecución en todo momento.

      Almacenará la configuración de servicio en un archivo llamado code-server.service, en el directorio /lib/systemd/system donde systemd almacena sus servicios. Créelo usando su editor de texto:

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

      Añada las siguientes líneas:

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

      [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
      

      Aquí primero especifica la descripción del servicio. Luego, indica que el servicio nginx debe iniciarse antes de este. Después de la sección [Unit], se define el tipo del servicio (simple significa que el proceso debe ser simplemente run) y se proporciona el comando que se ejecutará.

      También se especifica que el ejecutable de code-server global debe iniciarse con algunos argumentos específicos para code-server. --bind-addr 127.0.0.1:8080 lo vincula a localhost en el puerto por lo que solo es accesible directamente desde el interior de su servidor. --user-data-dir /var/lib/code-server establece su directorio de datos de usuario y --auth password especifica que debe autenticar los visitantes con una contraseña, especificada en la variable de entorno PASSWORD declarada en la línea anterior.

      Recuerde sustituir your_password por la contraseña que desee, y luego guarde y cierre el archivo.

      La siguiente línea indica a systemd que reinicie el code-server en todos los eventos de fallas (por ejemplo, cuando se bloquea o se ​​finaliza el proceso). La sección [Install] ordena a systemd iniciar este servicio cuando se pueda iniciar sesión en su servidor.

      Inicie el servicio code-server ejecutando el siguiente comando:

      • sudo systemctl start code-server

      Compruebe que se haya iniciado correctamente observando su estado:

      • sudo systemctl status code-server

      Verá un resultado similar a lo siguiente:

      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 hacer que code-server se inicie de forma automática después de un reinicio del servidor, habilite su servicio ejecutando el siguiente comando:

      • sudo systemctl enable code-server

      Durante este paso, descargó code-server e hizo que estuviera disponible a nivel global. Luego, creó un servicio systemd para este y lo habilitó, por lo que code-server se iniciará en cada arranque del servidor. A continuación, lo expondrá en su dominio configurando Nginx para que sirva como proxy inverso entre el visitante y code-server.

      Paso 2: Exponer code-server en su dominio

      En esta sección, configurará Nginx como un proxy inverso para code-server.

      Como aprendió en el paso del requisito previo de Nginx, los archivos de configuración de su sitio se almacenan en /etc/nginx/sites-available y deben tener un enlace simbólico con /etc/nginx/sites-enabled para estar activos.

      Almacenará la configuración para exponer code-server en su dominio en un archivo llamado code-server.conf, en /etc/nginx/sites-available. Comience por crearlo usando su editor:

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

      Añada las siguientes líneas:

      /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;
          }
      }
      

      Sustituya code-server.your_domain por el dominio que desee; luego guarde y cierre el archivo.

      En este archivo, se define que Nginx debe escuchar el puerto HTTP 80. Luego, especifica un server_name que indica a Nginx el domino para el que acepta solicitudes y aplica esta configuración en particular. En el siguiente bloque, para la ubicación root (/), especifica que las solicitudes deben pasar hacia atrás y adelante de code-server en el localhost:8080. Las siguientes tres líneas (se inician con proxy_set_header) ordenan a Nginx transmitir algunos encabezados de solicitud HTTP que se necesitan para que funcione correctamente webSockets, que code-server utiliza ampliamente.

      Para que la configuración de este sitio esté activa, deberá crear un enlace simbólico de este en la carpeta /etc/nginx/sites-enabled ejecutando lo siguiente:

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

      Para probar la validez de la configuración, ejecute el siguiente comando:

      Verá el siguiente 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 la configuración tenga efecto, deberá reiniciar Nginx:

      • sudo systemctl restart nginx

      Ahora, tendrá acceso a la instalación de su code-server en su dominio. En el siguiente paso, lo protegerá aplicando un certificado TLS gratuito de Let´s Encrypt.

      Paso 3: Proteger su dominio

      En esta sección, protegerá su dominio usando un certificado TLS de Let´s Encrypt que proporcionará usando Certbot.

      Para instalar la última versión de Certbot y su complemento de Nginx, ejecute el siguiente comando:

      • sudo apt install certbot python3-certbot-nginx

      Como parte de los requisitos previos, habilitó ufw (Uncomplicated Firewall) y lo configuró para que permitiera el tráfico de HTTP no cifrado. Para poder acceder al sitio seguro, deberá configurarlo de manera tal que acepte el tráfico cifrado ejecutando el siguiente comando:

      El resultado será lo siguiente:

      Output

      Rule added Rule added (v6)

      Casi al igual que en el caso de Nginx, tendrá que volver a cargarlo para que la configuración tenga efecto:

      El resultado mostrará lo siguiente:

      Output

      Firewall reloaded

      Luego, en su navegador, diríjase al dominio que utilizó para code-server. Verá la solicitud de inicio de sesión de code-server.

      Solicitud de inicio de sesión para code-server

      code-server le solicita su contraseña. Introduzca la que estableció en el paso anterior y presione Enter IDE. Ingresará a code-server y de inmediato verá la GUI de su editor.

      GUI de code-server

      Ahora que verificó que code-server se exponga correctamente en su dominio, instalará certificados TLS de Let´s Encrypt para protegerlo, usando Certbot.

      Para solicitar certificados para su dominio, ejecute el siguiente comando:

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

      En este comando, ejecute certbot para solicitar certificados para su dominio; pasará el nombre de dominio con el parámetro -d. El indicador --nginx le solicita cambiar automáticamente la configuración del sitio de Nginx para que admita HTTPS. Recuerde sustituir code-server.your-domain por su nombre de dominio.

      Si es la primera vez que ejecuta Certbot, se le solicitará proporcionar una dirección de correo electrónico para notificaciones urgentes y aceptar los Términos de servicio del FEP. Luego, Certbot solicitará certificados para su dominio desde Let´s Encrypt. Después, le preguntará si desea redireccionar todo el tráfico HTTP a 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):

      Se recomienda seleccionar la segunda opción para maximizar la seguridad. Después de ingresar su selección, presione ENTER.

      El resultado tendrá un aspecto similar 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

      Esto significa que Certbot generó certificados TLS y los aplicó a la configuración de Nginx para su dominio con éxito. Ahora, podrá volver a cargar su dominio de code-server en su navegador y observar un candado a la izquierda de la dirección del sitio, lo cual significa que su conexión es segura.

      Ahora que tiene acceso a code-server en su dominio a través de un proxy inverso de Nginx seguro, estará listo para revisar la interfaz de usuario de code-server.

      Paso 4: Usar la interfaz code-server

      En esta sección, usará algunas de las características de la interfaz de code-server. Debido a que code-server es Visual Studio Code en ejecución en la nube, tiene la misma interfaz que la edición de escritorio independiente.

      En el lado izquierdo del IDE, existe una fila vertical de seis botones que abren las características más utilizadas en un panel lateral conocido como la “Barra de actividades”.

      GUI de code-server: Panel lateral

      Esta barra es personalizable, para que pueda cambiar el orden de estas vistas o eliminarlas de ella. Por defecto, el primer botón abre el menú general en una lista desplegable, mientras que la segunda vista abre el panel Explorer que proporciona navegación similar a la de un árbol en la estructura del proyecto. Aquí, puede administrar sus carpetas y archivos. Esto incluye crear, eliminar, mover y modificar nombres según sea necesario. En la siguiente vista se proporciona acceso a una funcionalidad de búsqueda y sustitución.

      A continuación, en el orden predeterminado, se encuentra la vista de los sistemas de control de fuentes, como Git. El código de Visual Studio también es compatible con otros proveedores de control de fuentes, y puede encontrar más instrucciones de flujos de trabajo de control de fuentes con el editor en esta documentación.

      Subpanel de Git con menú contextual abierto

      La opción de depuración de la barra de actividades ofrece todas las acciones comunes para realizar depuraciones en el panel. Visual Studio Code ofrece compatibilidad integrada con el depurador en tiempo de ejecución Node.js y cualquier lenguaje que se trasmita a Javascript. En el caso de otros lenguajes, puede instalar extensiones para el depurador requerido. Puede guardar las configuraciones de depuración en el archivo launch.json.

      Vista del depurador con launch.json abierto

      En la vista final de la barra de actividades se ofrece un menú para acceder a las extensiones disponibles en Marketplace.

      GUI de code-server: Pestañas

      La parte central de la GUI es su editor, que usted puede separar por pestañas para editar su código. Puede cambiar la vista de edición a un sistema de cuadrícula o a archivos en paralelo.

      Vista de sistema de cuadrícula

      Una vez que se cree un nuevo archivo a través del menú File, se abrirá un archivo vacío en una nueva pestaña y una vez que este se haya guardado su nombre será visible en el panel lateral Explorer. Se pueden crear carpetas haciendo clic con el botón secundario en la barra lateral de Explorer y con el primario en New Folder. Puede expandir una carpeta haciendo clic en su nombre, y también arrastrando archivos y carpetas y soltándolos en partes superiores de la jerarquía para trasladarlas a una nueva ubicación.

      GUI de code-server: New Folder

      Puede obtener acceso a un terminal presionando CTRL+SHIFT+` o haciendo clic en Terminal en el menú superior desplegable y luego en New Terminal. La terminal se abrirá en un panel inferior y su directorio de trabajo fijará en el espacio de trabajo del proyecto, que contiene los archivos y las carpetas que se muestran en el panel lateral de Explorer.

      Exploró una descripción general de alto nivel de la interfaz de code-server y revisó algunas de las características más utilizadas.

      Conclusión

      Ahora dispone de code-server, un IDE en la nube versátil, instalado en su servidor Ubuntu 20.04, expuesto en su dominio y protegido usando certificados de Let´s Encrypt. Ahora, puede trabajar en proyectos individualmente y en un esquema de colaboración de equipo. Ejecutar un IDE en la nube libera recursos en su máquina local y le permite escalarlos cuando sea necesario. Para obtener más información, consulte la documentación de Visual Studio Code sobre características adicionales e instrucciones detalladas relacionadas con otros componentes de code-server.

      Si desea ejecutar code-server en su clúster de Kubernetes de DigitalOcean consulte nuestro tutorial Cómo configurar la plataforma de IDE en la nube de code-server en Kubernetes de DigitalOcean.



      Source link

      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:

      Navegue até ela:

      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:

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

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

      /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ê 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:

      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:

      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:

      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.

      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.

      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.

      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.

      GUI do code-server - 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, 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 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.

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

      A visualização final na Barra de Atividades fornece um menu para acessar as 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, 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.



      Source link

      Como configurar a plataforma IDE na nuvem do Eclipse Theia no Ubuntu 18.04 [Início rápido]


      Introdução

      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 projetado para parecer e se comportar de maneira similar ao Microsoft Visual Studio Code. 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ê implantará o Eclipse Theia para seu servidor Ubuntu 18.04, usando o Docker Compose. Você irá expô-lo em seu domínio usando o nginx-proxy e o protegerá com um certificado TLS do Let’s Encrypt, o qual você irá provisionar com um add-on. Para obter uma versão mais detalhada deste tutorial, consulte o artigo sobre Como configurar a plataforma de IDE em nuvem Eclipse Theia no Ubuntu 18.04.

      Pré-requisitos

      Crie o diretório para armazenar todos os dados do Eclipse Theia:

      Navegue até ele:

      Crie o nginx-proxy-compose.yaml para armazenar a configuração do Docker Compose para o nginx-proxy:

      • nano nginx-proxy-compose.yaml

      Adicione as linhas a seguir:

      ~/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ê 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.

      Salve e feche o arquivo.

      Implante a configuração:

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

      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

      Passo 2 — Implantando o Eclipse Theia em Docker

      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.

      Instale o htpasswd:

      • 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 para armazenar os logins do seu domínio:

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

      Execute o comando a seguir com um nome de usuário e uma combinação de senha:

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

      O htpasswd adicionará o nome de usuário e a senha hash ao final do arquivo.

      Crie a configuração para a implantação do Eclipse Theia:

      • nano eclipse-theia-compose.yaml

      Adicione as linhas a seguir:

      ~/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
      

      Você define um serviço único chamado eclipse-theia com o restart configurado para always e o theiaide/theia:next como a imagem do contêiner. Defina também o init para true. Em seguida, especifique duas variáveis de ambiente na seção de environment: VIRTUAL_HOST e LETSENCRYPT_HOST.

      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

      Navegue para o domínio que estiver usando para o Eclipse Theia. Seu navegador mostrará um prompt pedindo que você faça login. Você entrará no Eclipse Theia e verá a GUI do seu editor. Você verá também um cadeado indicando que a conexão é segura.

      Interface Gráfica do Usuário (GUI) do Eclipse Theia

      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-fonte e nos documentos com ele, de maneira independente ou em colaboração 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.



      Source link