VueCLIで構成したウェブアプリ内でスマホやPCに接続されたマイクの音を取り扱いたいと考えています。開発PCで立てた開発サーバーにローカルネットワーク内からiPhoneや他のPCからアクセスして動きを確認したいのですが、開発PC以外の端末ではマイクを取り扱うことができません。調べたところHTTPSでサーバーを立てる必要があるとのことで、本番ではうまく動作するのかもしれないのですが、開発中にローカルネットワーク内で他のデバイスでオーディオやビデオなどのメディアにアクセスが出来るようにすることは難しいでしょうか?
1 件の回答
ローカル開発環境でセキュアコンテキストを使用したいですか?もちろん可能です。
まず、質問文で示されている MediaDevices.getUserMedia()
のようなAPIを使用するにはSecure Contextが要求されますが、これはMDNで述べられているように、おもに以下のような環境に限って使用できます。
- ローカルに配信されたリソース
http://127.0.0.1
(ループバックアドレス)http://localhost
,http://*.localhost
(ループバックアドレスを指すことが保証されたドメイン)
- TLSを経由するリソース
https://
から始まるオリジン
グローバルスコープで使用できる変数、 window.isSecureContext
を使用して現在のページが該当するかが確認できます。
ところで、証明書が不正な場合(ドメイン不一致や期限切れなど、警告画面を無視した場合)の場合はどうなのでしょうか。どうやらこれはセキュアコンテキストとして認められるようです。
さて、上記を踏まえればおおまかには次のいずれかを行うことになります。
- リモートデバイスから localhost でアクセスする
- 当該ページへ、httpsを使用してアクセスする
それぞれの例を、概要程度に紹介します。
localhostでアクセスできるようにする
これには、ポートフォワードを行います。リモートマシン(クライアント)のローカルポートとホスト(開発機)のポートを転送するのです。
Android Chromeの場合
Android Chromeの場合、これはChromeのリモートデバッグで用意されている機能を利用して、容易に実現可能です。
- Access local servers - Chrome Developers
- ポートフォワーディングを使ってAndroidでlocalhostページを表示する | Android | アプリ関連ニュース | ギガスジャパン
SSHを使用する場合
最近のPCであれば、Windows,macOSいずれでもOpenSSHが使用可能です。SSH上でポートフォワードが可能です。iOS端末でも、これを可能にするアプリが複数あるようです。ここでは詳細については割愛させていただきます。
- SSHを用いたポートフォワードの例: https://www.karakaram.com/notes-on-ssh-local-port-forwarding/
httpsでアクセスできるようにする
おもに2種類のアプローチがあります。
- https用の入口を用意してくれるサービスにポートフォワードする
- 開発機で(ここではVueCLIで) オレオレ証明書(自己署名証明書)を使用してhttpsで待ち受ける
外部サービスを利用する
外部サービスにてhttpsで待ち受け、そこにきたリクエストを開発機上に転送することが可能です。これを行える有名なサービスとして ngrok があります。
注意点としては、アドレスを知っていれば誰でもアクセスできるようになります。(無料プランの場合)
登録をし、ダッシュボードの指示に従ってngrokのダウンロード、セットアップを行えばポートフォワーディングが行えるようになります。
オレオレ証明書を使用する
ここまで面倒そうな方法をつらつら書き連ねてきましたが、実はvue-cliはhttpsでのサーブに対応しています。証明書をわざわざ用意する必要もありません。
vue-cli-service serve
のオプションに --https
をつけるだけです。
例えば普段サーバーをyarn serve
で起動しているのであればyarn serve --https
、npm run serve
で起動しているのであればnpm run serve -- --https
のようにコマンドをたたくだけで、オレオレ証明書を使用してhttpsでサーバーを起動できます。