code-server

Description/Summary

最近はブラウザでコードを書くのが流行っていそうなので、自宅マシン上の coder/code-server をどこにいても利用できるようにしてみた。所有している端末のどれでも、どこからでも接続したいが安心は欲しいので VPN 経由でのみ接続できるようにしている。 VPN の構成には Tailscale を利用している。自前で構築してもよかったが、住んでいるマンションのインフラ都合上、手元のルータにグローバル IP アドレスが降ってこないので面倒くさそうでやめた。以下のような構成を目指す。 code-server の構成インストール自体は簡単。 $ paru -S code-server $ systemctl enable code-server@$USER 大事なことはリバースプロキシに任せるので設定も適当。 bind-addr: 127.0.0.1:8080 auth: none cert: false Tailscale の構成 code-server は非 SSL アクセスな場合にその機能を制限してしまう。 Tailscale には内部のアクセスのための SSL 証明書を発行する仕組みが備わっているので、それを活用して code-server の制限を回避する。 https://tailscale.com/blog/tls-certs/ 手順は Enabling HTTPS - Tailscale にある。完了すると /var/lib/tailscale/certs あたりに必要なファイルが揃っているはず。 nginx の構成 $ paru -S nginx-mainline $ systemctl enable nginx.service virtual servers を管理しやすくする設定。 http { .

Content

最近はブラウザでコードを書くのが流行っていそうなので、自宅マシン上の coder/code-server をどこにいても利用できるようにしてみた。

所有している端末のどれでも、どこからでも接続したいが安心は欲しいので VPN 経由でのみ接続できるようにしている。

VPN の構成には Tailscale を利用している。自前で構築してもよかったが、住んでいるマンションのインフラ都合上、手元のルータにグローバル IP アドレスが降ってこないので面倒くさそうでやめた。

以下のような構成を目指す。

code-server の構成

インストール自体は簡単。

$ paru -S code-server
$ systemctl enable code-server@$USER

大事なことはリバースプロキシに任せるので設定も適当。

bind-addr: 127.0.0.1:8080
auth: none
cert: false

Tailscale の構成

code-server は非 SSL アクセスな場合にその機能を制限してしまう。

Tailscale には内部のアクセスのための SSL 証明書を発行する仕組みが備わっているので、それを活用して code-server の制限を回避する。 https://tailscale.com/blog/tls-certs/

手順は Enabling HTTPS - Tailscale にある。完了すると /var/lib/tailscale/certs あたりに必要なファイルが揃っているはず。

nginx の構成

$ paru -S nginx-mainline
$ systemctl enable nginx.service

virtual servers を管理しやすくする設定。

http {
    ...
    server {
        ...
        include sites-enabled/*;
    }
}

ところで、Tailscale にて割り振られる IP アドレスの範囲は決まっているので、範囲外からのアクセスは nginx に接続を切ってもらうようにする。

http {
    ...
    geo $geo_allowed {
        default 0;
        100.64.0.0/10 1;
    }
}

Tailscale で生成した SSL 証明書を喰わせる設定をする。

server {
    listen 80;
    listen [::]:80;
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name TAILSCALE_MACHINE_NAME.TAILSCALE_DOMAIN.SUFFIX;

    ssl_certificate /var/lib/tailscale/certs/CERT_NAME.crt;
    ssl_certificate_key /var/lib/tailscale/certs/KEY_NAME.key;

    if ($geo_allowed = 0){
        return 444;
    }

    location / {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
    }
}

/etc/nginx/sites-available/code-server.conf から /etc/nginx/sites-enabled/code-server.conf にシンボリックリンクを張る。

以上でブラウザから code-server を利用することができるようになっているはず。