synology の Docker で code-server を動かす

タブレットをせっかく買ったので個人開発をタブレットでもできるようにということでいろいろと調べてみる。

coder っていう Web IDE が見つかり、それはどうやら VS Code を動かしているものっぽい。その coder が出している code-server ってので Docker で動くらしいのでやってみた。

自分の環境では、Docker と Synology NAS のリバースプロキシを使っているが Docker だけの場合は R.P. 部分は読み飛ばせばいい。リバースプロキシで SSL しているので Docker 側では何もしていない。

Docker 設定

Docker の設定は、 Synology NAS にならう感じで書いてくので、いい感じで読み替えて Dockerfile なりを書いてほしい。

イメージ

codercom/code-server を duckerhub からダウンロードする

ポート

ここでは、ホスト側 9001 をコンテナ側 8080 になるように expose した。

ボリューム

ここは、dockerhub の説明とは少し変えた。というのもボリュームリンクなしで起動してみると /home/config の中には、.config や、 .local の他にもいろいろ保存されそうなだったのでざっくりと指定した。まとめると

ホスト側はあくまで自分の環境でのことなので、好きな場所に変えてください。

ホスト側コンテナ側
/volume1/docker/code-server/config/home/coder
/volume1/docker/code-server/project/home/project

ここまでで、 9001 ポートに http アクセスすれば使えるようになっている。

ログインパスワード

コンテナははじめからパスワード認証が有効になっている。そのパスワードは初期値が config.yaml に生成されるようだ。

場所は上の例で行くと、/volume1/docker/code-server/config/.config/code-server/config.yaml です。

リバースプロキシ設定

ここも、synology NAS のでやる場合の内容です。

外側 443ポートに対しネームベースで振り分けるように設定します。また、code-server は WebSocket を使っているらしいので ws が通るように設定します。

xxx.myds.me は、NAS に付属の DDNS ホスト名です。そのサブドメインを作成し、コンテナに流す設定をします。

コンテナは、先程 9001 を開けたので 9001 に流します。

[ソース側]

Protocol: HTTPS
Hostname: code.xxx.myds.me
Port: 443

[転送先 (destination) ]

Protocol: HTTP
Hostname: localhost
Port: 9001

[カスタムヘッダー]

WebSocket を通すためにカスタムヘッダーを設定します。 Synology のリバースプロキシの実態は nginx なのでその設定と言ったらわかりやすいでしょうか?

Custom Header タブに行き Create > Websocket を選択すうと結果こうなります

Upgrade => $http_upgrade
Connection => $connection_upgrade

ここまで終えると、

https:/code.xxx.myds.me/ でアクセルすると、VS-Code っぽい画面がでてきます。初回はパスワード認証で先程のパスワードを入力すると認証をパスします。

エディタで開くフォルダは、 ?folder=/home/project とかすればいいようです。場所によってかけなかったり、コンテナ停止で消えたりするので注意が必要ですね。

code-server のコンテナには python とか入っていないので、ちゃんとやりたければ別のコンテナかサーバーに ssh したほうがよさそう。直接コンテナにインスールしても消えてしまう。(コンテナの / をどっかにマウントするのもちょっとなんだし)

参考

codercom/code-server – Docker Image | Docker Hub

Install – code-server Docs

Websoc kets for Synology DSM – Matthias Lohr – Synology のリバースプロキシで websocket を通す方法