code-server でクラウド上のマシンに VSCode を入れる

Microsoft 本家が Visual Studio Codespaces (旧称 VS Online) なんかを始めて、「ブラウザ上で動く VSCode」というのが結構イイカンジになってきた。

そのような仕組み自体は以前から複数あり、中でも code-server は自分で好きなマシンにインストールできて安定しているので、こいつを使ってクラウド上に VSCode 開発環境を整えてやることにする。

目次

完全無料で実現するオンライン VSCode 開発環境

まず、完全無料で使えるクラウドサーバ (IaaS) を用意しよう。代表的なのは以下の2つ。低スペックではあるが、Docker もインストールできているし、簡単な開発ならこなせる。

自分は今回、OCI 上に作った Always Free Compute の、Ubuntu OS で作業することにした。この Ubuntu には GUI 環境は用意していない。

このマシンには Public IP を付与してあって、以前紹介した「Remove SSH」拡張機能を使って、手元の PC にインストールした VSCode から SSH 経由で、この IaaS を参照したりはしていた。

今回は code-server というモノをインストールして、VSCode 自体を IaaS に載せてしまうので、手元の PC はブラウザさえあれば良い。最近は Chromium Edge が割と快適だったりするので、まっさらな Windows10 のブラウザだけ使って開発することも出来たりするかもしれない。

ちなみに、Coder というのはこの code-server を使ったエンタープライズ向けのサービス。

code-server を導入する

というワケで、Ubuntu に code-server をインストールする。

念のため、CPU の種類を確認しておく。Always Free な OCI Compute は AMD64 であった。

$ lscpu

Linux AMD64 用のインストーラを使い、次のようにインストールを進めていく。

# インストールする
$ curl -fOL https://github.com/cdr/code-server/releases/download/v3.4.1/code-server_3.4.1_amd64.deb
$ sudo dpkg -i code-server_3.4.1_amd64.deb
# 起動する
$ systemctl --user enable --now code-server

コレで http://127.0.0.1:8080/ に、code-server が起動した。

このままではローカルホストでしかアクセスできないので、次のように設定変更することで、インターネット上に公開できるようにする。このままでは HTTP 通信になるし、パスワードが漏洩したら触り放題なので、当然ながらセキュリティには注意。

# 設定ファイルは以下に自動生成されている
$ cat ~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: xxxxxxxxxxxxxxxxxxxxxxxx
cert: false

# 次のように変更する
$ cat ~/.config/code-server/config.yaml
bind-addr: 0.0.0.0:8080
auth: password
password: MY-PASSWORD
cert: false

# 再起動する
$ systemctl --user restart code-server

bind-addr を 0.0.0.0 にすることで外部公開できる他、password を任意の文字列に変更できる。

あとはクラウド側のファイアウォールルールを確認して、8080 ポートへのアクセスを許可するようにしておく。

IaaS の Public IP を指定して、ブラウザで次のような URL にアクセスすると、code-server のログイン画面が開くはず。

ほとんどのことは VSCode と同じようにできる

code-server の使い心地はほぼ本家 VSCode と同じ。

ほぼ遜色ないが、細かな違いもある。ザッと使ってみて気付いた違いは以下のとおり。

とはいえ、ほとんどの拡張機能は動作するし、困ることは極めて少ないと思う。

何より、開発環境、作業中のファイルを含めて全てクラウド上に置いておけるので、作業端末を選ばないメリットが勝っている。コレはどんどん活用していこう。