いしぐめも

プログラミングとかしたことを書きます。

Visual Studio Code の Tunnel 機能が便利

Visual Studio Code に新しいリモート開発「Tunnels」が追加されました。 これが便利すぎるので、是非とも使っていきたいなと思うんですが、同時に懸念点もあるのでそこらへん書きたいなと思います。

Remote Tunnels とは

Visual Studio Code (以下、VSCode) には今までも「Remote - SSH」「Remote - WSL」「Remote - Containers 」などといったリモート開発機能が提供されてきましたが、 今回は新たな接続方法として「Tunnel」が追加されました。

code.visualstudio.com

Remote Tunnels 概要(https://code.visualstudio.com/docs/remote/tunnels から引用)

(・・・この画像見ても何がSSHの場合と変わるのかわからんw)

というわけで、公式ページで確認してみると、

  • リモート側でトンネルを作る
  • そのトンネルを経由してSSH接続が行われる
  • 認証はGitHubのアカウントを通して行われる

ということみたいです。

メリット

一番のメリットは、リモート側で「外からの通信を受ける設定を行う必要がない」ことだと思います。この「外からの通信を受ける設定」ですが、

などでしょうか。

デメリット

  • トンネルを作るにあたって、トンネルの接続先を全面的に信用する必要がある。

ことに尽きるのかなと思います。トンネル経由でSSH接続を許可するなんて、自分でバックドアを仕掛けているようなものですよね。

こういうメリット・デメリットを勘案したうえで、使用可否を判断したいところです。

使い方

ターミナルでログイン

まずはターミナルでリモート側にログインしましょう。

「え?SSHで繋げないのにターミナルでログインってどういうこと?」となると思いますが(自分もちょっと思いました)、これは 踏み台からの接続でもOK です。

「え??それってSSHで多段接続すればいい話では?」ってツッコミもあると思いますが、それはそうです。多段SSHで入れるなら多段でRemote - SSHしましょう…今回の踏み台からの接続は Azureで言うところのBastion接続みたいなの を考えてください。

「え?ベンダが提供するWeb画面ベースのコンソールでもいいの?」に対しては「はい」です。Azureのシリアルコンソールでもいけます

CLIダウンロード・展開

ログイン出来たら、「CLI」をダウンロードします。(・・・こんなの前からあった?)

https://code.visualstudio.com/Download

Download VSCode CLI

ここのダウンロードについては、ターミナル内で行ってほしいので、ブラウザで適当にダウンロード用のリンクを取得したのちに、wget なりでダウンロードしましょう。

ダウンロードできたら展開します。展開すると code というファイルが単体で出てくるので、いい感じの位置に置きましょう。(自分は ~/opt に置きました)

mkdir ~/opt
cd ~/opt
tar zxvf ../vscode_cli_alpine_x64_cli.tar.gz

トンネリング開始

展開出来たらトンネリングを開始します。

./code tunnel

すると、最初に利用許諾が表示され、GitHubのデバイス認証を行うように言われます。

GitHub Device Activation

表示されたURLを開いて、ターミナルに出てきた8桁の文字を打ち込むとcode tunnelで使用されるアカウントが紐づけられます(おそらく)

ブラウザで開く

そこまで完了するとターミナルには接続するためのURLが表示されます。それを開くと…

ブラウザ上でVSCodeが開く

こんな感じでブラウザから使えるVSCodeが開きます。GitHub Codespaces でお馴染みの画面ですね。

アプリから開く

拡張機能をインストールすることでローカルのVSCodeからも開くことができます。

marketplace.visualstudio.com

Select remote machine

できること・できないこと

もちろん、拡張機能を使用することはできます。

拡張機能のインストールと利用

これを利用することで、ちょっとしたlintを効かせながらスクリプト書いて実行したりするのには便利そうです。

が、さらに踏み込んだ使い方(ポート転送、Dev Containers)はできなさそうでした。今後に期待ですね。

使いどころ

軽く触ってみた感じ、Web開発でガッツリ使用するのは厳しいのかなという気がしました。というのも、やはりポート転送やDev Containersが使えないためです。

一方、拡張機能が使えるのはやはり強くて、軽いスクリプトを構文チェックしながら書いて実行してみるといった用途ではなかなか使えるんじゃないかなと思います。

前述した懸念点については、「開発環境での使用にとどめるべき」だと思いました。間違っても本番環境のDbをVSCode拡張機能で触るためにトンネリングで繋いじゃおうなどとは考えてはいけないですね(そんなことする人いないか)