導入
ソースは GitHub で公開しています。手元でビルドして試し、自分のアプリに埋め込みます。まず動きを見たいときは、デモを開いてください。
01
ローカルビルド
ビルドすると dist/ にランタイム・Node の lib の束・互換パッケージができます。serve で、試し書きの画面（playground）・ランタイム・プレビューの3つが別々のポートで立ち上がります。
Node の lib の束を作るには、最初に1回 node scripts/gen-node-data.mjs で vendor/node/ を用意します（Docker で Node.js の公式のビルドを読みます）。
# ソースを取る $ git clone https://github.com/kobesoft-labs/openvessel.git $ cd openvessel $ npm install $ npm run build # → dist/ $ npm run serve # host :5170 (playground) · runtime :5171 · preview :5172
02
ホスト API による組み込み
起動して、ファイルを置き、コマンドを流し、開発サーバーが立ったらプレビューを作ります。外への通信の方針も、ここで決めます。
- boot ランタイムとプレビューの場所、通信の方針
- mount プロジェクトのファイルを置く
- exec / spawn コマンドを流す・プロセスを起こす
- createPreview 仮想ポートを iframe に出す
import { OpenVessel } from 'openvessel'; const vessel = await OpenVessel.boot({ runtimeUrl: 'https://runtime.example.com/runtime.html', previewUrl: 'https://preview.example.com/', network: { mode: 'ask', presets: ['npm', 'fonts', 'icons', 'cdn'] }, }); vessel.mount({ 'package.json': '…', 'src/pages/index.astro': '…' }, { path: '/home/user/app' }); await vessel.exec('npm install', { cwd: '/home/user/app' }); vessel.on('server-ready', async ({ port }) => { await vessel.createPreview(port, { container: preview }); }); await vessel.spawn('npm', ['run', 'dev'], { cwd: '/home/user/app' });
03
デプロイ構成（3オリジン）
本番では、ホスト・ランタイム・プレビューを別々のオリジンから配ります。どれも静的なファイルなので、CDN や静的サイトのホスティングに置けます。ヘッダーを付けられない配信先（GitHub Pages など）では、Service Worker が必要なヘッダーを付けます。
ホストのページ
Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp
あなたのアプリ。credentialless でもよい
ランタイム
runtime.html・sw.js を配る
クロスオリジン分離が要る（SharedArrayBuffer のため）
プレビュー
relay.html・sw.js を配る
多人数で使うときはセッションごとのサブドメインに
ライセンス
Apache License 2.0
製品への組み込み・改変・再配布ができます。配布するときは、ライセンスの写しと NOTICE を付け、改変したファイルには変えたことを書いてください。