はじめに
兼ねてから目をつけていた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コマンド叩いても使えます。
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
を開くと……
![スクリーンショット 2020-01-29 0.23.13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F265811%2F622a2bf0-fc4a-58e3-9877-3f0841336890.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c09ff6eb9592369f52bdd173bebb17a0)
ここで先ほど設定したパスワードを入力。
![スクリーンショット 2020-01-28 23.19.22.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F265811%2F5ad23ecf-2ef4-4bdb-70cb-68126374525b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3a096ae41ca07f70f7cb01f4d87484dc)
はい、動いてる。終了。
2. 外からアクセスする
今回はただ動かすだけではなく、外からアクセスするためにもうひと工夫します。
図で表すとこんな感じですね。nginxもDockerで動かしています。ちょーわかりやすい。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F265811%2Fbd1ddee7-fd84-e686-8b0b-a7c2f833a89b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f612364b6a1270e86790065d69105cc7)
一点だけ気にしなければならないのが、ポート開放です。
自宅のモデムは大人の事情でNTTのIPv6 over IPv4
になっているのですが、実はこれ80番ポート含め自由な番号を開放することができなくなっています。
とはいえ全くポート開放できないわけではないのです。
ブラウザで開くときに example.com:99999
のようにポートを指定すれば良いだけ。
かっこ悪いけど、自分で使うためだけの自宅サーバーなので気にしない。かっこ悪いけど。
2-1. nginxを設定する
サーバー上でnginxをロードバランサとして動かしているので、そこに設定を加えます。
当初の設定はこんな感じに。
# 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
を使っているので、そのための設定を記載しています。
こんなもんで動くやろ。いざレッツチャレンジ。
![スクリーンショット 2020-01-28 23.55.46.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F265811%2F042b12f9-e1cf-a4cd-fb18-cbcb011df828.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=28e785b764286982571ce11b531e7f37)
なんやて工藤🤔
code.example.com:9999
で開いたのですが、しばらくロードした後で、上のような画面に。
よく見ると、code.example.com/login
にリダイレクトされているようです。
せっかく指定したポート番号が消えとる!!!
2-2. 解決策
# 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にして使えるとのことだったので、試してみました。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F265811%2F99dcb3d7-b3e5-dfca-0634-d677a92a8a53.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2f5c2741822d5ce49afc63f4b747c12b)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F265811%2Fb34f4aed-bccd-6747-4f27-2d7c4588253e.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8ef05eea6c95d91fb72dd2ee8d38d6b3)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F265811%2F40b23c19-be3a-f19a-9e50-8e70e0d795f0.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4dff5b7bdec7678b4ba1eb6f3a6b02a6)
不具合があったり、そもそもインターフェースがタッチパネル向けじゃなかったりと多少使いにくさはありますが、移動時間にちょっといじったりするのにはとても良さそうです。
ちなみにスクリーンショットでgitを使っていますが、これは以下のような感じでvolumeをマウントしてます。:ro
は、ReadOnlyってことですね。
...
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も一般利用できるようになりますし、もっと身近な存在になっていくんじゃないですかね。