ChromeOS FlexのウェブブラウザからVS Codeを使うための環境構築〜Surface Go 3をリモート編集端末にする〜

2024-12-29

Page content

持ち歩きのためにブラウザでやる

突然だが、持ち歩き端末に求める仕様の話。私の場合それは、本サイトのブログ記事を存分に書けることが要件の一つとなり、細分化すると次のようになる。

持ち歩き端末に求める仕様:: 静的サイトジェネレータのHugoで使う、Dropbox領域内のmarkdownファイル (ブログ記事) が編集できること ※Dropbox領域はクラウドのLinuxサーバにマウント済みなのでサーバ上で編集する形でもOK; クラウドのLinuxサーバにSSHログインできること; 最新のChrome系ウェブブラウザが利用できてスムースに動作すること; 今どきの日本語IMEが利用できること; 編集環境からGitHubのリポジトリが操作できること; Obsidianで使う、WebDAV領域内のmarkdownファイル (色々なメモ) が編集できること ※WebDAV領域はクラウドのLinuxサーバにマウント可能なのでサーバ上で編集する形でもOK

一方、手元には、Linux Surfaceの力を借りてUbuntu Desktopを導入済みだけども、使用感があまりしっくりきていない予備機的なSurface Go 3がある。しっくりきていない理由はおそらく、Surfaceのカバーをパカッと開いてさっと使うという軽快さが求められる状況と、Ubuntuのフルデスクトップ環境が、相性抜群とは言えないためかもしれない。端的に言うと、Surfaceはタブレット寄りで簡素な、もっと軽いOSで動かしたい。

そこで心機一転、Surfaceの環境をリセットし、次の方針で再構築してみようと思いついた。ChromeOS Flexは、ChromeOSとぼぼ同等の機能を持つ、一般のx86系PCで動作するOSだ。

Surface Go 3にChromeOS Flexをインストールする
クラウドのLinuxサーバに、ウェブブラウザで使う純正VS Codeの環境を作る

この構築を行うと、ウェブブラウザからクラウドのVS Codeへアクセスすることで、ファイルのリモート編集などをこなせる。極端な話、手元の端末ではブラウザと日本語IMEが動けば良い。

なお、2019年4月には、ブラウザを中核にする同様の発想で code-serverでブラウザからVSCode Anywhere! [2019-04-18] という記事を書いている。しかしこの時からなんともう5年以上経っており、発想は当時の焼き直しであっても別ハードウェアと最新のソフトウェアを使っての再トライなので、やる価値がないこともない、と考えることにする。

Step-1. Surface Go 3にChromeOS Flexをインストールする

Step-1-1. Surfaceのリカバリーイメージを入手

SurfaceのOSを入れ替える前に、いざとなればSurfaceを工場出荷状態に戻せる手段があることを念のため確認する。最低限必要なこととしては、次のページからWindows環境のリカバリーイメージがダウンロードできることを確認する。

Surface Recovery Image Download - Microsoft サポート

ダウンロード時には、Productとして「Surface Go 3」を、シリアル番号として、Surface本体裏側の「Microsoft」の文字の下に記載されている14桁の英数字を入力する。

Step-1-2. ChromeOS Flexのインストール

MacまたはWindowsのパソコンと、Surface Go 3に接続可能なUSBメモリを用意し、次の公式ページなどを参照しながら、ChromeOS Flexインストール用USBメモリを用意する。そしてSurfaceにChromeOS Flexをインストールする。

その結果、何の苦労もなく、Surface Go 3にChromeOS Flexをインストールできた。Wi-Fiやタッチスクリーンの動作に問題はない。ただし内蔵カメラはそもそもデバイスとしてOSに認識されておらず、利用不可の状態だ。内蔵カメラについては潔く諦めよう。肝心のOSの操作感は軽快で、タッチスクリーンの存在も相成って本物のChromebookのように使える。

Step-2. ウェブブラウザから使うVS Codeを導入する

このステップで構築する環境の通信については次の通り。

sequenceDiagram
	participant WEBBROWSER as ウェブブラウザ
@Surface
	participant WEBSERVER as Nginx
