Visual Studio Code has recently released a remote development feature called Tunnels. It allows user to connect to a remote development environment from anywhere through a secure tunnel. By anywhere, I meant it can be a local installation of VS Code on your laptop, or the vscode.dev website, which can be opened on a computer, an iPad, or even a smartphone if your eyesight is good enough.

As the page has stated:

VS Code can provide a local-quality development experience - including full IntelliSense (completions), code navigation, and debugging - regardless of where your code is hosted.

Moreover, to have a more isolated environment for your specific workspace, which will not affect the host machine where you might have other projects and tools, one of the ideal ways is to place your workspace inside a Docker container.

In this post, we will walk through some (kinda) simple steps to setup a workspace in a Docker volume mounted to a container running VS Code Remote Tunnels.

Prerequisites

A GitHub account. This will be used to authorize the VS Code tunnel in the container, as well as to log into that container from your client.

Your host machine should have Docker or Docker Desktop installed. You can find instructions on the official Docker website.

The following steps will be done in the host machine, except when stated otherwise.

Dockerfile

We are going to need a Docker image that contains VS Code CLI, a command-line version of VS Code that we can use to start a remote tunnel session.

This image will be based on Ubuntu instead of Alpine. The reason is Remote Tunnels currently doesn't support running on Alpine.

We will install 2 essential apps: git and curl. Git is for code versioning. And Curl is for downloading the VS Code CLI program. You can omit Git if it doesn't fit your needs.

The VS Code CLI executable, named code, will then be put in the /usr/bin directory for later use. I added some clean-up commands to make the image smaller. You can omit them if you want.

FROM ubuntu:22.04

RUN apt-get update && \
    apt-get install -y git curl && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/* && \
    curl -sL "https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64" \
        --output /tmp/vscode-cli.tar.gz && \
    tar -xf /tmp/vscode-cli.tar.gz -C /usr/bin && \
    rm /tmp/vscode-cli.tar.gz

CMD [ "code", "tunnel", "--accept-server-license-terms" ]

With the above CMD layer, the container will run VS Code Remote Tunnels when it starts.

Build and Run

Open the terminal and cd to your Dockerfile's directory. Then run the following command to build it:

docker build -t yourname/container-tunnel

When the command finishes, you will have an image in Docker. Let's run a container from it:

docker run --detach \
    --volume your-workspace-volume:/home/workspace \
    --workdir /home/workspace \
    --name your-container-tunnel \
    yourname/container-tunnel:latest

Notice in the above command that we mounted a named volume to the /home/workspace directory in the container. By doing this, we can maintain our workspace even when the container is removed. Then we can mount the volume to another container whenever we want.

Now a container called your-container-tunnel is up and running. Let's print out the logs to see what it has for us:

docker logs -n 50 your-container-tunnel

You will see something similar to this:

*
* 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).
*
To grant access to the server, please log into https://github.com/login/device and use code ****-****

Notice the 8-character code at the end (which I have obscured here). Visit the link and enter the code to authorize VS Code.

After clicking Continue, GitHub will then ask you for authorization, like the following screen:

Click Authorize and then we're good to go.

Go back to the terminal and run the logging command again:

docker logs -n 50 your-container-tunnel

You will see the assigned name of the tunnel:

[2023-01-01 05:20:30] info Creating tunnel with the name: the-assigned-name-of-your-tunnel

Open this link in your browser https://vscode.dev/tunnel/the-assigned-name-of-your-tunnel

Congratulations! You have established a remote tunnel. All the works on your host machine are done.

Access the Tunnel

Visit the link as instructed to open a VS Code session in your PC, tablet or smartphone browser.

Or, you can open the native VS Code and install the Remote - Tunnels extension, then connect to the tunnel from it. Read more about how to use the extension and how to remove the tunnel here.

That's all folks! I hope you enjoy this tutorial and have fun coding.