CLEARTEXはカメラ・オーディオ・PCなどガジェットのレビューをメインとしたブログメディアです。
ブラウザ上でVScodeが使えるcode-serverを試してみる

ブラウザ上でVScodeが使えるcode-serverを試してみる

ブラウザ上でVisual Studio Codeが使えるWebサービスのCoderのオープンソース版で、好きなサーバ上で動作可能な「code-server」を動かしてみました。

code-server – GitHub

スポンサーリンク

環境

docker版もありますが、今回は普通にバイナリをもらってきて動かします。

  • Azure D2S v3
  • Ubuntu 18.04 LTS

気分的にクラウドに置いて試したかったので、とりあえずAzureで動かしています。

インストール、起動

# cd
# mkdir code
# cd code
# wget https://github.com/codercom/code-server/releases/download/1.903-vsc1.33.1/code-server1.903-vsc1.33.1-linux-x64.tar.gz(適宜最新版にしてください)
# tar xvf code-server1.903-vsc1.33.1-linux-x64.tar.gz
# cd code-server1.903-vsc1.33.1-linux-x64
# ./code-server /PATH/TO/HOME/DIR/ -p 任意のポート番号 --password 任意のパスワード --cert /PATH/TO/fullchain.pem --cert-key /PATH/TO/privkey.pem

初めはCentOS 7.5で試したのですが、yumで入るものより新しいバージョンのgccに付随するライブラリを要求されます。gccの最新版を手元でmakeするのも面倒だったので、今回はUbuntu 18.04に変更。あっさり動きました。/PATH/TO/HOME/DIR/で指定したディレクトリが、VScodeでターミナルを開いた際のホームディレクトリとなります。/root/や、/home/ユーザー名/等に指定しておくのが無難です。適当に設定すると環境変数で面倒なことになります。(pyenvが動かなくて困った)

特に設定しなければhttpsで動作し、nginxなどでリバースプロキシを組まずともSSL対応が可能です。ただ、もちろんSSL/TLS証明書がないと意味がないので、今回はLet’s Encryptで発行した証明書を使用しました。Let’s Encryptは以下の操作の後、いくつか簡単な質問に答えるだけで証明書を発行してくれます。

# wget https://dl.eff.org/certbot-auto  
# chmod a+x certbot-auto
# ./certbot-auto

サーバー起動時には自動で起動してほしいので、Systemdのサービス化します。

  • 起動用スクリプトを作る
# vi /opt/codeserver.sh
#!/bin/bash
/PATH/TO/code-server /PATH/TO/HOME/DIR/ -p 任意のポート番号 --password 任意のパスワード --cert /PATH/TO/fullchain.pem --cert-key /PATH/TO/privkey.pem

スクリプトの内容は先程の起動コマンドです。絶対パスで書いておきましょう。

  • ユニットファイルを作成
# vi /etc/systemd/system/codeserver.service
[Unit]
Description = codeserver daemon

[Service]
ExecStart = /opt/codeserver.sh
Restart = always
Type = simple

[Install]
WantedBy = multi-user.target
  • 自動起動に設定
# systemctl enable codeserver
# systemctl start codeserver

以上で、サーバーを再起動しても自動でcode-serverが立ち上がるはずです。

iPadで実質使えない以外はかなりよい

ブラウザで起動コマンドで指定したポートにアクセスすると、見慣れたVisual Studio Codeそのものが現れます。動作も特にもたつきなど気になる点はありません。そもそもVScodeがElectron製なので当然な気もしますが。拡張機能類も、自分が普段使っているものに関しては問題なく使えています。日本語化プラグインが使えませんでしたが、普段からVScodeを使っている方は特に困ることはないかと思います。

そして、ターミナルを開くと、(当然ですが)code-serverが起動しているサーバーに接続されます。(つまり、code-serverに入ってしまえばサーバー自体に悪さをし放題なので、パスワードは強固なものにしておきましょう)あとはpythonユーザーならpyenvを入れてvenvして実行環境を整えれば開発できますね。全て外部のサーバー内で完結するため、どの端末から開いても同じ環境がVScode付きで使えるのは便利です。自宅のPCから書いていたコードに、外に持ち出したラップトップでブラウザから開くだけで取りかかれます。クライアント側のスペックは必要ないので、ChromeBookとかでも快適に使えるのでは。

ちなみに、最近のアップデートでPWAに対応したようで、iPadのSafariからホーム画面に追加すると、「iPadでVScodeが動いてる」っぽくなり、テンションが上がります

iPadでVScodeが動いてる(っぽい)

が、Bluetoothキーボードの方向キーが効かないという致命的な弱点があるので、実用的ではないです。(Vimキーバインドの拡張を入れればいいじゃん、と思ったのですが、Escも効かなくて諦めました)この仕様はCloud9等の他クラウドエディタでも同様の仕様らしいので、iPadでモリモリプログラムが書けるようになるのはもう少し先になりそうです。

とりあえず、PCから使う分には全く不満なく使えます。今回のようにクラウド上のサーバーに置いてどこからでも使える環境が欲しいであるとか(それならCoderという選択肢があるけども)、研究室や自宅に置いている計算用サーバーにインストールしてローカルの別PCから使うなどには便利だと思います。iPadで十分に使えるようになればブレイクスルー感があるので、頑張って欲しいところです。