Tunnel Tech

The Visual Studio Code ecosystem continues to thrive and expand. With thousands of extensions available for download from the marketplace, developers have a bewildering selection to enrich their daily coding experience. The Remote-Tunnels extension [1] [2] is an example of powerfully expanding a developer's remote capabilities. This extension integrates with vscode.dev hosting Visual Studio online services, allowing GitHub users to access a lightweight Visual Studio (VS) Code experience directly through a web browser. Pairing the remote tunneling capabilities of VS Code Server with GitHub integrated cloud services powers this secure remoting capability. As a result, developers can establish remote connectivity to Linux servers hosted in private networks, further expanding the possibilities of their development workflows. In this article, I unpack the details.

Remote SSH Connectivity Revisited

Before diving into the developer experience of a web-based VS Code environment, I'll briefly revisit the established Remote-SSH VS Code extension that provides SSH connectivity capabilities to virtual machines (VMs) or containers and seamlessly integrates with the standard functionalities of a local SSH client.

If you don't already have the Remote-SSH extension installed, use the --install-extension argument on the command-line interface (CLI):

code --install-extension ms-vscode-remote.remote-ssh

Of course, you can also access the Extensions view in the VS Code user interface (UI) to search and install.

This command-line action will result in the installation of three extensions. To verify that these extensions were installed successfully, enter:

code --list-extensions

The output dumped to the console will be all the extensions currently installed, including the three newly installed extensions:

ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode.remote-explorer

The extension ms-vscode-remote.remote-ssh does the heavy lifting of integrating with the local SSH client for SSH host selection and connectivity. The .remote-ssh-edit extension has a secondary purpose of providing the ability to edit SSH config files. Finally, .remote-explorer shows a list of available remote machines to which you can connect.

It's worth noting that the .remote-ssh extension uses the standard facilities of a locally available SSH client. Therefore, an SSH client must be installed and available in the environment runtime path. The conventional steps of SSH key generation and distribution apply here. Please see the "SSH Key Generation Refresher" boxout for a quick refresher. By convention, assume that the .ssh subdirectory exists in the user's home directory. The SSH config file residing in this subdirectory references the private key data file associated with the target SSH host as such:

IdentityFile ~/.ssh/my_id_ed25519-remote-server

ssh-keygen -t ed25519 -a 100 -f
ubuntu-sre-id_ed25519 -q -N

Host Ubuntu-SRE_Penguin
User penguin
HostName 127.0.0.1
Port 3092
IdentityFile "/Users/penguin/.ssh/ubuntu-sre-id_ed25519"

The file path separators in the IdentityFile directive assume a Linux shell context.

The .remote-explorer extension UI will render the SSH hosts defined in the config file. Any SSH hosts with a valid definition and up-to-date private key are available for connection. Select an SSH host entry and hit Enter to initiate a connection. What happens behind the scenes when you successfully authenticate via SSH, in a nutshell, is that VS Code will copy and install the VS Code Server component into the target Linux environment. This footprint, well beyond 100MB, represents the runtime software for Visual Code Server. From the SSH remoting scenario, you can typically locate the binary distribution in the hidden subdirectory .vscode-server (on the target SSH host for the specified users). Key entities that land in the .vscode-server subdirectory include:

The remote SSH extension will populate the Remote user interface view on the basis of the config file contents maintained in the .ssh subdirectory. You must refresh or relaunch VS Code for the target services to appear in the list view.

VS Code in Your Browser

SSH connectivity is a dependable and secure approach to enabling remote connectivity for VS Code developers. However, a non-SSH alternative is now available through the VS Code Web experience (hosted vscode.dev). This offering allows access to a development environment over a secure, non-SSH tunnel.

Figure 1 shows the integrated components and cloud services, including the Remote-Tunnels extension, the VS Code CLI, and VS Code Server. From the illustration, it's evident that this remote access model necessitates a GitHub user account, which most folks already have; if not, creating a new GitHub user account is simple.

Figure 1: Screen capture of the SSH extension view from VS Code.

Getting Started

To begin with a streamlined server-side approach, download the VS Code CLI. For the scope of this article, I zero in on Linux-based servers. This CLI initializes the VS Code server through a download and basic setup tailored for remote connectivity (similar to the SSH scenario). Manual setup and registration steps are required within the server environment to associate with an active GitHub web user session. Behind the scenes, the VS Code Server establishes a secure tunnel with AES encryption. I'll detail the commands to implement this remote setup in the subsequent sections.