VSCode is a popular integrated development environment with a lot of plugins. My favourite combo is VSCode + remote SSH + remote docker container (within the remote server!). If you have access to a much more powerful remote Linux machine with a fast network and low latency, it’s worth a try. I’ve been using this setup quite a lot and it works great.
Recently, I discovered that there is a web version of VSCode. No need to install anything on a local machine, it works entirely in a web browser. You can read more about it here: https://code.visualstudio.com/docs/remote/vscode-server
Would it be possible to do pair programming in a Google Docs style with real-time editing? Kind of like the “Live Share” plugin does? You might ask why not use “Live Share” then? I know of at least a few situations where this setup was non-trivial and required too much effort for someone. A simple web link would be better in this case. And Github does it here: https://github.com/features/codespaces
I decided to play with it in my home lab. In less than 15 minutes I was able to see this in two web browsers:
Interestingly, I was able to run them both at the same time, although it’s not a proper “Live Share” functionality. But hey, in just 15 minutes I’m able to share my VSCode with anyone. And I can also take advantage of my 56vCPU remote Linux machine.
My quick setup
- Prepare a VM. For me it’s just this:
$ lxc launch ubuntu:22.04 prod-code -p prod -p cpu16-memory32
I use LXC containers to quickly have an ephemeral (or not…. 🙂 ) VM-like environment. It does ‘cloud-init’ behind the scenes and calls Cinc to automate basic steps like connecting to the Teleport server. In the end, I have a Ubuntu 22.04 with my user and zsh configured.
2. Install VSCode web
This is surprisingly easy! Just two commands:
$ wget -O- https://aka.ms/install-vscode-server/setup.sh | sh $ code-server serve-local
The full output from running these 2 commands is below:
prod-code:~/vscode% wget -O- https://aka.ms/install-vscode-server/setup.sh | sh --2022-10-08 21:14:46-- https://aka.ms/install-vscode-server/setup.sh Resolving aka.ms (aka.ms)... 220.127.116.11 Connecting to aka.ms (aka.ms)|18.104.22.168|:443... connected. HTTP request sent, awaiting response... 301 Moved Permanently Location: https://vscodeserverlauncher.blob.core.windows.net/builds/setup-scripts/setup.sh [following] --2022-10-08 21:14:46-- https://vscodeserverlauncher.blob.core.windows.net/builds/setup-scripts/setup.sh Resolving vscodeserverlauncher.blob.core.windows.net (vscodeserverlauncher.blob.core.windows.net)... 22.214.171.124 Connecting to vscodeserverlauncher.blob.core.windows.net (vscodeserverlauncher.blob.core.windows.net)|126.96.36.199|:443... connected. HTTP request sent, awaiting response... 200 OK Length: 1758 (1.7K) [text/x-sh] Saving to: ‘STDOUT’ - 100%[========================================================================================================================================================================================>] 1.72K --.-KB/s in 0s 2022-10-08 21:14:47 (474 MB/s) - written to stdout [1758/1758] glibc version is 2.35 is min? 1 Installing from https://aka.ms/vscode-server-launcher/x86_64-unknown-linux-gnu prod-code:~/vscode% code-server serve-local VS Code Server * * By using the software, you agree to the * the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and * the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement). * ✔ Do you accept the terms in the License Agreement · yes ues [2022-10-08 21:15:13] info Downloading VS Code server https://az764295.vo.msecnd.net/stable/64bbfbf67ada9953918d72e1df2f4d8e537d340e/vscode-server-linux-x64-web.tar.gz -> /home/tjarosik/.vscode-cli/server-stable-web/bin/64bbfbf67ada9953918d72e1df2f4d8e537d340e [2022-10-08 21:15:14] info Setting up server... [2022-10-08 21:15:15] info Starting server... * * Visual Studio Code Server * * By using the software, you agree to * the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and * the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement). * Server bound to 127.0.0.1:8000 (IPv4) Extension host agent listening on 8000 Web UI available at http://localhost:8000/?tkn=1d9f6eca-7129-4180-9aaf-25bf1139b6f6
3. Expose it for non-localhost access
Maybe there is a quicker way (see Ngrok), but I like my general way of doing it: writing a simple haproxy config.
frontend web bind :80 default_backend vscode_backend backend vscode_backend mode http option forwardfor server srv1 127.0.0.1:8000 check
4. Add to the Teleport
In the apps section of /etc/teleport.yaml, do this:
- name: "code" uri: "http://10.10.10.174:80"
and then it appears on the application list:
Another surprise was that I actually didn’t need to do anything special with headers/rewrites. Anyway, it seemed to “just work” after that. And because of how Teleport handles apps (with wildcard TLS certificate), it is now securely exposed over the internet to anyone I give access to with Teleport (proper https://, etc). And not accessible to anyone else.
I leveraged what I already know and what I automated in my home lab. You could potentially try Ngrok to achieve a similar effect.