ブラウザのタブがLinuxマシンに変わる。WebVMという驚異

はじめに

「ちょっとLinuxコマンドを試したい」と思ったとき、皆さんはどうしていますか？VirtualBoxで仮想マシンを立ち上げる、Dockerコンテナを起動する、クラウドのVPSにSSHする……。どれも準備に時間がかかりますし、環境を汚したくないという心理的なハードルもありますよね。

もし、ブラウザで1つタブを開くだけで、本物のDebianが起動するとしたらどうでしょうか。しかもサーバーは一切不要、すべての処理がクライアントサイドで完結します。

それを実現しているのが、今回ご紹介する「WebVM」です。実際に webvm.io にアクセスすると、数秒でLinuxターミナルが立ち上がり、lsもvimもgccも、当たり前のように動きます。初めて触ったとき、思わず「これ、本当にブラウザの中で動いているの？」と疑ってしまうほどの完成度です。

WebVMとは

WebVMは、Leaning Technologies社が開発している「HTML5/WebAssemblyだけで完全にクライアントサイドで動作するサーバーレス仮想環境」です。心臓部には同社の「CheerpX」という、x86バイナリをWebAssemblyにJITコンパイルするエンジンが使われており、無修正のDebianディストリビューションをそのままブラウザ上で実行できます。

「ブラウザでLinux風のものが動く」デモは昔からありましたが、WebVMが画期的なのは、エミュレーションのために特別にビルドされたバイナリではなく、普通のx86バイナリがそのまま動く点です。Linux ABI互換のシステムコールエミュレータを備えているため、aptでインストールしたツールも基本的にそのまま実行できます。

主な特徴

完全クライアントサイド実行 - サーバー不要。計算はすべてユーザーのブラウザ内で行われるため、ホスティングは静的ファイル配信だけで済みます
x86-to-WebAssembly JITコンパイル - CheerpXがx86バイナリを実行時にWebAssemblyへ変換。無修正のDebianバイナリが動作します
Tailscale統合によるネットワーク対応 - ブラウザのサンドボックス内からでも、TailscaleのVPN経由でインターネットやローカルネットワークにアクセスできます
グラフィカル環境もサポート - ターミナルだけでなく、Alpine + Xorg + i3によるデスクトップ環境のデモも公開されています
仮想ブロックファイルシステム - ディスクイメージはWebSocket経由でチャンク単位のオンデマンド読み込み。変更分はIndexedDBに保存され、リロード後も維持されます

インストール（セルフホスト）方法

WebVMはライブラリとしてnpmインストールするものではなく、リポジトリをフォークして自分専用のLinux環境をデプロイするスタイルのプロジェクトです。GitHub Pagesを使えばビルド環境すら不要です。

方法1: GitHub Pagesにデプロイ（最も簡単）

leaningtech/webvm をフォークします
リポジトリの Settings → Pages で、ソースを「GitHub Actions」に設定します
Actionsタブから「Deploy」ワークフローを手動実行します
完了すると https://<ユーザー名>.github.io/webvm/ で自分のWebVMにアクセスできます

これだけで、自分専用のブラウザLinuxが手に入ります。

方法2: ローカルでビルド

手元で動かしたい場合は、以下の手順で構築できます。

# リポジトリを取得
git clone https://github.com/leaningtech/webvm.git
cd webvm

# GitHubのReleasesからディスクイメージ(.ext2)をダウンロードして配置
# 例: custom-disk-images/debian_mini.ext2

# config_public_terminal.js の diskImageUrl を配置したファイルに合わせて修正

# ビルドして起動
npm install
npm run build
nginx -p . -c nginx.conf

ブラウザで http://127.0.0.1:8081 を開けば、ローカル配信のWebVMが起動します。なお、WebAssemblyのSharedArrayBufferを使う都合上、配信時にはCross-Origin-Embedder-PolicyなどのCOOP/COEPヘッダーが必要です（同梱のnginx.confには設定済みです）。

基本的な使い方

まずは公式デモを触ってみる

webvm.io を開くと、Debianのシェルがそのまま使えます。試しに、いつものコマンドを打ってみましょう。

# システム情報を確認
uname -a
cat /etc/os-release

