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

Code-server is a Visual Studio (VS) Code that can be run remotely on the server and which is 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 18.04 Server.

Prerequisites

For this guide, we will install the Code-server on the Ubuntu 18.04 server with 3GB of RAM, 25GB free disk space, and 2CPUs.

What we will do:

  • Add User and Download Code-server Binary
  • Setup Code-server as a Systemd Service
  • Generate SSL Letsencrypt
  • Setup Nginx as a Reverse Proxy for Code-server
  • Testing

Step 1 - Add User and Download Code-Server Binary

First, we will add a new user and download the code-server binary file from GitHub.

Add a new user 'code' using the command below.

useradd -m -s /bin/bash code
passwd code

Now log in as 'code' user and download the code-server binary file.

su - code
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

Download VS Code Server

Extract the code-server and rename the directory as 'bin'.

tar -xf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz
mv code-server2.1692-vsc1.39.2-linux-x86_64/ bin/

Now make the code-server as an executable binary file.

chmod +x ~/bin/code-server

And create a new data directory for storing the user data.

mkdir -p ~/data

Now you've created a new user 'code' and downloaded the code-server binary to the home directory of user 'code'.

Download and install Code Server

Step 2 - Setup Code-Server as a Systemd Service

In this step, we will set up the code-server to run as a system service.

The code-server service will run under the user 'code', with default port '8080' and enabled password authentication.

Go to the '/etc/systemd/system' directory and create a new service file 'code-server.service' using vim editor.

cd /etc/systemd/system/
vim code-server.service

Change the 'Environment' option for a password with your own and paste the configuration into it.

[Unit]
Description=code-server
After=nginx.service

[Service]
User=code
WorkingDirectory=/home/code
Environment=PASSWORD=hakasevscodeserv
ExecStart=/home/code/bin/code-server --host 127.0.0.1 --user-data-dir /home/code/data --auth password
Restart=always

[Install]
WantedBy=multi-user.target

Save and close.

Now reload the system manager.

systemctl daemon-reload

After that, start the code-server service and add it to the system boot using the following command.

systemctl start code-server
systemctl enable code-server

Setup code-server systemd service

Now Check the code-server service.

netstat -plntu
systemctl status code-server

And the code-server service is up and running on default port '8080'.

Run Code-Server

As a result, you've set up the code-server to run as a system service.

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

Edit Nginx Configuration

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.

Start Nginx

The Nginx service is up and running on the Ubuntu 18.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.

Login to VS Code

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

Visual Studio Code

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

Reference

Share this page:

Suggested articles

1 Comment(s)

Add comment

Comments

By: IceManXS at: 2020-01-30 10:30:06

Hello,

thank you for this great site and your great tutorials. I regualry check you site for trying some new things. I love it.

I just tried this tutorial and have some remarks, because of some problems I ran in.

First of all I could not use the default port 8080. Just in case you have the same issue try:

netstat -an |grep 8080

If there is no output you dont have to change anything and you can go on with this tutorial as it is.

If there is an output it wont work for you without changing the port vscode listens on. The service will fail to start.

Try your desired port after grep.

netstat -an |grep YoUrPoRt

Change "YoUrPoRt" by a portnumber e.g. 8081

If there is no output you can use this port.

You can easily change the port vscode listens on by editing the ExecStart-section in your code-server.service:

ExecStart=/home/code/bin/code-server --host 127.0.0.1 --port YoUrPoRt --user-data-dir /home/code/data --auth password

 

Before you start with Point 2 of the tutorial change user to su (sudo -s) for getting all your work saved.

 

Kind regards