VSCode on my iPad Pro

2020-04-13

To get VSCode accessible on an iPad Pro (or any web enabled device), you just need one easy to use docker container, code-server, and a VPS to run it on. Of course you could self-host this, but I wanted the ability to access it on the go and my home internet is a complete joke.

This post will walk you through the process of setting up code-server on an Ubuntu VPS and then front it with Caddy as a reverse proxy, providing an SSL certificate. I’ll also walk you through setting up proper git access for code-server so you can commit all within the interface.

VPS

I used DigitalOcean as the VPS provider for this project. I chose the $20 Ubuntu 18.04 option (2vCPU, 4GB Mem), because according to code-server they still require a decent amount of resource, but also because I intend on hosting my Gitlab server on here as well in the future.

On the VPS I will walk you through installing Docker, Dropbox CLI (keep project files in sync), and Caddy.

Caddy

Let’s get Caddy installed first. You could run this in Docker if you’d like, but I prefer to run it directly on the host.

wget https://dl.google.com/go/go1.13.linux-amd.tar.gz
sudo tar -C /usr/local/ -xvf go1.13.linux-amd64.tar.gz

Now insert the following into your bash ~/.profile:

export PATH=$PATH:/usr/local/go/bin

Then you’ll need to run source ~/.profile.

Let’s get some folders created for go.

mkdir -p ~/go/src/

Install Caddy:

curl https://getcaddy.com | bash -s personal
sudo setcap 'cap_net_bind_service=+eip' /usr/local/bin/caddy
sudo mkdir -p /etc/caddy
sudo chown -R root:www-data /etc/caddy
sudo mkdir -p /etc/ssl/caddy
sudo chown -R www-data:root /etc/ssl/caddy
sudo chmod 770 /etc/ssl/caddy
sudo touch /etc/caddy/Caddyfile
sudo mkdir -p /var/www
sudo chown www-data:www-data /var/www
sudo chmod 755 /var/www

Now would be a good time to point your subdomain to your new VPS, so DNS has some time to propagate.

Let’s create the Caddyfile:

code.yourdomain.com {
    proxy / localhost:8080 {
        header_upstream Host {host}
        header_upstream X-Real-IP {remote}
        header_upstream X-Forwarded-For {remote}
        header_upstream X-Forwarded-Port {server_port}
        header_upstream X-Forwarded-Proto {scheme}
        websocket
    }
}

Let’s get the systemd config file for Caddy setup:

curl -L https://raw.githubusercontent.com/mholt/caddy/fd3fafa50caf0dcbe695d28b48198a1e2bf810bd/dist/init/linux-systemd/caddy.service -o /etc/systemd/system/caddy.service

systemctl start caddy.service
systemctl enable caddy.service

Docker

Now let’s get Docker installed. Modify your /etc/apt/sources.list:

Append the following source somewhere in the list

deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable

Update apt and install docker:

sudo apt-get update
sudo apt-get install docker-ce -y
sudo systemctl enable docker
sudo usermod -aG docker ${USER}
su - ${USER}

Dropbox (Optional)

I use Dropbox to keep my project files in sync, so I’ll walk through the not so obvious setup steps to get it going on Ubuntu.

cd ~ && wget -O - "https://www.dropbox.com/download?plat=lnx.x86_64" | tar xzf -
sudo apt-get install python3-pip
sudo apt-get install libc6 libxglapi-mesa libxdamage1 libxfixes3 libxcb-glx0 libxcb-dri2-0 libxcb-dri3-0 libxcb-present0 libxcb-sync1 libxshmfence1 libxxf86vm1 -y
mkdir Dropbox
sudo chown -R "$USER" ~/Dropbox ~/.dropbox
sudo chattr -R -i ~/Dropbox
sudo chmod -R u+rw ~/Dropbox ~/.dropbox
~/.dropbox-dist/dropboxd # Follow install steps
wget https://linux.dropbox.com/packages/dropbox.py
python3 dropbox.py autostart y
python3 dropbox.py start
python3 dropbox.py status # Will show sync status
### Exclude ###
python3 dropbox.py exclude add Dropbox/FolderToExclude

I had to exclude a lot of stuff, since I have about 700GB in my Dropbox. I personally did something like this:

python3 dropbox.py exclude add Dropbox/*
python3 dropbox.py exclude remove Dropbox/projects

code-server

code-server is delivered as a Docker container, so it’s super easy to get up and running:

docker run -d -e PASSWORD=YOURPASSWORDHERE -p 127.0.0.1:8080:8080 -v "$PWD:/home/coder/project" codercom/code-server

-d runs the container in the background. -e PASSWORD=YOURPASSWORDHERE sets the UI password to something you want. -p 127.0.0.1:8080:8080 binds port 8080 on the container to localhost:8080, we can use localhost since the reverse proxy will be taking care of external connections. Lastly, -v "$PWD:/home/coder/project" mounts the current directory to /home/coder/project within the container.

At this point, you should be able to hit https://code.yourdomain.com and you’ll see the login prompt for code-server delivered to you over https. If it’s not working, most likely there is an issue with Caddy or the Caddyfile.

git

Since I publish most things with Git, including using Gitlab’s CI/CD for deploying this blog, I needed to make sure that I could do so from within the interface of code-server. I keep the SSH keys that I use for this sync’d in my Dropbox for occassions such as this, so thankfully the keys already live inside of the docker container.

In Code, click Menu > Terminal > New Terminal

mkdir .ssh
touch .ssh/config

Let’s add a line in our SSH Config for gitlab.com (or github, whichever you prefer). To exit vim, you’ll need to hit CTRL+[.

vim ~/.ssh/config

Host gitlab.com
    HostName gitlab.com
    Port 22
    User git
    IdentityFile ~/project/Dropbox/Keys/yourprivatekey

You should now be all set!