Run VS Code Remote Tunnels in a container
Tags: vscode, docker, tutorial
Published: 2023-01-01 05:43:38

[Visual Studio Code](https://code.visualstudio.com/) 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](https://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](https://code.visualstudio.com/docs/remote/tunnels) 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](https://www.docker.com/get-started/).

**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.

```Dockerfile
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:

```bash
docker build -t yourname/container-tunnel
```

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

```bash
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:

```bash
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.

![Login screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zf43bpxgtuzug69nz07w.png)

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

![Authorize VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsac4pr8mbjjdnj673km.png)

Click Authorize and then we're good to go.

![Result screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkwkt1r9zh2iljb4ei2y.png)

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

```bash
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](https://code.visualstudio.com/docs/remote/tunnels#_remote-tunnels-extension).

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