はじめに
この記事は、 フューチャー Advent Calendar 2024 24日目の記事です。
メリークリスマスイブ！こんにちは、おーじぇい (@920OJ) です。
みなさんはサンタさんに何をお願いしましたか？私はFLEXISPOTの昇降テーブル E7 と、同じくFLEXISPOTのオフィスチェア C7 という腰痛解消セットにしました。まだ20代も半ばだというのに、情けない話ですね。さらに、今年のサンタさん(Amazon)は仕事が忙しいらしく、クリスマスに間に合わないみたいです。かなしいね。
さて、今年のアドベントカレンダーでは 一昨年 と同様VS Codeネタを書きます。題して、「VS Code Remote Tunnels」でどこでも快適リモート生活」です！
経緯
開発マシンが多すぎる！
みなさんのご自宅には、何台のマシンが積まれていますか？我が家にはMac機2台、Windows機3台、Linux機2台が転がっています。だからすぐにお金が無くなっちゃうんですね。
（ちなみに余談ですが、スマホはiOS・Androidともに4台ずつストックしてあります。）
話が逸れましたが、このような複数台持ちユーザにとって困るのが、 開発環境のセットアップ です。例えば、いつもの持ち歩き用にバッテリが長く持つApple Silicon搭載Macbookを、寝室用にUbuntuを入れた軽量Let's Noteを、はたまたガッツリ作業する用にWindowsのデスクトップPCを……とやっていると、開発環境の用意だけで日が暮れてしまいます。
Linuxのサーバに Remote Tunnels で接続するという選択肢
ここで提案したいのが、VS Code の機能である Remote Tunnels です。
これは何かというと、VS Codeのバックエンド部分を別のサーバ・マシン等で稼働させておき、そのサーバに対してクライアントからトンネル経由で繋ぎにいくことができる技術です。
（公式ドキュメント「Developing with Remote Tunnels」 より引用）
このサーバの中に、編集対象となるソースコードやその実行環境、ワークスペースの拡張機能をセットアップしておけば、後はどのデバイスから繋いでも、同じ環境上でプログラムを編集・作動させることができます。さらに、このサーバへの接続は Dev Tunnel 機能 が用いられており、PublicなIPアドレスを用意したり、ポート開放したりという手間なく、インターネットを経由して安全に接続できるのです。
つまり一言で言えば、「どこからでも安全に接続可能な開発環境」を構築できるようにするやつです。これを開発者なら誰しも契約しているであろうVPSサーバや、自宅サーバにインストールしておけば、開発環境の統一が可能！というワケですね！
ウチの構成を晒してみる
世の中にはセットアップ記事が多く出回っているので、具体的な導入方法はそちらに譲ることとし、ここでは筆者の構成であったり活用例等を語ります。
まずサーバ側は、KAGOYA CLOUD VPSの 4vCPU・4GB RAMプランのインスタンスを契約し利用しています。KAGOYA CLOUDのVPSは日本国内のVPSであれば（昨今の円安事情もあり）最安レベルのものが提供されており、4vCPU/4GB RAM/80GB SSDで、月1,650円です。よっぽど重いビルドをせず通常レベルのWeb開発であれば、このスペックで問題はないように感じます。
そのサーバへ、見ての通りmacOS・Windows・Lubuntu・iPadOSという多種多様なデバイスから接続しにいきます。VS CodeをインストールできるマシンであればインストールしたVS Codeから接続し、インストールしていない・できないものはWebブラウザから接続できます。
このサイトから「リモートトンネルに接続」ボタンを押下し、GitHubアカウントもしくはMicrosoftアカウントでログイン・セットアップ済みのサーバを選択すれば、あとはもう通常通りにVS Codeを使うことができます。
このスクリーンショットは例のコミケで頒布する新刊の作業の様子ですが、どこからでも同じ環境を使うことができたため、冗談抜きでRemote Tunnelsのおかげで締め切りに間に合わせることができました。ありがとう Remote Tunnels……
使ってみた所感
速度面
まず気になるところであろう速度の問題ですが、やはり一度トンネルを挟んでいるからか、素のSSH接続によって動かすのとではラグが大きいように思います。特にターミナルを動かすときに、一度コマンドが灰色になり（入力はされる）サーバ側に到達すると白になるという挙動をします。慣れればそこまでですが、ローカルのターミナルに入力するようにEnter連打→lsを繰り返しながらcdで高速移動する、というような玄人の方にはやや物足りないのかなと感じます。
一方でファイルの編集自体は、ファイルを開いてしまえばローカルでファイルを触るのと全く変わりありません。豊富な拡張機能を使いつつ、サクサクコーディングできます。
ポートフォワーディングがすごい
このVS Code Serverが動いているサーバ上で、例えば npm run dev (vite preview)等のコマンドで開発サーバを立てた時、（ファイアウォール等で開放していなければ）外部からアクセスできません。
しかしRemote Tunnels では、アプリケーションが動いているポートを検知すると、自動で devtunnels.ms ドメインでトンネルを貼ってくれて、外部からアクセスできるようになります。しかも誰からでもアクセスできるわけではなく、Remote Tunnelsを有効化しているアカウントでログインすることでアクセスできるようになります。（いわゆる、Zero Trustってやつですね）
iPadでコーディングは意外とできる
先述の vscode.dev はPWAに対応しており、iPadのSafariで開き「ホーム画面に追加」をすることで、通常のネイティブアプリのようにVS Codeを開くことができます。ここでRemote Tunnelsを繋げば、iPadがガチ開発環境に早変わりです。
あとはBluetooth接続できるキーボードを繋げれば、どこでも開発環境の出来上がりです。ただ、Web開発で欲しいDeveloper Toolsが使えなかったり、Split Viewが使いづらいというのもあるので、これだけで開発が完結するかというとやや物足りない感があります。CLIツールを作ったり、ロジックやSQLを組んだりするなら及第点というところでしょうか。
終わりに
これで良い子のみんなのプレゼントは決まりましたね。そう、KAGOYA CLOUDのVPSです。
……と、冗談はさておき、Remote Tunnelsを使うことで、長年の苦労であった複数環境での開発環境統一は簡単に実現できました。中央集権的ですが、どれか一つにしっかりとした開発環境を作っておき、そこへつなぎに行くという構図を実現できれば、意外と便利なものですね。
ぜひ皆さんも快適な開発環境構築のために、試してみてください！メリークリスマス！