概要

ktock/container2wasm: Container to WASM converter (github.com)
のcontainer2wasmを試した記録です。

Linuxで実行する

container2wasmの実行ファイルをダウンロードしました。 Docker imageをpullしてc2w(container2wasm)で、wsam形式にコンバートしました。

$ docker pull ubuntu:22.04
$ ./c2w ubuntu:22.04 out.wasm ←すごく時間がかかった

次に、Wasmtimeで実行しました。
wstimeは、curlで実行するように書かれています。ただしroot権限は不要でした。HOMEディレクトリにインストールされる模様です。

$ curl https://wasmtime.dev/install.sh -sSf | bash
$ wasmtime out.wasm

これでコンテナに入れました。
mapdirオプションでディレクトリをゲストに見せることもできたのですが警告が出ていました。

ブラウザで実行する

container2wasm/examples/wasi-browser/htdocs at main · ktock/container2wasm (github.com)
↑の下のファイルとout.wasmをhttpsサーバに置きました。
container2wasm/examples/wasi-browser/xterm-pty.conf at main · ktock/container2wasm (github.com)
また↑を参考にNGINXの設定で↓のヘッダーを返す設定を入れました。

add_header 'Cross-Origin-Opener-Policy' 'same-origin';
add_header 'Cross-Origin-Embedder-Policy' 'require-corp';

これで動きました。

ブラウザ実行時のコンテナの入出力をカスタマイズする

unclear how to pass custom arguments and files to the container started on browser · Issue #216 · ktock/container2wasm (github.com)
↑を見るとargsとfdsを変更するとコンテナに渡す引数とファイルディスクリプタをカスタマイズすることができるようです。
worker.jsのargsを下記とすると引数をカスタマイズすることはできました。

var args = ['arg0', '/usr/bin/date'];

内部的に↓を使っているようです。
bjorn3/browser_wasi_shim: A WASI shim for in the browser (github.com)

worker.jsの"function wasiHack(wasi, ttyClient, connfd)"にwasiとTtyClientをつなぐ標準入出力の処理が書かれていました。ここを横取りできそうでした。

buf.forEach(ccc => {
  console.log("stdout:"+ String.fromCharCode(ccc) );
});
ttyClient.onWrite(Array.from(buf));

実際にttyClient.onWriteの前にブラウザコンソール出力を足すとブラウザの開発者画面で見れました。