The server version of Visual Studio code has been officially released in preview so I set up it on my VPS server with SSL and Basic/Client authentication.
And I registered vscode server as a systemd service to run vscode server on boot.
Now I can edit any files on the server from anywhere anytime with a browser.
How to set up (Using Ubuntu 20.04)
Nginx is configured as a reverse proxy for the front end, SSL and other security are applied on the Nginx, and vscode server itself is used as the back end. You don’t use Apache as a reverse proxy because the websockets will not pass through correctly.
Visual Studio code server : install and set up
Install as described officially and create a systemd file to register as a service.
# install wget -O- https://aka.ms/install-vscode-server/setup.sh | sh # make a systemd unit file # vscode server will be run on the User/Group you set up in this file. # Don't forget changing the User/Group of your environment. sudo vi /lib/systemd/system/vscodeserver.service --- [Unit] Description=vs code server After=network-online.target [Service] ExecStart=/usr/local/bin/code-server serve-local --accept-server-license-terms --disable-telemetry Restart=always User=yourUserName Group=yourGroupName UMask=002 [Install] WantedBy=multi-user.target ---
Register the unit file with systemd and run it.
# 登録 sudo systemctl enable vscodeserver # 開始 sudo systemctl start vscodeserver
Wait for a minute or two and obtain the URL of the connection destination that is displayed on the status after the startup.
Only fist time, it takes a minute or two to start up. It start immediately after second time.
# Get the URL from thee line "Web UI available at" sudo systemctl status vscodeserver --- Jul 13 07:20:14 devserver001 code-server[367393]: Server bound to 127.0.0.1:8000 (IPv4) Jul 13 07:20:14 devserver001 code-server[367393]: Extension host agent listening on 8000 Jul 13 07:20:14 devserver001 code-server[367393]: Web UI available at http://localhost:8000/?tkn=6de5345a-b644-48cd-a7f9-3433bcc031e3 Jul 13 07:20:14 devserver001 code-server[367393]: [07:20:14] Extension host agent started. Jul 13 07:20:14 devserver001 code-server[367393]: [07:20:14] Deleted from disk ms-ceintl.vscode-language-pack-ja /home/yourname/.vscode-server/extensions/ms-ceintl.vscode-language-pack-ja-1.67.3 Jul 13 07:20:14 devserver001 code-server[367393]: [07:20:14] Deleted from disk xdebug.php-debug /home/yourname/.vscode-server/extensions/xdebug.php-debug-1.26.1 ---
The URL is http://localhost:8000/?tkn=6de5345a-b644-48cd-a7f9-3433bcc031e3 in this example. Please note this URL.
If you could not find of the line “Web UI available at” with the command “sudo systemctl status vscodeserver”, then use the command “journalctl –no-pager | grep -e ‘code-server'”. You can find the line “Web UI available at” around the time you started the vscode server.
Nginx set up
Nginx is configured with a reverse proxy, SSL, and Basic Authentication (or Client Authentication). The SSL files should have been obtained by Let’s Encrypt or somewhere. I will not explain how to obtain the SSL files here.
sudo apt install nginx
Below is the basic configuration file. This file should be set up according to your own environment. My server is used only by me, so I have kept the settings to a minimum.
sudo vi /etc/nginx/nginx.conf
---
user yourUser yourGroup;
worker_processes 1;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 50;
multi_accept on;
}
http {
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 3;
types_hash_max_size 2048;
server_tokens off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
access_log off;
error_log /var/log/nginx/error.log;
include /etc/nginx/sites-enabled/*;
}
---Preparation for Basic Authentication
sudo apt install apache2-utils sudo htpasswd -c /etc/nginx/.htpasswd testuser => Enter the passowrd for testuser.
The following is the key configuration file of virtual host. The setting using Basic authentication for authentication.
You need to change server_name, ssl_certificate, and ssl_certificate_key in the file from below example.
# virtual host
sudo vi /etc/nginx/sites-available/vscodeFront
---
server {
listen 443 ssl http2;
server_name yourServerName.com;
# SSL
ssl_certificate /etc/letsencrypt/live/yourServerName.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yourServerName.com/privkey.pem;
location / {
auth_basic "Restricted";
auth_basic_user_file /etc/nginx/.htpasswd;
proxy_pass http://127.0.0.1:8000/;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
}
}
---
sudo ln -s /etc/nginx/sites-available/vscodeFront /etc/nginx/sites-enabled/
If you want to use client authentication, the virtual host will be like below.
sudo vi /etc/nginx/sites-available/vscodeFront
---
server {
listen 443 ssl http2;
server_name yourServerName.com;
# SSL
ssl_certificate /etc/letsencrypt/live/yourServerName.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yourServerName.com/privkey.pem;
# client auth
ssl_verify_client on;
ssl_client_certificate /opt/myCA/cacert.pem;
ssl_crl /opt/myCA/crl.pem;
location / {
proxy_pass http://127.0.0.1:8000/;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
}
}
---After configuration, enable the virtual host configration and restart Nginx
sudo ln -s /etc/nginx/sites-available/vscodeFront /etc/nginx/sites-enabled/ sudo systemctl restart nginx
Now you can access your vscode server from your browser.
The URL will be like https://yourServerName.com/?tkn=6de5345a-b644-48cd-a7f9-3433bcc031e3. The end of URL, after “?tkn=” , is from the URL that you note above.
Don’t forget to close port 8000 with the firewall of your server.