Cómo instalar Visual Studio Code Cloud IDE en el servidor Ubuntu 24.04

El Visual Studio Code Cloud IDE es una versión en línea del popular editor Visual Studio Code (VS Code) de Microsoft, diseñado para proporcionar un entorno de desarrollo flexible y accesible en la nube. Permite a los desarrolladores codificar directamente desde sus navegadores web sin necesidad de instalar nada en sus máquinas locales. Este IDE basado en la nube se integra a la perfección con GitHub y otros servicios en la nube, permitiendo la colaboración en tiempo real, el fácil acceso a proyectos desde cualquier dispositivo y la capacidad de trabajar en entornos distribuidos. Con características como resaltado de sintaxis, depuración y extensiones, el Visual Studio Code Cloud IDE ofrece una experiencia de desarrollo completa, convirtiéndolo en una solución conveniente para los desarrolladores que necesitan un entorno de codificación potente y portátil que se pueda acceder desde prácticamente cualquier lugar.

Esta guía te mostrará cómo instalar Visual Code-Server en el servidor Ubuntu 24.04 con Nginx como proxy inverso.

Requisitos previos

Antes de comenzar, asegúrate de tener lo siguiente:

• Un servidor Ubuntu 24.05.
• Un usuario no root con privilegios de administrador.
• Un nombre de dominio apuntando a una dirección IP del servidor.

Instalando code-server con el script de instalación

Para instalar el code-server, puedes descargar y ejecutar el script de instalación de code-server. En este ejemplo, instalarás un code-server como un usuario no root. Así que asegúrate de haber iniciado sesión en tu usuario.

Primero, ejecuta el siguiente comando para asegurarte de que el code-server se puede instalar en tu sistema.

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

Cuando el code-server esté instalado en tu sistema, verás la siguiente salida:

Ahora instala el code-server con el siguiente comando. Ingresa tu contraseña de sudo/administrador cuando se te pida.

curl -fsSL https://code-server.dev/install.sh | sh

Después de que la instalación esté completa, inicia y habilita el code-server con el siguiente comando ‘ systemctl ‘.

sudo systemctl enable --now code-server@$USER

Por último, verifica el servicio de code-server con lo siguiente para asegurarte de que el servicio esté en funcionamiento.

sudo systemctl status code-server@$USER

En esta salida, puedes ver que el code-server está en funcionamiento, que se ejecuta en el puerto predeterminado 8080.

Configurando la contraseña de code-server

Después de instalar el code-server, configurarás la autenticación por contraseña para asegurar el entorno de code-server.

Abre el archivo de configuración predeterminado de code-server ~/.config/code-server/config.yaml con el editor ‘ nano ‘.

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

Cambia la contraseña predeterminada por tu contraseña segura.

bind-addr: 127.0.0.1:8080  
auth: password  
password: 0e0cb3af923c659366334664  
cert: false

Guarda el archivo y sal del editor.

Ahora ejecuta el siguiente comando para reiniciar el code-server y aplicar tus cambios.

sudo systemctl restart code-server@$USER

Configurando Nginx como proxy inverso

Ahora que has asegurado el code-server, instalarás Nginx y lo configurarás como un proxy inverso. Así que asegúrate de que tu nombre de dominio apunte a una dirección IP del servidor.

Instala el servidor web Nginx con el siguiente comando ‘ apt ‘. Ingresa ‘ Y ‘ para confirmar la instalación.

sudo apt install nginx -y

Después de que la instalación esté completa, crea una nueva configuración de bloque de servidor ‘ /etc/nginx/sites-available/code-server.conf ‘ con el editor ‘ nano ‘.

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

Inserta la siguiente configuración en el archivo y asegúrate de cambiar el nombre de dominio ‘ code.howtoforge.local ‘.

server {  
listen 80;  
listen [::]:80;  
server_name code.howtoforge.local;  
  
location / {  
proxy_pass http://localhost:8080/;  
proxy_set_header Host $http_host;  
proxy_set_header Upgrade $http_upgrade;  
proxy_set_header Connection upgrade;  
proxy_set_header Accept-Encoding gzip;  
}  
}

Cuando termines, guarda el archivo y sal del editor.

A continuación, ejecuta el siguiente comando para activar el bloque de servidor ‘ code-server.conf ‘ y verificar tu configuración de Nginx.

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

Si estás correcto y tienes una configuración adecuada de Nginx, verás una salida ‘ syntax is ok - test is successful’.

Ahora ejecuta el siguiente comando para reiniciar el servidor web Nginx y aplicar los cambios. Luego, verifica el estado de Nginx para asegurarte de que el servidor web esté en funcionamiento.

sudo systemctl restart nginx  
sudo systemctl status nginx

En la siguiente salida, puedes ver que el servidor web Nginx está funcionando como un proxy inverso para la aplicación code-server.

Configurando UFW (Firewall poco complicado)

Para permitir el acceso al code-server, debes abrir tanto los puertos HTTP como HTTPS a través de UFW (Firewall poco complicado).

Ejecuta el siguiente comando para habilitar el perfil ‘ Nginx Full ‘ y permitir el tráfico HTTP y HTTPS a tu instalación de Nginx. Una vez agregado, verás una salida ‘Regla añadida’.

sudo ufw allow 'Nginx Full'

Ahora ejecuta el siguiente comando para verificar el estado de UFW. Asegúrate de que el perfil ‘Nginx Full’ esté habilitado para permitir el acceso desde cualquier lugar.

sudo ufw status

Asegurando code-server con HTTPS

En esta sección, asegurarás el code-server con HTTPS generando certificados SSL/TLS a través de certbot y letsencrypt.

Instala los paquetes ‘certbot’ y ‘python3-certbot-nginx’ con el siguiente comando ‘apt’.

sudo apt install certbot python3-certbot-nginx

Después de que la instalación esté completa, ejecuta el comando ‘certbot’ a continuación para generar certificados SSL/TLS y asegurar tu instalación de code-server. Asegúrate de cambiar el nombre de dominio y la dirección de correo electrónico por tu información.

sudo certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email [email protected] -d code.howtoforge.local

Cuando el proceso esté completo, tu instalación de code-server estará asegurada con HTTPS automáticamente. Y tus certificados SSL/TLS estarán disponibles en el directorio ‘/etc/letsencrypt/live/code.howtoforge.local’.

Accediendo a code-server

Abre tu navegador web y visita https://code.howtoforge.local. Si tu instalación es exitosa, se te pedirá la autenticación por contraseña.

Ingresa tu contraseña y haz clic en ENVIAR para confirmar.

Si tienes la contraseña correcta, verás la siguiente pantalla de code-server. Selecciona tu tema predeterminado, claro u oscuro.

Ahora obtendrás el siguiente code-server en vivo en tu navegador web.

Conclusión

¡Felicidades! Has completado la instalación del servidor VS code en el servidor Ubuntu 24.04. Has instalado y asegurado un servidor de código con autenticación por contraseña y HTTPS y configurado Nginx como un proxy inverso para tu instalación de servidor de código.