[JavaScript] 3D ROOM制作 6日目 マルチサーバーデプロイ・VRポータル4サーバー間移動

やったこと

Vercelデプロイ

WIRED ROOMのリポジトリをフォークして ROOM_VERCEL として Vercel にデプロイした。自分のリポジトリはGitHubでForkできないので、cloneしてremoteを差し替える方法で対応。

Vercelで静的サイトをデプロイするときの注意点が2つあった。

publicフォルダの特別扱い。 Framework Presetが「Other」の場合、Vercelは public/ があるとその中身だけをルートとして配信する。WIRED ROOMはルートに index.html があるので、Settings → Build and Deployment → Output Directory を . にOverrideして解決。

CORSヘッダー。 Netlifyは _headers ファイルだが、Vercelは vercel.json で設定する。

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" }
      ]
    }
  ]
}

Cloudflare Pagesデプロイ

同様に ROOM_CLOUDFLARE を作成してCloudflare Pagesにデプロイ。こちらはVercelのようなpublic問題はなく、CORSは _headers ファイル（Netlifyと同じ形式）で対応。プロジェクト名にアンダースコアが使えない点だけ注意。

4サーバー間VRポータル移動

Netlify（lain-lab.com）、GitHub Pages、Vercel、Cloudflare Pagesの4つのサーバーにそれぞれROOMを配置し、VRヘッドセットでポータルをくぐってサーバー間を移動できることを確認した。

普通はサーバーをまたいでVRで移動しない。WIRED ROOMはビルドツールなしの静的ファイルだけで動くので、ホスティングに依存しない。だからこそ4つの異なるサービスで同じ体験が成立する。

Netlify _headers修正

Netlifyの _headers が /room/* のみだったため、Vercel/Cloudflareから広場に出ると /room2/〜/room4/ のバナーがCORSでブロックされていた。/* に変更して全パスをカバー。

VRM警告修正

毎回出ていた2つの警告を修正。

• removeUnnecessaryJoints is deprecated → combineSkeletons に置き換え（app.js, avatar.js）
• VRMLookAtQuaternionProxy is not found → createVRMAnimationClip 呼び出し中だけ console.warn を一時無効化。v3.3.3にはProxyのエクスポートがないため。

ポータル遷移フェードアウト

PC版でポータルをくぐったとき、画面が一瞬で切り替わるのではなく黒にフェードアウトしてから遷移するようにした。CSSの opacity トランジションと transitionend イベントを組み合わせる方式。

注意点として、PC版のポータル遷移は window.location.href による直接遷移なので、loadExternalRoom ではなく exitCorridor 側にフェード処理を入れる必要がある。

README更新

Live Demosセクション（4サーバーのURL一覧）と、ホスティングサービスごとのCORS設定例を追加。

所感

Netlifyの閉じた世界から外に飛び出した日。4つのサーバーをVRで歩いてまたぐ体験は、WIRED ROOMの「静的ファイルだけでサーバーに依存しない」というコンセプトの正しさがそのまま証明になった。誰でもどこにでも自分のROOMを立てて、ポータルで繋がれる。中央管理のメタバースとは真逆のアプローチ。