Set Up Code-Server Cloud IDE on Ubuntu with Nginx and Lets Encrypt

Introduction

Setting up a cloud-based IDE like code-server on Ubuntu can drastically improve your development workflow by providing a consistent environment accessible from any device. With Nginx as a reverse proxy and Let’s Encrypt securing the connection, you can ensure a smooth, reliable, and secure experience while using Visual Studio Code remotely. In this guide, we’ll walk you through the step-by-step process of installing and configuring code-server on Ubuntu 22.04, securing it with Let’s Encrypt certificates, and making it accessible via your own domain. By the end, you’ll have a fully functional, cloud-powered development environment that works seamlessly from anywhere.

Step 1 — Installing code-server

In this step, you’ll set up code-server on your server by downloading the latest version and creating a systemd service that will keep code-server running in the background. You’ll also set up a restart policy for the service, so if code-server crashes or the server reboots, it’ll start right back up. All the data related to code-server will be saved in a folder named ~/code-server.

To create this folder, run:

mkdir ~/code-server

Now, navigate to the folder:

cd ~/code-server

You’ll need the latest Linux build of code-server from its Github releases (it’ll have “linux” in the filename). At the time I’m writing this, the latest version is 4.8.2. To download it, use the command:

wget https://github.com/coder/code-server/releases/download/v4.8.2/code-server-4.8.2-linux-amd64.tar.gz

Once the download finishes, unpack the archive with this command:

tar -xzvf code-server-4.8.2-linux-amd64.tar.gz

This will create a folder with the same name as the archive. This folder contains all the source code for code-server. To make it available system-wide, run the following command to copy it to /usr/lib/code-server:

sudo cp -r code-server-4.8.2-linux-amd64 /usr/lib/code-server

Now, create a symbolic link so that you can run code-server from anywhere:

sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

Next, you’ll need to create a directory where code-server will store user data. To do this, run:

sudo mkdir /var/lib/code-server

With code-server downloaded and made globally accessible, you’ll now set up a systemd service to keep it running in the background. You’ll store the service configuration in a file called code-server.service in the /lib/systemd/system directory (where systemd stores all its services). To create it, open your text editor (this example uses nano):

sudo nano /lib/systemd/system/code-server.service

Now, add the following lines to the file:

[Unit]Description=code-serverAfter=nginx.service[Service]Type=simpleEnvironment=PASSWORD=your_passwordExecStart=/usr/bin/code-server –bind-addr 127.0.0.1:8080 –user-data-dir /var/lib/code-server –auth passwordRestart=always[Install]WantedBy=multi-user.target

This section specifies that the service depends on nginx (meaning nginx must be up and running before code-server starts). It also defines how the service should run and what parameters it should use. For example, –bind-addr 127.0.0.1:8080 binds the code-server to localhost, so it’s only accessible within the server itself. –user-data-dir sets the user data directory. –auth password means that anyone trying to access code-server will need a password, which you can set in the PASSWORD environment variable. Don’t forget to replace your_password with your desired password. The Restart=always directive ensures code-server will restart automatically in case of a failure or system reboot. The [Install] section tells systemd to start the service when the server logs in. After that, save and close the file.

Start the code-server service by running:

sudo systemctl start code-server

To make sure it’s running correctly, check the status:

sudo systemctl status code-server

You should see an output similar to this:

● code-server.service – code-serverLoaded: loaded (/lib/systemd/system/code-server.service; disabled; preset: enabled)Active: active (running) since Thu 2022-11-03 12:39:26 UTC; 5s agoMain PID: 2670 (node)Tasks: 22 (limit: 1116)Memory: 90.9MCPU: 799msCGroup: /system.slice/code-server.service├─2670 /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└─2692 /usr/lib/code-server/lib/node /usr/lib/code-server/out/node/entry

To make sure code-server starts up automatically after a reboot, run this command to enable it:

sudo systemctl enable code-server

The output should indicate that a symlink was created:

Created symlink /etc/systemd/system/multi-user.target.wants/code-server.service → /lib/systemd/system/code-server.service.

