One place for hosting & domains

      Cómo configurar la plataforma de IDE en la nube de Eclipse Theia en Ubuntu 18.04 [Guía de inicio rápido]


      Introducción

      Eclipse Theia es un IDE en la nube extensible que se ejecuta en un servidor remoto y al que es posible acceder desde un navegador web. Visualmente, está diseñado para tener un aspecto y comportamiento similares a los de Microsoft Visual Studio Code. Lo que diferencia a Eclipse Theia de otras plataformas de software de IDE en la nube es su extensibilidad; se puede modificar usando extensiones personalizadas, que le permiten crear un IDE en la nube adaptado a sus necesidades.

      En este tutorial, implementará Eclipse Theia en su servidor de Ubuntu 18.04 usando Docker Compose. Lo expondrá en su dominio usando nginx-proxy y lo protegerá con un certificado TLS de Let´s Encrypt, que proporcionará con un complemento. Para ver una versión más detallada de este tutorial, consulte Cómo configurar la plataforma de IDE en la nube de Eclipse Theia en Ubuntu 18.04.

      Requisitos previos

      Paso 1: Implementar nginx-proxy con Let´s Encrypt

      Cree el directorio en el que se almacenarán todos los datos para Eclipse Theia:

      Diríjase a este:

      Cree nginx-proxy-compose.yaml para almacenar la configuración de Docker Compose para nginx-proxy:

      • nano nginx-proxy-compose.yaml

      Añada las siguientes líneas:

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

      Aquí, definirá dos servicios que Docker Compose ejecutará: nginx-proxy y su complemento de Let´s Encrypt. Para el proxy, especificará jwilder/nginx-proxy como la imagen, asignará puertos HTTP y HTTPS, y definirá los volúmenes a los que se podrá acceder durante el tiempo de ejecución.

      Guarde y cierre el archivo.

      Implemente la configuración:

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

      El resultado final tendrá el siguiente aspecto:

      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

      Paso 2: Implementar Eclipse Theia con Docker

      nginx-proxy prevé que las combinaciones de inicio de sesión se encuentren en un archivo con el nombre del dominio expuesto, en el formato htpasswd y almacenado en el directorio /etc/nginx/htpasswd del contenedor.

      Instale htpasswd:

      • sudo apt install apache2-utils

      El paquete apache2-utils contiene la utilidad htpasswd.

      Cree el directorio /etc/nginx/htpasswd:

      • sudo mkdir -p /etc/nginx/htpasswd

      Cree un archivo para almacenar los inicios de sesión de su dominio:

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

      Ejecute el siguiente comando con una combinación de nombre de usuario y contraseña:

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

      htpasswd agregará el par de nombre de usuario y contraseña con hash al final del archivo.

      Cree la configuración para la implementación de Eclipse Theia:

      • nano eclipse-theia-compose.yaml

      Añada las siguientes líneas:

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

      Definirá un servicio único llamado eclipse-theia con restart fijado en always y theiaide/theia:next como la imagen del contenedor. También fijará init en true. Luego, se especifican dos variables de entorno en la sección environment:VIRTUAL_HOSTy LETSENCRYPT_HOST.

      Guarde y cierre el archivo.

      Ahora implemente Eclipse Theia ejecutando lo siguiente:

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

      El resultado final tendrá este aspecto:

      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

      Diríjase al dominio que usa para Eclipse Theia. Su navegador le mostrará un mensaje que le solicitará iniciar sesión. Entrará en Eclipse Theia y verá la GUI de su editor. También verá un candado que indica que la conexión es segura.

      GUI de Eclipse Theia

      Conclusión

      Ahora, tendrá instalado Eclipse Theia, un IDE en la nube versátil, en su servidor de Ubuntu 18.04 con Docker Compose y nginx-proxy. Lo protegió con un certificado TLS gratuito de Let´s Encrypt y configuró la instancia para que exija las credenciales de inicio de sesión del usuario. Con él puede trabajar en su código fuente y sus documentos de forma individual o colaborar con su equipo. También puede intentar crear su propia versión de Eclipse Theia si necesita funciones adicionales. Para obtener más información sobre cómo hacerlo, consulte la documentación de Theia.



      Source link

      Cómo configurar la plataforma de IDE en la nube de code-server en CentOS 7


      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.

      A través de este tutorial, configurará la plataforma de IDE en la nube de code-server en su máquina con CentOS 7 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 CentOS 7, disponible en su dominio y protegido con contraseña.

      Requisitos previos

      • Un servidor con CentOS 7 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 hallar una guía sobre cómo hacer esto, consulte Cómo instalar Nginx en CentOS 7.

      • Los dos registros DNS que se indican a continuación se configuraron para su servidor. Puede utilizar esta introducción al DNS de DigitalOcean para obtener más información sobre cómo agregarlos.

        • Un registro A con your-domain apuntando a la dirección IP pública de su servidor.
        • Un registro A con www.your-domain​​​1​​​ apuntando a la dirección IP pública de su servidor.
      • 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 que elija.

      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 2.169. Descárguela con curl ejecutando el siguiente comando:

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

      Luego, desempaquete el archivo ejecutando lo siguiente:

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

      Como resultado, verá una carpeta que tendrá exactamente el nombre del archivo original que descargó, que contiene el ejecutable code-server. Diríjase a este:

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

      Copie el ejecutable code-server a /usr/local/bin para poder acceder a este en todo el sistema con el siguiente comando:

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

      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 /usr/lib/systemd/system donde systemd almacena sus servicios. Créelo usando el editor vi:

      • sudo vi /usr/lib/systemd/system/code-server.service

      Añada las siguientes líneas:

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

      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 proporciona el comando que se ejecutará.

      También especifica que el ejecutable del code-server global debe iniciarse con algunos argumentos específicos para code-server. --host 127.0.0.1 lo vincula a localhost, 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 con la contraseña que elija. Escriba :wq y luego ENTER para guardar y cerrar 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] le ordena a systemd que inicie 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 (/usr/lib/systemd/system/code-server.service; disabled; vendor preset: disabled) Active: active (running) since Thu 2019-12-19 19:24:42 UTC; 5s ago Main PID: 1668 (code-server) CGroup: /system.slice/code-server.service ├─1668 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password └─1679 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password Dec 19 19:24:42 code-server-centos systemd[1]: Started code-server. Dec 19 19:24:44 code-server-centos code-server[1668]: info Server listening on http://127.0.0.1:8080 Dec 19 19:24:44 code-server-centos code-server[1668]: info - Using custom password for authentication Dec 19 19:24:44 code-server-centos code-server[1668]: 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 de 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/conf.d y se cargarán automáticamente cuando Nginx inicie.

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

      • sudo vi /etc/nginx/conf.d/code-server.conf

      Añada las siguientes líneas:

      /etc/nginx/conf.d/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 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, necesitará reiniciar Nginx:

      • sudo systemctl restart nginx

      CentOS 7 viene con SELinux activado, con un reglamento estricto, que por defecto no permite que Nginx se conecte a los sockets de TCP locales. Nginx necesita hacerlo para servir como proxy inverso para code-server. Ejecute el siguiente comando para relajar la regla de forma permanente:

      • sudo setsebool httpd_can_network_connect 1 -P

      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, 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 yum install certbot python2-certbot-nginx

      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, hará que Certbot renueve automáticamente los certificados antes de su caducidad. Para ejecutar la verificación de renovación diaria, usará cron, un servicio de sistema estándar para ejecutar trabajos periódicos. cron se puede manejar abriendo y editando un archivo llamado crontab:

      Este comando abrirá el crontab predeterminado, que actualmente es un archivo de texto vacío. Añada la siguiente línea, guarde el archivo y luego ciérrelo:

      crontab

      . . .
      15 3 * * * /usr/bin/certbot renew --quiet
      

      15 3 * * * ejecutará el siguiente comando a las 3:15 a. m. todos los días; puede adaptarlo a cualquier horario.

      El comando renew para Certbot comprobará todos los certificados instalados en el sistema y actualizará cualquiera de ellos que caduquen en menos de treinta días. --quiet indica a Certbot que no dé información ni espere entradas por parte del usuario.

      cron ahora ejecutará este comando a diario diariamente. Todos los certificados instalados se renovarán y se volverán a cargar automáticamente cuando falten treinta o menos días para que caduquen.

      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.

      Git pane con context-menu 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 cuenta con code-server, un IDE en la nube versátil, instalado en su servidor de CentOS 7, expuesto en su dominio y protegido usando certificados de Let´s Encrypt. Ahora, puede trabajar en proyectos individualmente, así como en una configuración de colaboración de equipo. Ejecutar un IDE en la nube libera los recursos en su máquina local y le permite escalar los recursos 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

      Cómo configurar la plataforma de IDE en la nube de code-server en Debian 10


      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.

      A través de este tutorial, configurará la plataforma de IDE en la nube de code-server en su máquina con Debian 10 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 Debian 10, disponible en su dominio y protegido con contraseña.

      Requisitos previos

      • Un servidor con Debian 10 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 acceder a una guía con indicaciones sobre cómo hacerlo, complete los pasos 1 a 4 de Cómo instalar Nginx en Debian 10.

      • Los dos registros DNS que se indican a continuación se configuraron para su servidor. Puede utilizar esta introducción al DNS de DigitalOcean para obtener más información sobre cómo agregarlos.

        • Un registro A con your-domain apuntando a la dirección IP pública de su servidor.
        • Un registro A con www.your-domain​​​1​​​ apuntando a la dirección IP pública de su servidor.
      • 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 que elija.

      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 2.169. Descárguela con wget ejecutando el siguiente 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

      Luego, descomprima el archivo ejecutando lo siguiente:

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

      Como resultado, verá una carpeta que tendrá exactamente el nombre del archivo original que descargó, que contiene el ejecutable code-server. Diríjase a este:

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

      Copie el ejecutable code-server a /usr/local/bin para poder acceder a este en todo el sistema con el siguiente comando:

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

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

      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. --host 127.0.0.1 lo vincula a localhost, 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 code-server en todos los eventos de fallo (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 Thu 2019-12-19 16:56:05 UTC; 4s ago Main PID: 1790 (code-server) Tasks: 23 (limit: 1168) Memory: 74.6M CGroup: /system.slice/code-server.service ├─1790 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password └─1801 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password Dec 19 16:56:05 code-server-debian10 systemd[1]: Started code-server. Dec 19 16:56:06 code-server-debian10 code-server[1790]: info Server listening on http://127.0.0.1:8080 Dec 19 16:56:06 code-server-debian10 code-server[1790]: info - Using custom password for authentication Dec 19 16:56:06 code-server-debian10 code-server[1790]: 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 python-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 ser compatible con 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 Debian 10, expuesto en su dominio y protegido mediante 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