モバイル用のブラウザで `http://localhost:8081/vr` を開いたときに、実際には別のサーバーへ接続

connect_to_web_server_via_localhost_on_mobile_browser.md

モバイル用のブラウザで http://localhost:8081/vr を開いたときに、実際には別のサーバーへ接続

Web VR を試していると「WEB サーバーへは https または localhost で接続」的な但し書きが多くなるので、 モバイル用のブラウザで http://localhost:8081/vr 等を開いたときに実際には別のサーバーへ接続している方法のメモ.

なお、手持ちのデバイスでは View in VR モード?でまともに動作するものがなかったので、下記の方法で本当に要件を満たしているのかは不明 (AR.js を試したときにカメラが利用できたので大丈夫かなという気はしないでもないけど).

SSH サーバーを用意

接続元のデバイスと接続先のサーバーの間にお手頃な SSH サーバー(と接続に利用できるユーザー)がないか探す. なければあきらめて新しく立てる.

デバイス側に SSH のポート転送ができるアプリをインストール

ポート転送の機能を持っているアプリであればどれでも大丈夫だと思う、たぶん. 手元の環境では ConnectBot を使っていてとくに問題はない、かな(できれば autossh 的な再接続のオプションが欲しいというのはなくはないのですが).

SSH サーバーに接続用の設定を追加

鍵ペアを用意し、接続に利用するユーザーの authorized_keys へ追加. このときに(必要ないかもしれないけど)、 permitopen="<web-server>:8081" も記述しておく(<web-server> は接続先のサーバー).

ポート転送しかしないのならば、以下のようにしてもよいかもしれない.

permitopen="<web-server>:8081",command="/bin/false",no-pty,no-X11-forwarding,no-agent-forwarding,no-user-rc ...

デバイス側にも接続用の設定を追加

ConnectBot の場合(他のアプリでも似たような感じかなと).

• 上記で用意した鍵を使い、SSH サーバーへ普通に接続する設定を追加(できれば接続できるかも試してみる).
• ホストの一覧に戻ったら、作成したホストの項目をホールドしポップアップメニューから「ポート転送の編集」を選択.
• ポート転送の項目を以下のように追加する.
  • 鍵の名前: 任意(空欄のままでも大丈夫)
  • タイプ: ローカル
  • ソースポート: 8081
  • 転送先: :8081

接続する

• ConnectBot でポート転送用のホストを選択.
• そのままブラウザを開始し http://localhost:8081/vr 等を開く.

お手軽か？

手元の環境では SSH のポート転送用の設定があったので若干の追加だけで流用できたのだが、 そうでないならば素直に https で接続する方法を考えた方がお手軽かもしれない.