With code-server set up and enabled to start at boot, you can now expose it to the web by configuring nginx to act as a reverse proxy.

Step 2 — Exposing code-server at Your Domain

Now that code-server is up and running, you’ll want to make it accessible through your domain. For this, you’ll use nginx as a reverse proxy. You’ve probably already dealt with nginx configuration files in a previous step. These configuration files are stored under /etc/nginx/sites-available and need to be symlinked to /etc/nginx/sites-enabled to activate them.

Start by creating a new configuration file for code-server in /etc/nginx/sites-available. You can do that with your preferred text editor:

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

Now, add the following lines:

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; }}

In this file, replace code-server.your-domain with your actual domain. The server block tells nginx to listen on port 80 for incoming HTTP requests. The server_name directive tells nginx to apply this configuration to your specific domain. The location block passes all incoming requests to the code-server running on localhost at port 8080. The proxy_set_header directives carry over important HTTP headers, necessary for the correct functioning of WebSockets that code-server relies on.

Once you’ve added the configuration, save and close the file. Now you need to activate this site configuration by creating a symlink from /etc/nginx/sites-available to /etc/nginx/sites-enabled:

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

Test the validity of your configuration with:

sudo nginx -t

You should see an output like this:

nginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: configuration file /etc/nginx/nginx.conf test is successful

For the changes to take effect, restart nginx:

sudo systemctl restart nginx

Now, you should be able to access code-server through your domain. Next, you’ll secure your domain with a free Let’s Encrypt TLS certificate.

Step 3 — Securing Your Domain

Now that your domain is properly set up, let’s make sure it’s secure by using a Let’s Encrypt TLS certificate. You’ll use Certbot to get the certificate and configure it for your domain. Once done, your code-server will be running behind HTTPS.

Before proceeding, you’ve probably already enabled ufw (Uncomplicated Firewall) and set it up to allow unencrypted HTTP traffic. To allow encrypted traffic, run the following command:

sudo ufw allow https

You should see an output like this:

Rule addedRule added (v6)

Just like with nginx, you’ll need to reload ufw for the change to take effect:

sudo ufw reload

Once that’s done, navigate to your domain in a web browser. The code-server login prompt should appear. Enter the password you set earlier, and you’ll be taken directly to the editor GUI.

Now that code-server is properly exposed, you can request Let’s Encrypt TLS certificates to secure it. Start by installing Certbot and the nginx plugin:

sudo apt install certbot python3-certbot-nginx -y

Then, to request a certificate for your domain, run:

sudo certbot –nginx -d code-server.your-domain

Certbot will ask for your email address (in case they need to notify you about any certificate-related issues) and to agree to the terms of service. After that, it’ll automatically configure nginx to support HTTPS and request the certificate. You should see an output like this:

Requesting a certificate for code-server.your-domainSuccessfully received certificate.Certificate is saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pemKey is saved at: /etc/letsencrypt/live/code-server.your-domain/privkey.pemThe certificate will expire on 2023-02-01, but don’t worry—Certbot will automatically renew it in the background.

The certificate is now deployed, and your site is secured! You’ll see the padlock icon in the browser, indicating that your connection is secure. Congratulations! Your code-server is now live and secure on your domain.

Read more about setting up cloud IDE platforms with Setting Up Code-Server Cloud IDE on Ubuntu.

Conclusion

In conclusion, setting up code-server on an Ubuntu 22.04 server with Nginx and Let’s Encrypt provides a powerful, secure, and remote development environment using Visual Studio Code. By following this guide, you’ve not only installed code-server but also configured it for reliable access through a domain, with added security via Let’s Encrypt certificates. This cloud-based solution offers the flexibility to develop from anywhere, with an interface that includes file management, source control, debugging, and extension support. As the demand for remote development environments continues to grow, setting up tools like code-server will become an essential skill for developers looking to optimize their workflows.

Stay ahead of the curve and keep exploring the evolving possibilities of cloud development environments with tools like code-server.

Configure Nginx Logging and Log Rotation on Ubuntu VPS