トンネルによるリモート接続
リモート先のコンピュータでVS Codeのサーバ機能を実行し、リモートで仮想的にVS Codeを操作する形態です。
拡張機能「Remote – Tunnels」によって仮想的なトンネル接続を生成し、VS Codeあるいはブラウザからリモート先で開発できます（図11）。SSH接続のようにSSHサーバ機能が不要で、URLさえ分かればどこからでもリモート開発が行えるので便利です。ただし、リモート先での作業は少し煩雑になります。
［NOTE］トンネル
トンネル（トンネリング）とは、ネットワーク上に存在する2点を結ぶ仮想的な回線です。一般的に安全でないプロトコルのパケットを、安全なプロトコルのパケットでラップしてやり取りすることで、安全な通信を行います。VS Codeのトンネルでは、vscode.devとリモート接続先をトンネルで接続します。
この方法を使うにはMicrosoftアカウントあるいはGitHubアカウントが必要なので、持っていない人は「Microsoft account」か「Sign up to GitHub · GitHub」から、あらかじめ取得しておきましょう。
筆者はMicrosoftアカウントを使いました。アカウントの違いで利用できる機能に差異はありません。
なお、この機能はブラウザ版のVS Codeであるvscode.devによってホストされています。vscode.devと異なるのは、アクセスするのはあくまでもリモート先のコンピュータなので、vscode.devでは使えないターミナル等の機能も使えることです。vscode.devからトンネルでリモート先のコンピュータに接続しているので、コンピュータの機能を直接利用できるためです。
リモート接続先の準備
「Remote – Tunnels」の利用にあたり、まずはリモート接続先を準備しましょう。リモート接続先は、主に以下の2つの方法で準備します。
- デスクトップ版のVS Codeでトンネル機能を有効化する
- VS CodeのCLI版をインストールしてトンネルを作成する
前者は、リモート先が通常のPCなどの場合、後者はLinuxやコンテナなどGUIを持たないかリソースが非力な場合に使います。ここでは、前節のSSH接続と同様にUbuntu DesktopにVS CodeのCLI版をインストールして接続することにします。
CLI版のインストール先は、別途用意してください（/home/user/vscode-cliなど）。Ubuntu DesktopでFirefoxなどのブラウザを使ってダウンロードしたファイルを展開するか、以下のコマンドで直接ダウンロード、展開してください。実行可能なcodeファイルが存在し、実行してバージョン情報が表記されればOKです。
$ wget -q -O- 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' | tar -zxf - $ ./code --version code 1.97.0 (commit 33fc……1016)
トンネルの作成
codeコマンドが使えるようになったら、トンネルを作成します。トンネルは、code tunnelコマンドを実行して作成します。最初に、Microsoftアカウントを使うか、GitHubアカウントを使うか尋ねられるので、使いたい方をキーで選択してください。
$ ./code tunnel * * 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). * ? How would you like to log in to Visual Studio Code? › ❯ Microsoft Account どちらかを選択 GitHub Account
前述の通り、筆者はMicrosoftアカウントを指定しました。GitHubアカウントを指定する場合も、以降の手順は基本的に変わりません。
認証のために、指定するURL（https://microsoft.com/devicelogin）にブラウザでアクセスして、指定するコード（ここでは以下のXXXXXXXXXX）を入力せよと指示されるので従います。認証は、リモート接続先にこだわらずどこで実行しても構いません。
✔ How would you like to log in to Visual Studio Code? · Microsoft Account To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code XXXXXXXXXX to authenticate.
ブラウザで、指定されたコードを入力します（図12）。
このあと、場合によってはアカウントの選択画面になることもあるので、その場合にはサインインするMicrosoftアカウントを選択してください。
最後に、「このウィンドウは閉じてかまいません。」と表示されれば認証は成功です（図13）。
ブラウザから離れて、ターミナル操作に戻ると、マシン（リモート先のコンピュータ）の名前を尋ねられるはずです。他と重複しない限り、20文字以内で好きな名前を付けることができます。筆者は、「nao-ubuntu-88」としました。
トンネルが作成され、表示されたURL（ここではhttps://vscode.dev/tunnel/nao-ubuntu-88/home/nao/vscode-cli）を開けと指示されます。
? What would you like to call this machine? (nao-parallels-virtua) › nao-ubuntu- ✔ What would you like to call this machine? · nao-ubuntu-88 [2025-02-10 18:23:14] info Creating tunnel with the name: nao-ubuntu-88 Open this link in your browser https://vscode.dev/tunnel/nao-ubuntu-88/home/nao/vscode-cli
ブラウザからの接続
ここでも、ブラウザはどこで開いても構いません。ブラウザで開くと、vscode.devのような画面となります。コマンドパレットが自動的に開き、「このトンネルを開始するために使用したアカウントの種類は何ですか?」と聞かれるので、トンネル作成時に指定したものを選択してください（図14）。
「拡張機能: 'Remote - Tunnels' が Microsoft を使用してサインインしようとしています。」とポップアップするので、［許可］をクリックします。GitHubアカウントを選択した場合には、「Microsoft」の箇所は「GitHub」となります（図15）。
再び、アカウントの選択画面となったら先ほどサインインに使用したアカウントを選択します。問題なければ、拡張機能VS Code Server」が自動的にダウンロードされてインストールされます。
フォルダーの作成者を信用するか？という、いつもの画面が表示されるので、［信頼する］をクリックすれば準備完了です（図16）。
ここで、ターミナルを開くこともできます。アクティビティバーのハンバーガーメニューアイコンをクリックして、［ターミナル］－［新しいターミナル］を選択します。プロンプトがリモート先のものであることが確認できます（図17）。
ローカルのVS Codeからの接続
冒頭で拡張機能「Remote - Tunnels」をインストールしているので、ローカルのVS Codeからトンネル経由でリモート先に接続することもできます。
VS Codeを起動してリモート エクスプローラーを表示させると、［リモート (トンネル/SSH)］の［Tunnels］に、リモート側で作成したトンネル（この場合はnao-ubuntu-88）が存在し、実行中であれば「実行中」と表示されます（図18）。
「nao-ubuntu-88」にマウスカーソルをホバーさせ、右矢印アイコンをクリックすると、リモート先に接続されます。ファイル エクスプローラーには「リモートに接続しました。」と表示され、ステータスバーには接続しているトンネルが表示されます（図19）。
ローカルのVS Codeにインストールされている拡張機能は、SSH接続と同様にリモート先のVS Codeにもインストールできます（図20）。
設定も、SSH接続と同様にリモート先に独自に保存できます（図21）。保存先は、SSH接続と同じく~/.vscode-server/data/Machine/settings.jsonとなります（Linuxの場合）。
リモート接続が不要になったら、SSH接続と同様に［ファイル］－［リモート接続を閉じる］を選択してリモート接続をクローズしてください。
今回登場のショートカットキー
なし
まとめ
今回は、一般的なLinuxマシン、Raspberry Piなどの非力なコンピュータ、Dockerコンテナなどにリモート接続し、どこからでも開発、デバッグができる方法を紹介しました。
次回からは、プログラミング言語やフレームワーク別の開発環境構築について、まずはPythonを紹介します。
