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.
# installwget -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 serverAfter=network-online.target[Service]ExecStart=/usr/local/bin/code-server serve-local --accept-server-license-terms --disable-telemetryRestart=alwaysUser=yourUserNameGroup=yourGroupNameUMask=002[Install]WantedBy=multi-user.target---Register the unit file with systemd and run it.
xxxxxxxxxx# 登録sudo systemctl enable vscodeserver# 開始sudo systemctl start vscodeserverWait 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.
xxxxxxxxxx# 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 8000Jul 13 07:20:14 devserver001 code-server[367393]: Web UI available at http://localhost:8000/?tkn=6de5345a-b644-48cd-a7f9-3433bcc031e3Jul 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.3Jul 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.
xxxxxxxxxxsudo apt install nginxBelow 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.
xxxxxxxxxxsudo 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
xxxxxxxxxxsudo apt install apache2-utilssudo 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.
xxxxxxxxxx# virtual hostsudo 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.
xxxxxxxxxxsudo 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
xxxxxxxxxxsudo ln -s /etc/nginx/sites-available/vscodeFront /etc/nginx/sites-enabled/sudo systemctl restart nginxNow 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.