as リバースプロキシ
@Linuxサーバ
	participant CODE as VS Code
(serve-web)
@Linuxサーバ
	WEBBROWSER->>WEBSERVER:https [443/tcp]
	WEBSERVER->>CODE:http [8000/tcp]
	CODE-->>WEBSERVER:http応答
	WEBSERVER-->>WEBBROWSER:https応答

Step-2-1. code serve-webの動作確認

VS CodeのサイトからCLI版のファイルをダウンロードする
- Download Visual Studio Code - Mac, Linux, Windows

ダウンロードしたファイルを解凍して、中身の実行ファイルcodeをサーバ上で実行してみる

$ ./code serve-web
*
* Visual Studio Code Server
*
* By using the software, you agree to
* the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
* the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
*
Web UI available at http://127.0.0.1:8000?tkn=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

(必要ならばポートフォワーディングなどを駆使して) 表示されているhttp://127.0.0.1:8000?tkn=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXへウェブブラウザでアクセスすると、ブラウザ上でVS Codeが使えることがわかる

Step-2-2. code serve-webのサービス化

ここでのLinuxサーバのOSは、ちょっと古めだがUbuntu 22.04 LTSを想定している。また、ユーザ名は仮に「USERNAME」としている。

ユーザ権限で動作させる前提のサービスのファイルを作成する

$ cat ~/.config/systemd/user/code-serve-web.service
[Unit]
Description=Visual Studio Code serve-web
After=network.target
StartLimitIntervalSec=0

[Service]
Type=simple
Restart=always
RestartSec=10
ExecStart=/home/USERNAME/bin/code --verbose serve-web --host 127.0.0.1 --port 8000 --without-connection-token

[Install]
WantedBy=default.target

作成したサービスをstart and enableする

$ sudo loginctl enable-linger USERNAME # OS起動時からUSERNAMEのサービスが起動するように設定
$ systemctl --user daemon-reload
$ systemctl --user status code-serve-web.service # サービスとして認識されていることの確認
$ systemctl --user start code-serve-web.service
$ systemctl --user enable code-serve-web.service
$ systemctl --user status code-serve-web.service # start/enable後の状態確認

Step-2-3. Nginxでのリバースプロキシを設定

次のような内容の設定ファイルを用意してNginxに適用する (ここでは、code serve-webのHTTP通信がリバースプロキシ経由でHTTPS公開されるように、かつBASIC認証が有効となるように設定している)

server {
	listen 443 ssl http2;
	(省略)
	ssl_certificate /etc/letsencrypt/live/code.example.com/fullchain.pem;
	ssl_certificate_key /etc/letsencrypt/live/code.example.com/privkey.pem;

	# BASIC認証
	auth_basic "Restricted";
	auth_basic_user_file /etc/nginx/htpasswd_code.example.com;

	# code serve-webのリバースプロキシ
	location / {
		proxy_pass http://127.0.0.1:8000;
		proxy_http_version 1.1;
		proxy_set_header Host $host;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
	}
}

ウェブブラウザでhttps://code.example.com/へアクセスし、BASIC認証が有効化されていること、VS Codeの画面が表示されることを確認する

まとめ

Step-1, Step-2で構築した環境を使って、Linuxサーバ上のmarkdownファイルを、ChromeOS Flexのウェブブラウザ (Google Chrome) から編集している画面は次のようになる。

ブラウザのアドレスバーが見えなくなる全画面表示に切り替えていると、この編集画面は、見かけの上でも反応性においても、ローカルで動作しているいつものVS Codeと比べて劣るところが私には特段感じられない。この連携技術は素晴らしい。

最後に参考情報として。VS Codeに備わる下記の「Remote Tunnels」機能を使うと、自分のVS Code環境がトンネルで接続されて、https://vscode.dev/...へアクセスしたブラウザから使えるようになる。

Remote Tunnels

単にブラウザでファイル編集が行えればいいという場合は、この「Remote Tunnels」の方法がお手軽かもしれない。今回は環境構築の愉しみと、反応性に影響するであろう通信経路をできるだけ短くすることを重視したため、「code serve-web」の方法を採用している。