How to Install Visual Studio Code - Server IDE on Ubuntu 20.04 LTS

Code-server is a Visual Studio (VS) Code that can be run remotely on the server and accessible through a web browser. It allows you to create and have a consistent development environment that can be accessed anytime and everywhere.

In this tutorial, we will show you how to install the Code-server with Nginx as a reverse proxy and SSL Letsencrypt on the latest Ubuntu 20.04 Server.

Prerequisites

For this guide, we will install the Visual Code Server on the Ubuntu 20.04 server with 4GB of RAM, 25GB free disk space, and 2CPUs.

What we will do:

• Download and Install Visual Code Server Packages
• Setup Authentication for Visual Code Server
• Generate SSL Letsnecrypt
• Install and Configure Nginx as a Reverse Proxy
• Testing

Step 1 - Download and Install Visual Code Server Packages

First, we will download the Visual Code Server latest version for the Ubuntu FocalFossa and install it in our system.

By default, the code server packages are available for multiple operating systems. You can check the code server release page on GitHub using the following link.

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

Now download the Visual Code Server packages for Ubuntu using the wget command below.

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

After that, install the visual code server package using the dpkg command below.

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

Once the installation is completed, start the code server service and add it to the system boot.

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

The Visual Code Server is up and running, check it using the following command.

ss -plnt
systemctl --user status code-server

Below is the result you will get.

As can be seen, the Visual Code Server runs by default on the local IP address '127.0.0.1' with the TCP port '8080'.

Step 2 - Setup Authentication for Visual Code Server

By default, the visual code server is running with authentication enabled on it.

The visual code server password authentication is by default generated to the '~/.config/code-server/config.yaml' file.

Check the visual code server configuration using the following command.

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

You will get something like this configuration.

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

Details configurations:

• The 'bind-addr' is an option used to define on which IP address and port the Code Server will be running.
• The 'auth' option as the authentication method for the Visual Code Server, and by default, it's used the 'password' authentication method.
• The 'password' options are used to define your password for the Visual Code Server access, and make sure to use a strong password.

To change the bind address, port, and the password for Visual Code Server, change the default configuration '~/.config/code-server/config.yaml' as you need.

Step 3 - Generate SSL Letsencrypt

In this step, we will generate the SSL letsencrypt using the certbot tool for securing the code-server.

Install the certbot tool using the apt command below.

sudo apt install certbot -y

Once the installation is complete, generate the SSL letsencrypt using the certbot command below.

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

Once it's complete, your certificates will be located at the '/etc/letsencrypt/live/vscode.hakase-labs.io/' directory.

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

Now you've generated the SSL Letsencrypt for securing the code-server installation using the certbot tool.

Step 4 - Setup Nginx as a Reverse Proxy

In this step, we will install the Nginx web server and set up it as a reverse proxy for the code-server with SSL enabled on top of it.

Install Nginx package using the apt command below.

sudo apt install nginx -y

Once the installation is complete, go to the '/etc/nginx/sites-available' directory and create a new virtual host configuration 'code-server'.

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

Now change the domain name and path of SSL with your own and paste the configuration into it.

server {
 listen 80;
 server_name vscode.hakase-labs.io;
 # enforce 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;
 }
}

Save and close.

Now activate the 'code-server' virtual host, test the nginx configuration and make sure there is no error.

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

After that, restart the nginx service and add it to the system boot.

systemctl restart nginx
systemctl enable nginx

Now the Nginx service is up and running as a reverse proxy for the code-server. Check it using the command below.

netstat -plntu
systemctl status nginx

And you will get the result as below.

The Nginx service is up and running on the Ubuntu 20.04 server with the HTTP and HTTPS ports enabled on top of it.

Step 5 - Testing

Open your web browser and type the URL of your code-server installation.

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

Log in with your password that you've configured at the code-server service file.

Once the password is correct, you will get the VS Code editor on your web browser as below.

As a result, you've installed the code-server on Ubuntu 20.04 server with Nginx as a reverse proxy and securing the code-server installation with SSL Letsencrypt.

Reference

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