Cómo instalar Visual Studio Code - Servidor IDE en Ubuntu 20.04 LTS

Code-server es un Visual Studio (VS) Code que se puede ejecutar de forma remota en el servidor y es accesible a través de un navegador web. Te permite crear y tener un entorno de desarrollo consistente que se puede acceder en cualquier momento y en cualquier lugar.

En este tutorial, te mostraremos cómo instalar el Code-server con Nginx como proxy inverso y SSL Letsencrypt en el último Ubuntu 20.04 Server.

Requisitos previos

Para esta guía, instalaremos el Visual Code Server en el servidor Ubuntu 20.04 con 4GB de RAM, 25GB de espacio en disco libre y 2 CPUs.

Lo que haremos:

Descargar e instalar los paquetes del Visual Code Server
Configurar la autenticación para el Visual Code Server
Generar SSL Letsencrypt
Instalar y configurar Nginx como proxy inverso
Pruebas

Paso 1 - Descargar e instalar los paquetes del Visual Code Server

Primero, descargaremos la última versión del Visual Code Server para Ubuntu FocalFossa e instalaremos en nuestro sistema.

Por defecto, los paquetes del servidor de código están disponibles para múltiples sistemas operativos. Puedes consultar la página de lanzamientos del servidor de código en GitHub utilizando el siguiente enlace.

https://github.com/cdr/code-server/releases

Ahora descarga los paquetes del Visual Code Server para Ubuntu usando el comando wget a continuación.

wget -q https://github.com/cdr/code-server/releases/download/3.4.1/code-server_3.4.1_amd64.deb

Después de eso, instala el paquete del servidor de código visual usando el comando dpkg a continuación.

sudo dpkg -i code-server_3.4.1_amd64.deb

Una vez que la instalación esté completa, inicia el servicio del servidor de código y agrégalo al inicio del sistema.

systemctl --user start code-server  
systemctl --user enable code-server

Descargar e instalar Visual Code Studio Server

El Visual Code Server está en funcionamiento, verifícalo usando el siguiente comando.

ss -plnt  
systemctl --user status code-server

A continuación se muestra el resultado que obtendrás.

Verificando el estado del servicio y el puerto para Visual Code Studio Server

Como se puede ver, el Visual Code Server se ejecuta por defecto en la dirección IP local ‘127.0.0.1’ con el puerto TCP ‘8080’.

Paso 2 - Configurar la autenticación para el Visual Code Server

Por defecto, el servidor de código visual se está ejecutando con la autenticación habilitada.

La autenticación por contraseña del servidor de código visual se genera por defecto en el archivo ‘~/.config/code-server/config.yaml’.

Verifica la configuración del servidor de código visual usando el siguiente comando.

cat ~/.config/code-server/config.yaml

Obtendrás algo como esta configuración.

bind-addr: 127.0.0.1:8080  
auth: password  
password: 58403006a03529a2d26c08af  
cert: false

Detalles de la configuración:

La opción ‘bind-addr’ se utiliza para definir en qué dirección IP y puerto se ejecutará el Code Server.
La opción ‘auth’ es el método de autenticación para el Visual Code Server, y por defecto, se utiliza el método de autenticación ‘password’.
La opción ‘password’ se utiliza para definir tu contraseña para el acceso al Visual Code Server, y asegúrate de usar una contraseña fuerte.

Para cambiar la dirección de enlace, el puerto y la contraseña para el Visual Code Server, cambia la configuración predeterminada ‘~/.config/code-server/config.yaml’ según sea necesario.

Configuración predeterminada del Visual Code Server

Paso 3 - Generar SSL Letsencrypt

En este paso, generaremos el SSL letsencrypt utilizando la herramienta certbot para asegurar el code-server.

Instala la herramienta certbot usando el comando apt a continuación.

sudo apt install certbot -y

Una vez que la instalación esté completa, genera el SSL letsencrypt usando el comando certbot a continuación.

certbot certonly --standalone --agree-tos -m [email protected] -d vscode.hakase-labs.io

Una vez que esté completo, tus certificados estarán ubicados en el directorio ‘/etc/letsencrypt/live/vscode.hakase-labs.io/‘.

ls -lah /etc/letsencrypt/live/vscode.hakase-labs.io/

Ahora has generado el SSL Letsencrypt para asegurar la instalación del code-server utilizando la herramienta certbot.

Paso 4 - Configurar Nginx como proxy inverso

En este paso, instalaremos el servidor web Nginx y lo configuraremos como un proxy inverso para el code-server con SSL habilitado encima de él.

Instala el paquete Nginx usando el comando apt a continuación.

sudo apt install nginx -y

Una vez que la instalación esté completa, ve al directorio ‘/etc/nginx/sites-available’ y crea una nueva configuración de host virtual ‘code-server’.

cd /etc/nginx/sites-available/  
vim code-server

Ahora cambia el nombre de dominio y la ruta de SSL por los tuyos y pega la configuración en él.

server {  
 listen 80;  
 server_name vscode.hakase-labs.io;  
 # forzar https  
 return 301 https://$server_name:443$request_uri;  
}  
  
server {  
 listen 443 ssl http2;  
 server_name vscode.hakase-labs.io;  
  
 ssl_certificate /etc/letsencrypt/live/vscode.hakase-labs.io/fullchain.pem;  
 ssl_certificate_key /etc/letsencrypt/live/vscode.hakase-labs.io/privkey.pem;  
  
 location / {  
 proxy_pass http://127.0.0.1:8080/;  
 proxy_set_header Host $host;  
 proxy_set_header Upgrade $http_upgrade;  
 proxy_set_header Connection upgrade;  
 proxy_set_header Accept-Encoding gzip;  
 }  
}

Guarda y cierra.

Ahora activa el host virtual ‘code-server’, prueba la configuración de nginx y asegúrate de que no haya errores.

ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/  
nginx -t

Configurar Nginx como proxy inverso para Visual Code Server

Después de eso, reinicia el servicio de nginx y agrégalo al inicio del sistema.

systemctl restart nginx  
systemctl enable nginx

Ahora el servicio de Nginx está en funcionamiento como un proxy inverso para el code-server. Verifícalo usando el comando a continuación.

netstat -plntu  
systemctl status nginx

Y obtendrás el resultado como a continuación.

Configurar Nginx como proxy inverso para Visual Code Server

El servicio de Nginx está en funcionamiento en el servidor Ubuntu 20.04 con los puertos HTTP y HTTPS habilitados encima de él.

Paso 5 - Pruebas

Abre tu navegador web y escribe la URL de tu instalación del code-server.

https://vscode.hakase-labs.io/

Inicia sesión con tu contraseña que configuraste en el archivo de servicio del code-server.

Página de inicio de sesión del Visual Code Server

Una vez que la contraseña sea correcta, obtendrás el editor VS Code en tu navegador web como a continuación.

Visual Code Server en Ubuntu 20.04

Como resultado, has instalado el code-server en el servidor Ubuntu 20.04 con Nginx como proxy inverso y asegurando la instalación del code-server con SSL Letsencrypt.

Referencia

https://github.com/cdr/code-server