Visual Studio Codeのリモートトンネルを試してみた

[アイスタイル Advent Calendar 2022](https://qiita.com/advent-calendar/2022/istyle) 18日目の記事です。

みなさんこんにちは！

ブラックフライデーでAlexaを買ったら机に2個、耳に1個Alexaがいる生活になった中村です。
（[これ](https://www.amazon.co.jp/dp/B08KGY97DT/ref=pav_d_fromAsin_B084TNP2B4_toAsin_B08KGY97DT)と[これ](https://www.amazon.co.jp/Echo-Buds-%E3%82%A8%E3%82%B3%E3%83%BC%E3%83%90%E3%83%83%E3%82%BA-%E7%AC%AC2%E4%B8%96%E4%BB%A3-%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%83%8E%E3%82%A4%E3%82%BA%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AA%E3%83%B3%E3%82%B0%E4%BB%98%E3%81%8D%E5%AE%8C%E5%85%A8%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%AC%E3%82%B9%E3%82%A4%E3%83%A4%E3%83%9B%E3%83%B3-with-Alexa-%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF/dp/B085WV8664/ref=sr_1_8?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=LL2VSHF0VX3T&keywords=Alexa&qid=1670903877&sprefix=alexa%2Caps%2C172&sr=8-8&th=1)を買いました。Alexa良いですね～家の家電と連携しているとかなり便利です。)

アイスタイルではアットコスメショッピングの開発等を担当しています。

## VSCodeのリモートトンネルとは

先日の[VSCode1.74のアップデート](https://code.visualstudio.com/updates/v1_74#_remote-development)にて個人的にリモート開発環境を構築するのが趣味（？）な私としては気になる記述がありました

それが「Remote Tunnels」です。

[こちら](https://code.visualstudio.com/docs/remote/tunnels)がリモートトンネル機能の記事なのですが、翻訳したものを抜粋すると

> Visual Studio Code Remote - Tunnels 拡張を使用すると、デスクトップ PC や仮想マシン (VM) などのリモートマシンに安全なトンネルを介して接続することができます。SSHを必要とせず、VS Codeクライアントからどこでもそのマシンに接続することができます。
トンネルは、あるネットワークから別のネットワークにデータを安全に転送します。
拡張機能がリモートマシンで直接コマンドや他の拡張機能を実行するので、ソースコードがVS Codeクライアントのマシンにある必要性を排除することができます。

ほうほう...ちょっとこれは試してみたいと思い、試してみることにしました。

## テスト環境
今回は「サーバー上にあるコードを急に修正しないといけなくなったが、出先で手元にはipadや[Sumsung DeX](https://www.galaxymobile.jp/apps/dex/)しかない！」みたいな状況を想定して、下記環境を作成してみました。

ホスト用VPS:Ubuntu22.04 （VSCodeのインストールと編集対象のコードを設置）
クライアント：Chromeブラウザ

(UbuntuへのVSCodeへのインストールは[こちら](https://www.karelie.net/ubuntu-debian-command-install-vscode/)の記事を参考にさせていただきました。ありがとうございます！）

## さっそく立ち上げてみる
下記コマンドで起動します。
```sh
$ code tunnel
```

![スクリーンショット 2022-12-15 003041.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2243029/88e03eb5-b7c9-6601-ebab-35eef00dce51.png)

お...「--accept-server-license-terms」を一緒に入れてもう一回実行してと言われました...
こういう形で規約に同意するパターンもあるんですね...

ということでもう一度
```sh
$ code tunnel --accept-server-license-terms
```

![スクリーンショット 2022-12-15 003109.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2243029/584e98fc-2f8e-e210-4cdf-08f1f6b23015.png)

(白塗りにの部分には8桁の認証コードが出てます）
githubと連携を許可するため、記載のURLを開きます。

![スクリーンショット 2022-12-15 003124.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2243029/465ad1ea-0755-b72c-6f44-4f60038f2a76.png)

ここに先程の8桁のコードを入力し暫く待つと...

![スクリーンショット 2022-12-15 003204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2243029/c2d3daa7-a558-2216-41a1-bb88bfef2d4b.png)

起動したようです！！このリンクをブラウザに入力します。

ブラウザ版VScodeが開くので、設定を同期すると...

![スクリーンショット 2022-12-15 005410.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2243029/4e61fd66-f315-5470-53d8-3d870570e233.png)

今までローカルで開発していたのと遜色ない環境が整いました！
ここで編集して、コミットしてプッシュしたり...一通りの動作は問題なく動きました。

## まとめ
リモートトンネルをバックグラウンドで起動しておくか、SSHをできるようにしておけばいつでもコーディングや編集ができる環境になりました...(すごい)
オンライン上に開発サーバーある場合や、ちょっとした設定ファイルの変更等もVimでやっていたものが「ちょっとリモートトンネルで編集するか」といった時代が来るかもしれないですね。

リモートトンネルは個人での使用を想定しており、複数人で同時使用するというのは想定していないようですが、色々な使い方が思い浮かぶ面白い機能でした。