Coding anywhere by code-server and VPS

Some parts of this article is already written in Thai language in this article to bring iPad as the development machine.

Nowadays, you can create the remote development machine to replace the laptop and the tablet to develop anymore without hassles by the advances in cloud computing like Amazon Web Services, or Microsoft Azure, and the cloud-based IDE such as Cloud9, code-server, etc. However, on that day, the cost of the creation of the server was expensive. It counted many bucks per hour. For me, I considered not to create until this year.

How can I find out this way?

I see the old article about bringing the iPad for remote web development by renting Linode as the development server. I found that it is more convenient. You don’t need to buy a newer and faster computer. You can just scale up or scale down for your needs.

I found a cheaper way to create the development server. I find the cheaper virtual private server (VPS) in my country like ReadyIDC, and I find the free self-hosted cloud IDE like code-server. You may feel a little confused about what code-server is.

code-server (or VS code in the browser) is the self-hosted cloud IDE invented by Coder. It has three advantages (from that Github page):

1. Code on any device with a consistent development environment.
2. Use cloud servers to speed up tests, compilations, downloads, and more.
3. Preserve battery life when you’re on the go; all intensive tasks run on your server.

I find that it fits with my lifestyle. I bring the laptop or the tablet between home and the campus. I find that it is inconvenient to transfer files between these devices. I consider installation on the remote server.

How can I install code-server?

I install code-server by running the Docker container. You can easily run the container by using this command below provided on the Docker hub page as an example.

# This will start a code-server container and expose it at http://127.0.0.1:8080.
# It will also mount your current directory into the container as `/home/coder/project`
# and forward your UID/GID so that all file system operations occur as your user outside
# the container.
#
# Your $HOME/.config is mounted at $HOME/.config within the container to ensure you can
# easily access/modify your code-server config in $HOME/.config/code-server/config.json
# outside the container.
mkdir -p ~/.config
docker run -it --name code-server -p 127.0.0.1:8080:8080 \
  -v "$HOME/.config:/home/coder/.config" \
  -v "$PWD:/home/coder/project" \
  -u "$(id -u):$(id -g)" \
  -e "DOCKER_USER=$USER" \
  codercom/code-server:latest

Then, you save this file and run this script. It will show that the code-server is running. You can run the code-server by typing localhost:8080 to access it. However, it is not secure. It is better to use HTTPS..

How to use HTTPS?

For me, I install Nginx and Certbot to reverse proxy to the code-server, and to get the SSL certificate from Let’s encrypt. Both are available as Docker containers. You can install, and configure it as a Docker-compose configuration file.

I wrote the Nginx configuration shown below as an example. Many parts are generated by Certbot.

server {
    server_name <Your Domain Name>;

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

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/<Your Domain Name>/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/<Your Domain Name>/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = <Your Domain Name>) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    listen [::]:80;
    server_name <Your Domain Name>;
    return 404; # managed by Certbot
}

After writing this configuration, restart Nginx. You will find that you can access this website as HTTPS.

To make it easy, you can use LinuxServer SWAG Docker image to use Nginx and Certbot.

Update

After posting this post on Twitter, there is an account that suggests I install Open Server on the Gitpod’s repo. I install on my own VPS server. I found that it is better than code-server. I don’t need to use the apt-get command to install, and I don’t need to config in the config.yml file like code-server anymore.

However, one thing you should consider is security. First, I choose to apply Nginx for the reverse proxy shown above, but you have to change the port from 8080 to 3000. Second, I apply authentication on the Nginx side. Third, I use HTTPS instead of HTTP to make my code environment more secure.

Summary

I needed to have a remote development server, and I found a cheaper way to apply. I considered registering the VPS and installing code-server, Nginx, and Certbot to allow accessing code-server with HTTPS. I found it more convenient to develop from the laptop or the tablet. I do not need to install to take more spaces anymore. I can save many hours running on the laptop’s battery.

For anyone reading this, I recommend this way.