はじめに
これはスゴイ、最高です。久しぶりに記事を書く。
最近TypeScripでWebサービスの開発をはじめた。
TypeSciptのコンパイル監視を動かしながらだと、4コア/8GBの MacBookProだと、 ファンが途中で悲鳴を上げる。 コンパイルにかかるリソース不足のため、カクカクと動作して、インタラクティブにVSCodeが反応してくれない。 ただ、自宅の12コア/64GBのゲーミングPCでの開発では全く支障はでない。
じゅあ自宅で開発をすればいいのだけれども、昼間は外出先で作業しているので、MacBookProから開発したい！
そこで、最近話題になり始めた、VSCode Insiders を利用して、VSCodeからsshをすることで、外出先のノートパソコンから自宅のサーバにアクセスして、 サーバ上でTypeScriptのコンパイル監視を走らせながら、ノートPCのVSCodeで開発を進めることに成功しました！
Visual Studio Code Insiders とは
まず、VSCode Insidersとはなんぞやだけれも、これはVSCodeからリモートの開発環境に接続して、開発ができるというもの。 よくあるユースケースはssh接続だが、Dockerコンテナに接続して開発することもできるらしい。
公式の紹介は以下。
セットアップ
自宅サーバを外部からSSH接続可能にする
過去に記事にしました。
自宅のUbuntuサーバに外からsshでアクセスする | Futurismo
VSCode Insiders インストール方法
特徴として、VSCodeとVSCode Insidersは別々のアプリとしてある。これは、拡張機能の管理の仕組みが違うためだ。
インストール方法は以下を参照。この記事では省略します。
Developing on Remote Machines using SSH and Visual Studio Code
実践
さあ、これで tsc -wなり、react-scripts start なりを起動して、コンパイル監視をサーバで動かす。
この状態で、クライアントのVSCodeから接続してTypeScriptのコーディングができた！ 補完もサクサク動作して、思わずニンマリ。
気になるところは、ネットワークの遅延によってインタラクティブ性がないのではということだ。 全くリアルタイムかというと、そうではない。 しかし、サーバ接続のネットワーク遅延と、ローカルコンパイルによるパソコンのスローダンを比べると、 サーバ接続したほうが、ずっと快適にコーディングすることができるかことがわかった。
ngrokの導入
Web開発なので、localhostで開発サーバのプロセスを立ち上げることがよくあると思う。 わたしも、React開発をしているので、localhostの3000ポートにブラウザからアクセスして開発をしている。 リモート開発では、外部からlocalhostにもアクセスできるようにしないと画面が見られない。
localhostに外部からアクセスする方法はいろいろあるものの、一番カンタンなのは、ngrokをつかってしまうこと。
これも詳細は省くものの、３分も頑張ればlocalhostを外部に、セキュアに、公開することができる。
ワークステーションの時代くるか？
わたしがエンジニアをはじめたときは、Unixワークステーションにtelnetで接続して、Emacsを立ち上げて開発をしていた。 C言語の組込み開発だったし、Vxworksという商用OSを利用したため、コンパイルするための開発環境がローカルPCで用意するのが大変だった。
それからJava開発になって、Eclipseをつかうようになった。そのため、ローカルにソースを落としてきて開発をした。 ソースは共有フォルダにおいたり、scpで同期したりしていた。
ワークステーションからローカル開発へと移ってきたが、またワークステーションへと流れができるか？
しかし、ssh接続してリモート開発するという発想は、Emacsでは古くからTrampという技術があったり、 EclipseやJetBrainsのIDEでも、プラグインがあった気がする。
それでもワークステーションの時代が来る気がするのは、VSCodeの圧倒的なコーディングの快適さと簡単さにあると思う。
Cloud IDEみたいなものもあるけれども、 もっと手軽にVSCodeで接続するだけで使えるクラウド型コンテナを提供する開発環境提供サービスがあらわれるかもしれない。