外部の公開サーバでvscode serverを使ってみた

Visual Studio codeのserver版がpreviewながら公式からリリースされたので、SSL／TLS＋Basic認証／クライアント認証を施し、systemdのサービスとして起動するように手持ちのVPSサーバ上に設定してみた。

これでブラウザがあれば、どこからでもサーバのファイルを編集できるようになった。

設定方法 (Ubuntu 20.04使用)

フロントエンドにNginxをReverse Proxyとして設定し、ここでSSLなどのセキュリティをかける。VS code server自体はバックエンドにする。Websocketが通らないため、Apacheをフロントエンドにはできないので注意。

Visual Studio code server 設定

以下のようにインストールした後、サービスとして登録するため、systemdファイルを作成する。

# インストール
sudo wget -O- https://aka.ms/install-vscode-server/setup.sh | sh

# systemd unitファイル作成 途中のUser/Groupは書き換えること。
sudo vi /lib/systemd/system/vscodeserver.service
---
[Unit]
Description=vs code server
After=network-online.target

[Service]
ExecStart=/usr/local/bin/code-server serve-local --accept-server-license-terms --disable-telemetry
Restart=always
User=yourUserName
Group=yourGroupName
UMask=002

[Install]
WantedBy=multi-user.target
---

systemdに登録し実行する。(上のunitdファイルに記述したユーザ／グループで実行される。)

# 登録
sudo systemctl enable vscodeserver
# 開始
sudo systemctl start vscodeserver

初回起動時のみ起動に時間がかかるため、１，２分待ち、起動した後に表示される接続先のURLを取得しておく。

# statusの中のWeb UI available atにあるURLを取得する。
sudo systemctl status vscodeserver
---
Jul 13 07:20:14 devserver001 code-server[367393]: Server bound to 127.0.0.1:8000 (IPv4)
Jul 13 07:20:14 devserver001 code-server[367393]: Extension host agent listening on 8000
Jul 13 07:20:14 devserver001 code-server[367393]: Web UI available at http://localhost:8000/?tkn=6de5345a-b644-48cd-a7f9-3433bcc031e3
Jul 13 07:20:14 devserver001 code-server[367393]: [07:20:14] Extension host agent started.
Jul 13 07:20:14 devserver001 code-server[367393]: [07:20:14] Deleted from disk ms-ceintl.vscode-language-pack-ja /home/yourname/.vscode-server/extensions/ms-ceintl.vscode-language-pack-ja-1.67.3
Jul 13 07:20:14 devserver001 code-server[367393]: [07:20:14] Deleted from disk xdebug.php-debug /home/yourname/.vscode-server/extensions/xdebug.php-debug-1.26.1
---

ここでは、http://localhost:8000/?tkn=6de5345a-b644-48cd-a7f9-3433bcc031e3であるのでこれを控えておく。

上の「sudo systemctl status vscodeserver」で「Web UI available at」の行が見つからない場合は、「journalctl –no-pager | grep -e ‘code-server’」で起動時間あたりの情報を探すこと。

Nginx設定

Nginxにはリバースプロキシ、SSL、Basic認証（もしくはクライアント認証）を設定する。SSLの各種ファイルはLet’s Encryptなどで取得済みとする。

Nginxをインストールしていない場合はインストール

sudo apt install nginx

基本の設定ファイルを設定する。このあたりは各自の環境に合わせて設定してほしい。私のサーバは私一人しか使わないため最小限の設定にしている。デフォルトでも問題ないはず。

sudo vi /etc/nginx/nginx.conf
---
user yourUser yourGroup;
worker_processes 1;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 50;
        multi_accept on;
}

http {

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 3;
        types_hash_max_size 2048;
        server_tokens off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;
        access_log off;
        error_log /var/log/nginx/error.log;

        include /etc/nginx/sites-enabled/*;
}
---

Basic認証の下準備。

# basic認証
sudo apt install apache2-utils
sudo htpasswd -c /etc/nginx/.htpasswd testuser
# ここでBasic認証のパスワードを設定する。testuser/設定passwordがbasic認証のログインアカウントになる。

以下が肝心の設定ファイル。Basic認証でやる場合は以下。server_name、ssl_certificateとssl_certificate_keyは変更のこと。

# virtual host
sudo vi /etc/nginx/sites-available/vscodeFront
---
server {
    listen 443 ssl http2;
    server_name yourServerName.com;

    # SSL 環境に応じて変更のこと
    ssl_certificate     /etc/letsencrypt/live/yourServerName.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourServerName.com/privkey.pem;

    location / {
        auth_basic "Restricted";
        auth_basic_user_file /etc/nginx/.htpasswd;

        proxy_pass http://127.0.0.1:8000/;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;

    }
}
---

クライアント認証の場合だと以下。クライアント認証の作り方は割愛。

sudo vi /etc/nginx/sites-available/vscodeFront
---
server {
    listen 443 ssl http2;
    server_name yourServerName.com;

    # server側
    ssl_certificate     /etc/letsencrypt/live/yourServerName.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourServerName.com/privkey.pem;

    # client認証
	ssl_verify_client on;
	ssl_client_certificate /opt/myCA/cacert.pem;
	ssl_crl /opt/myCA/crl.pem;

    location / {

        proxy_pass http://127.0.0.1:8000/;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_redirect off;

    }
}
---

設定が終わったら、virtual hostの設定を有効にして、Nginx再起動。

sudo ln -s /etc/nginx/sites-available/vscodeFront /etc/nginx/sites-enabled/
sudo systemctl restart nginx

ここで、VS code serverの設定時に控えておいた「http://localhost:8000/?tkn=6de5345a-b644-48cd-a7f9-3433bcc031e3」の?から下の部分（赤色部分）を切り取り、https://yourServerName.com/?tkn=6de5345a-b644-48cd-a7f9-3433bcc031e3にアクセスするとVS code serverが表示される。

Port 8000は外部からアクセスできないようにしておくこと。

感想

現時点では、vscode serverの非公式WEB版であるCoderのcode-serverのほうが若干動作が軽く、日本語化もできるので使いやすい。ただ、こちらのvscode serverは公式なので、いずれ非公式のCoder版は廃れる気がする。公式版の不満点としては、使えない拡張機能があることと、日本語化できないことであるが、まだpreview版なのでいずれ対応してくれるのでは、という期待がある。

とりあえず、Coder版から乗り換えた。