code-serverをVPS上のUbuntu 22.04にインストールする

2023-02-09

code-server（ブラウザでアクセス可能なVSCode）で開発環境を作成したかったので、新規に契約したVPS上にインストールしてみました。

環境

国内のVPSサービスではおそらく最安値だったので、WebARENA Indigoを契約しました。
このVPSインスタンスで様々なプログラムを利用する予定なので4GBプランを契約しましたが、code-serverの動作要件は2CPU／メモリ1GBなので2GBプランでも良いと思います。

VPS

WebARENA Indigo 4GBプラン（月額1,399円）
- CPU: 4vCPU
- メモリ: 4GB
- SSD: 80GB
- IP: IPv4/IPv6
- NW: 500Mbps上限
Ubuntu 22.04.1 LTS
code-server: v4.7.1
- VSCode: 1.71.2
nginx: 1.18.0

ローカルマシン

HP Chromebook x2 11-da0013QU
Debian GNU/Linux 11 (bullseye)

ローカルマシンからVPSインスタンスへSSH接続する

公開鍵認証用の鍵はインスタンス作成時に生成することができるので、インスタンス作成後に生成した秘密鍵をダウンロードしておきます。
今回はChromebookのLinux環境を利用しているので、Linux環境のストレージにダウンロードした秘密鍵を移します。
配置先は~/.sshです。

自分以外のユーザーが秘密鍵のファイルを操作できないよう、権限を変更します。

chmod 600 .ssh/private_key.txt

この操作を行わないとSSH接続時にメッセージが表示され、アクセスができません。

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for '/home/username/.ssh/private_key.txt' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "/home/username/.ssh/private_key.txt": bad permissions
username@xxx.xxx.xxx.xxx: Permission denied (publickey).

権限を変更したら、sshコマンドで接続します。

ssh -i ~/.ssh/private_key.txt username@xxx.xxx.xxx.xxx

ここから先の手順はSSH接続した状態で実行します。

code-serverをインストールする

インストールスクリプトを利用してインストールします。

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

インストール後、バックグラウンドで起動できるように設定します。

sudo systemctl enable --now code-server@$USER

インストール自体はこれで完了です。
ただしこの状態ではインストールしたマシン（ローカルホスト）からしかアクセスできないので、Nginxを利用してリバースプロキシを設定する必要があります。

Nginxをインストールする

下記のコマンドでNginxをインストールします。

sudo apt install -y nginx certbot python3-certbot-nginx

リバースプロキシを設定する

設定ファイルを記述する

sudo nano /etc/nginx/sites-available/code-server

設定ファイルを以下のように編集します。
mydomain.comは自分のドメインに置き換えます。

server {
    listen 80;
    listen [::]:80;
    server_name mydomain.com;

    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;
    }
}

設定を有効化する

下記のコマンドで設定を有効化します。

sudo ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/code-server

Let’s Encryptを設定する

下記のコマンドを実行してLet’s Encryptを有効化します。
有効期限近くになると更新を促す通知を受け取るため、mail@example.comの部分に自分のメールアドレスを指定します。

sudo certbot --non-interactive --redirect --agree-tos --nginx -d mydomain.com -m mail@example.com

実行すると、先程のcode-serverのNginx設定ファイルが更新されます。

ここまで設定できたら、sudo nginx -s reloadか一旦VPSインスタンスを再起動するなどしてNginxに設定を反映します。

設定したドメインにアクセスすると、パスワードを入力する画面が表示されます。
~/.config/code-server/config.yamlにあるファイルに記載されているパスワードを入力すると、おなじみのエディターの画面が表示されます。

環境

VPS