概要

iPad で快適なコーディングをするために、Visual Studio Code (以降 VS Code) をブラウザから操作できるようにしたいと思いました。
code-server というオープンソースがありますのでこれを使ってみました。

環境

Ubuntu (@sakura vps)

インストール

用意されているインストールスクリプトを使用してインストール。^※1

curl -fsSL https://code-server.dev/install.sh | sh

これ以外の方法も2通りありますが、私の場合うまくいかないこともありましたのでこちらをお勧めします。

※1 インストール前に下記でドライランすることも可能

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

引用：coder: Getting started

nginx の設定

下記2つを重視しています。

https 通信
どんなコードを扱うかにもよりますが覗かれないためにも https で通信するのが良いと思います。これを機にドメイン取得することをお勧めします。
IP 制限
現時点では code-server はセキュリティとしてパスワードしか用いれないので、使用する端末のみを許す IP制限をかけました。
用途によってはサーバーのコンソール画面から設定できる IP制限でも良いかもしれません。

参考に私の設定ファイルを記載します。
/etc/nginx/sites-available/code-server

geo $access_filter {
    default NG;
    include /etc/nginx/extra/ip_allow_list.conf;
}

server {
    listen 80;
    listen [::]:80;
    server_name <ご自身のドメイン>;
    return 301 https://$host$request_uri;
}

server {
    listen  443 ssl;
    server_name <ご自身のドメイン>;

    ssl on;
    ssl_certificate        <証明書ファイルパス>;
    ssl_certificate_key    <秘密鍵ファイルパス>;

    location / {
        if ($access_filter = "NG") {
            return 444;
        }

        proxy_pass http://127.0.0.1:<次項目で決めるお好きなポート>;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

また、上記に必要なIP制限をするファイルを作成しておきます。
ここで NG と書かれたものも制限されます。よく使う決まった IPアドレスがあるなら記載しておいて使うときに OK に変更したり、出先で新しいIPアドレスを使う際はその都度追記して終わったら消すが使いやすいと思います。 /etc/nginx/extra/ip_allow_list.conf

000.111.222.333 NG;
111.222.333.444 OK;

code-server を起動

下記で起動できます。

code-server

初回起動すると実行したディレクトリ下に下記のファイルができます。

.config/code-server/config.yaml

bind-addr: 127.0.0.1:<お好きなポート>
auth: password
password: <パスワードが書かれています>
cert: false

ここに書かれているパスワードを利用してブラウザから入ります。念のため定期的に変更した方が良いでしょう。
nginx の設定でも書きましたが、ここで起動時のポートを変更できます。他で使用しているポートと被らないようにできます。

デーモン化しても良いですが今のところ使う時以外立てないのでバックグラウンド起動で使っています。

code-server &

終わりに

これで端末に縛られずにコードが書けるようになりました。
iOS や iPad OS はバックグラウンドにしていると一定時間でセッションを閉じてしまうのでコードを書いて画面を確認して、再度 SSHクライアンアプリに戻ってくると既に閉じられてた。。。なんてことが発生していました。
code-server を用いれば全部ブラウザだけで完結するのでこの時間を気にしなくて済むようになったのは大きいです。

概要

関連記事

環境

インストール

nginx の設定

code-server を起動

終わりに

参考