code-serverはぶっちゃけていうならクラウド版Visual Studio Codeです。

最近話題の coder.com というサイトで使われてるコードが、code-server としてMITライセンスでオープンソースになりました。

coder.com については、ブラウザでVS codeが使えるクラウド IDEの大本命「Coder」という@MegaBlackLabelさんの記事がわかりやすいと思います。

> ブラウザ上でほぼVS codeが使えるクラウドIDEサービス「Coder」
> 他のVS codeライクのクラウドIDEと異なるのは「拡張機能がそのまま使える」。大半の拡張機能を利用可能

などの特徴があります。

一部の本体機能・拡張機能は、まだ実装されておらず実行できないものもあります。

動かし方

ソースコードからビルドしてもいいですし、配布されてるバイナリを使っても動きます。

https://github.com/codercom/code-server/releases で配布されてるバイナリには、現時点では Darwin(macOS）版とLinux版があります。

$ tar zxvf code-server-1.31.0-20-x86_64-apple-darwin.tar.gz
$ cd code-server-1.31.0-20-x86_64-apple-darwin/
$ ./code-server
INFO  code-server v1.0.0
INFO  Additional documentation: http://github.com/codercom/code-se
rver
INFO  Starting shared process [1/5]...
INFO  Starting webserver... {"host":"0.0.0.0","port":8443}
WARN  No certificate specified. This could be insecure.
WARN  Documentation on securing your setup: https://coder.com/docs
INFO   
INFO  Password: XXXXXXXXXXXXXXX
INFO   
INFO  Started (click the link below to open):
INFO  http://localhost:8443/
INFO   
INFO  Connected to shared process

code-serverというバイナリを起動するとサーバーが立ち上がります。http://localhost:8443/ で起動してるということなのでブラウザでアクセスします。場合によっては、SSLにまつわる警告が出てきたりしますが、https://github.com/codercom/code-server/blob/master/doc/self-hosted/index.md を参考にしてアクセスしてみてください。

うまくアクセスが出来たら、Enter server passowrdという表示がでてくるので、コンソール上に表示されたPasswordを入力してください。

これは色々とセッティング済みですが実際に動かしたcode-serverの画面です。localhostで動かす限りは動作速度はローカル版と変わりません。元々がElectron+HTML+CSS+JSで動いてたものが、ブラウザ経由になっただけなのでオーバーヘッドはほとんど無いでしょう。

ネットワーク経由だと使い勝手がどう変わるかは、coder.com を試してみたりするといいでしょう。

ソースコードからビルドする

ソースコードからビルドする場合には、注意点があります。

・ Node v8かv9にしか対応していない
・ ビルドにはそれなりのディスク容量が必要

何かしらの方法でNode v8を使えるようにしてください。お勧めはanyenv + nodenvです。

$ brew install anyenv
$ e$cho 'eval "$(anyenv init -)"' >> ~/.your_profile
$ exec $SHELL -l
$ anyenv install nodenv
$ exec $SHELL -l
$ npm i -g yarn
$ nodenv install v8.15.1

次に、GitHubからソースをcloneします。わざわざソースからビルドしたい人は改造したり、中身を読んだりしたい人でしょうから、自分のリポジトリにforkしてからクローンするといいかもしれません。

$ git clone .......
$ cd code-server
$ nodenv local v8.15.1
$ node -v
8.15.1
$ yarn
.....
$ yarn task build:server:binary

Node.jsのバージョンが8系であることを確認してから、yarn で必要なパッケージのインストールを行い、yarn task build:server:binary でバイナリをビルドします。

ビルドされたバイナリは、Macなら、packages/server/cli-darwin というファイルになります。

あとは、ダウンロードしてきたバイナリの時と同じ手順で起動できます。

動作環境

どういう風に動いているか気になる人も多いでしょう。

まず、VSCodeがアクセスするファイルはどこにあるのでしょうか？

それはcode-serverが動くサーバー上というのが答えです。code-serverが動いてるプロセスが直接アクセスできるファイルこそが、ブラウザ越しでアクセス出来るファイルになります。

code-serverのバイナリには起動ディレクトリを指定することができます。ちょうどVSCode が code <ディレクトリ> コマンドで起動できるのと同じです。

エディタの基本機能はブラウザ上のJavaScriptとして動作します。ファイルの編集自体はオフラインでも可能です。

新しいファイルを開いたり、ファイルを保存したり、拡張機能やIntelisenseなどはオンラインじゃないと動作しません。これらはcode-serverのプロセス内でやはりJavaScriptとして動いています。

ターミナルも、オンラインであればcode-serverのバイナリ経由で自由にシェルにアクセスできます。無制限でプロセスを起動し放題です。

・ code-server プロセスから直接触れるファイルのみ読み書きできる
・ 編集など一部機能はオフラインでも動作するが基本はオンライン
・ code-server 1プロセスはVSCodeの1ウィンドウに該当する

code-server経由でフルアクセス出来てしまうので、アクセス制限を掛けたい場合は何かしらの方法で制限する必要があります。サーバー上のCPU・メモリ・ディスク・ネットワークなどの資源を使い放題です。これは利点にも欠点にもなり得るポイントです。

コンテナと組み合わせる

coder.com はおそらくDockerコンテナか何かと組み合わせて動いています。ターミナルからUbuntuが見えるようですし。

code-serverは1バイナリでそのまま実行できるため、コンテナ上で動かす時も楽です。というかおそらくコンテナで動かすことを前提として設計されているのでしょう。

コンテナのリソースをクライアントからそのまま利用できるため、やろうと思えばAWS/GCPなどのめちゃくちゃ速いコンテナを用意してその上でcode-serverを動かすこともできます。

使う言語によりますが、VSCodeはかなり優秀なIDEであり、それがそのままブラウザ経由で使えるとなると、色々可能性が広がるのではないでしょうか？