# 普通にファイル操作もエディタも使える
echo 'Hello from the browser!' > hello.txt
cat hello.txt

# CコンパイラでHello Worldをビルドして実行
echo 'int main(){ puts("Hello WebVM"); }' > hello.c
gcc -o hello hello.c && ./hello

gccによるコンパイルまでブラウザ内で完結します。ファイルの変更はIndexedDBに永続化されるので、タブを閉じても作業内容は残ります。

ネットワークに接続する

初期状態ではネットワークは無効ですが、サイドバーの「Networking」パネルから「Connect to Tailscale」をクリックし、Tailscaleアカウントでログインすると、VM内からインターネットに出られるようになります。

# 接続確認はcurlやwgetで行います（ICMPは非対応のためpingは使えません）
curl -I https://example.com

自分のページにLinux環境を埋め込む

WebVMの中身であるCheerpXは、CDNから読み込んで自分のWebページに組み込むこともできます。最小構成は以下の通りです。

<div id="console" style="height: 100vh;"></div>
<script type="module">
  import * as CheerpX from "https://cxrtnc.leaningtech.com/1.2.8/cx.esm.js";

  // ディスクイメージをWebSocket経由でオンデマンド読み込み
  const cloudDevice = await CheerpX.CloudDevice.create(
    "wss://disks.webvm.io/debian_large_20230522_5044875331.ext2"
  );
  // 書き込み差分はIndexedDBへ保存
  const idbDevice = await CheerpX.IDBDevice.create("block1");
  const overlayDevice = await CheerpX.OverlayDevice.create(cloudDevice, idbDevice);

  // Linuxインスタンスを起動してコンソールを接続
  const cx = await CheerpX.Linux.create({
    mounts: [{ type: "ext2", path: "/", dev: overlayDevice }],
  });
  cx.setConsole(document.getElementById("console"));

  await cx.run("/bin/bash", ["--login"], {
    env: ["HOME=/home/user", "TERM=xterm"],
    cwd: "/home/user",
    uid: 1000,
    gid: 1000,
  });
</script>

読み取り専用のクラウドディスクに、IndexedDBの書き込みレイヤーを重ねるオーバーレイ構成になっているのがポイントです。この仕組みのおかげで、巨大なディスクイメージ全体をダウンロードすることなく、必要なブロックだけを取得しながらVMが動きます。

実践的なユースケース

1. Dockerfileからカスタム環境を作る

WebVMの真価は、Dockerfileを書くだけで独自のブラウザLinux環境を作れることです。フォークしたリポジトリのDeployワークフローは、指定したDockerfileからext2ディスクイメージを自動生成してくれます。

たとえば、Python学習用の環境を作りたい場合は、dockerfiles/debian_mini をベースにこう変更します。

FROM --platform=i386 i386/debian:bookworm
RUN apt-get update && apt-get install -y python3 python3-pip vim
RUN useradd -m user && echo "user:password" | chpasswd
WORKDIR /home/user

# bashの代わりにPython REPLを直接起動する
CMD [ "/usr/bin/python3" ]

これをデプロイすれば、URLを開いた瞬間にPython REPLが立ち上がるページの完成です。環境構築の説明を一切せずに、学習者へ実行環境そのものを配布できます。

2. 技術ドキュメントに「動くサンドボックス」を添える

CLIツールやプログラミング言語のチュートリアルページに、実際に試せるターミナルを埋め込むという使い方も強力です。読者は「手元に環境を作ってから試す」のではなく、読みながらその場で実行できます。ホスティング側の負担は静的ファイル配信だけなので、アクセスが増えてもサーバーコストが跳ね上がる心配はありません。

3. 安全な検証用サンドボックスとして

未知のコードやコマンドを試すとき、WebVMならすべてがブラウザのサンドボックス内で完結します。ホストマシンのファイルシステムには一切触れないため、「壊れてもいい環境」を秒で用意できます。リロードすれば初期状態に戻せる手軽さも魅力です。

なお、ライセンスには注意が必要です。WebVM自体はApache License 2.0で公開されていますが、エンジンであるCheerpXは個人利用・技術検証は無料、組織での業務利用は商用ライセンスが必要という建て付けです。業務プロダクトへの組み込みを検討する場合は、Leaning Technologies社への確認をおすすめします。