Installing Visual Studio Code behind a Web Proxy

Code-server is VS Code running on a remote server, accessible through the browser. It provides a developer a server-powered, consistent environment. Code on the go, anywhere where a browser is available.

IMPORTANT REQUIREMENTS
You will need a KVM Virtual Server or a Dedicated Server with atleast 2 CPU Cores and atleast 1 GB of RAM.

Other Requirements

  • Minimum GLIBC Version of 2.17 and Minimum Version of GLIBCXX of 3.4.15
  • NGINX or APACHE2 if you want to do a reverse proxy
  • A domain with an A Record pointing to your server.

Step 1 - Get Our Release
Go to the repository and find the Latest Release.
Copy the link address and insert it into this command.

mkdir /code-server
wget -qO- REPLACE_WITH_LINK_TO_RELEASE \
    | tar xvz --strip-components=1 -C /code-server

This is going to create a folder at /code-server and install it there. It will unpack the binary and just like this it will be able to run under port 8080 unsecurely through the use of the commands:

chmod +x /code-server/code-server
/code-server/code-server

Step 2 - Encrypting Traffic with HTTPS
In this part, your going to need to have some sort of certificate for your webserver already. You can get one from Let’s Encrypt here or if your DNS Provider is Cloudflare, you can use their origin certificates.

Just keep in mind that when starting code-server, you wont be doing it from the above script. Instead we will be starting code-server with a couple arguments. code-server --cert /path/to/cert --cert-key /path/to/cert
We can simplify this with a systemd service, and allow it to run on startup:

sudo nano /etc/systemd/system/codeserver.service

And enter the following, making sure to change to your local user. You can use root, but it is recommended to use a non-sudo user.

[Unit]
Description=Code Server IDE
After=network.target

[Service]
Type=simple
User=<USER> 
EnvironmentFile=$HOME/.profile
WorkingDirectory=$HOME
Restart=on-failure
RestartSec=10

ExecStart=/code-server $(pwd)

StandardOutput=file:/var/log/code-server-output.log
StandardError=file:/var/log/code-server-error.log

[Install]
WantedBy=multi-user.target
systemctl enable --now codeserver.service

Will enable and start it.

Step 3 - Installing the Reverse Proxy Config
There are going to be two different configs, one for Apache2 and one for NGINX.

NGINX Config
server {
  listen 80;
  listen [::]:80;
  listen 443;
  server_name code.example.com ;
  location / {
      proxy_pass http://localhost:8080/;
      proxy_set_header Host $host;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection upgrade;
      proxy_set_header Accept-Encoding gzip;
  }
}
Apache2
<VirtualHost *:80>
  ServerName code.example.com

  RewriteEngine On
  RewriteCond %{HTTP:Upgrade} =websocket [NC]
  RewriteRule /(.*)           ws://localhost:8080/$1 [P,L]
  RewriteCond %{HTTP:Upgrade} !=websocket [NC]
  RewriteRule /(.*)           http://localhost:8080/$1 [P,L]

  ProxyRequests off
  ProxyPass        / http://localhost:8080/ nocanon
  ProxyPassReverse / http://localhost:8080/
</VirtualHost>

If you need additional details, you can reach the original documentation here.

1 Like