はじめに

兼ねてから目をつけていたcode-serverを動かして、どこでもコーディング環境を作ってみました。

ドメインを貼ってる自宅サーバーに、nginx経由でcode-serverにアクセスする流れを作ろうとしたら、ポートのプロキシ(?)でつまづいた話です。
こんなやり方をする方はなかなかいないと思いますが、備忘録のために。

そもそもcode-serverとは？

ざっくり言うと、みなさんおなじみVSCodeをブラウザから開けるオンラインエディタです。
https://github.com/cdr/code-server
GitHubを開いた方は見て分かる通り、Docker上で動きます。一時期はSaaSとして、Coderというものが無料で使えた時期もあるようなのですが、いまはエンタープライズ向けになっているようです。

ちなみにMicrosoftが昨年11月に、Visual Studio Onlineというオンラインエディタを公開していますね。（Announcing Visual Studio Online Public Preview）
ただ本家はAzureの月額課金が必要なので、ケチ臭い学生の僕としては無課金で使いたいところ。

というわけで、今回自宅で稼働させているサーバ機にcode-serverを導入してみました。

動作環境

macOS 10.15.2
Docker for Mac
Nginx

動作環境がmacOSとDocker for macを使っている点に注意してください。
code-server自体はCentOSなどでも動かせますが、今回掲載しているコードが一部Docker for macでしか動作しないので、その辺はよしなに解釈してください。

1. とりあえずcode-serverを動かす

1-1. docker-compose.ymlを作る

動作確認をするため、とりあえずcode-serverをdockerから起動します。と言ってもimageがあるので、そのまま使うだけです。
手軽に起動するためにdocker-compose.ymlを作りました。そのままdockerコマンド叩いても使えます。

docker-compose.yml

version: "3"
services:
  code:
    image: codercom/code-server
    restart: unless-stopped
    command: code-server
    environment:
      PASSWORD: "<任意のパスワード>"
    ports:
      - 8080:8080
    volumes:
      - ./projects:/home/coder/project
      - ./code-server:/home/coder/.local/share/code-server

./projectsが、code-serverのワークディレクトリです。./code-serverは、vscodeの設定や拡張機能なんかが入ります。
今回はカレントディレクトリにディレクトリ作ってマウントしていますが、docker内部にvolume作っても良いかもしれないです。

環境変数PASSWORDは、ログインの時に必要なパスワードになります。
パスワードを設定しない場合は、

command: code-server --auth none

とするとパスワード認証なしで使えます。

1-2. 起動する

魔法の呪文。

$ docker-compose up -d

あとはブラウザから、 http://localhost:8080を開くと……

ここで先ほど設定したパスワードを入力。

はい、動いてる。終了。

2. 外からアクセスする

今回はただ動かすだけではなく、外からアクセスするためにもうひと工夫します。
図で表すとこんな感じですね。nginxもDockerで動かしています。ちょーわかりやすい。

一点だけ気にしなければならないのが、ポート開放です。
自宅のモデムは大人の事情でNTTのIPv6 over IPv4になっているのですが、実はこれ80番ポート含め自由な番号を開放することができなくなっています。

とはいえ全くポート開放できないわけではないのです。
ブラウザで開くときに example.com:99999のようにポートを指定すれば良いだけ。
かっこ悪いけど、自分で使うためだけの自宅サーバーなので気にしない。かっこ悪いけど。

2-1. nginxを設定する

サーバー上でnginxをロードバランサとして動かしているので、そこに設定を加えます。
当初の設定はこんな感じに。

code.conf

# SSL関係の部分など、一部端折ってます。

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
  listen 80;
  server_name code.example.com;

  location / {
    proxy_set_header Host $host;

    # WebSocket
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    proxy_pass http://host.docker.internal:8080;
  }
}

code-serverはWebSocketを使っているので、そのための設定を記載しています。
こんなもんで動くやろ。いざレッツチャレンジ。

なんやて工藤🤔

code.example.com:9999で開いたのですが、しばらくロードした後で、上のような画面に。
よく見ると、code.example.com/loginにリダイレクトされているようです。

せっかく指定したポート番号が消えとる!!!

2-2. 解決策

code.conf

# SSL関係の部分など、一部端折ってます。

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
  listen 80;
  server_name code.example.com;

  location / {
-   proxy_set_header Host $host;
+   proxy_set_header Host $http_host;     

    # WebSocket
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;

    proxy_pass http://host.docker.internal:8080;
  }
}

これだけの話でした。いや、これだけを探すのにかなり苦労したんだけども。

$http_hostを用いることで、リクエスト元のポート番号をそのままヘッダーに付けてくれるので、リダイレクトのときにもポート番号を引き継いでくれるようです。

無事、アクセスできました🎉

番外編：iPadで使ってみた

Safariでアクセスして「ホーム画面に追加」をすることで、PWAにして使えるとのことだったので、試してみました。

不具合があったり、そもそもインターフェースがタッチパネル向けじゃなかったりと多少使いにくさはありますが、移動時間にちょっといじったりするのにはとても良さそうです。

ちなみにスクリーンショットでgitを使っていますが、これは以下のような感じでvolumeをマウントしてます。:roは、ReadOnlyってことですね。

docker-copmose.yml

...
volumes:
  - ./projects:/home/coder/project
  - ./code-server:/home/coder/.local/share/code-server
+ - ~/.gitconfig:/home/coder/.gitconfig:ro
+ - ~/.ssh:/home/coder/.ssh:ro

おわりに

今回いろいろ調べてる間に見つけたんですが、本家VSCodeでもブラウザ実行できるようになったらしいですね。
とは言ってもまだテスト環境としてということみたいですが。

オンラインエディタはブラウザで実行できるので、iPadみたいなタブレット端末やマシンスペックの低い端末でも開発できるメリットがあります。
ネットに繋がなきゃいけない制約はありますが、もうすぐ5Gも一般利用できるようになりますし、もっと身近な存在になっていくんじゃないですかね。

自宅サーバーで Docker + Nginx + code-serverを動かそうとした話