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:

mkdir ~/code-server

Diríjase a este:

cd ~/code-server

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:

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

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:

sudo nginx -t

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:

sudo ufw allow https

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:

sudo ufw reload

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.

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.

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

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.

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.

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

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.

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.

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.