92266


VueCLIで構成したウェブアプリ内でスマホやPCに接続されたマイクの音を取り扱いたいと考えています。開発PCで立てた開発サーバーにローカルネットワーク内からiPhoneや他のPCからアクセスして動きを確認したいのですが、開発PC以外の端末ではマイクを取り扱うことができません。調べたところHTTPSでサーバーを立てる必要があるとのことで、本番ではうまく動作するのかもしれないのですが、開発中にローカルネットワーク内で他のデバイスでオーディオやビデオなどのメディアにアクセスが出来るようにすることは難しいでしょうか？


CC BY-SA 4.0
2022-11-16T14:23:18.470
92265
2022-11-16T18:35:22.673
55433
question
javascript vue.js
VueCLIで動かす開発サーバーにローカルネットワーク内のスマートフォンからアクセスしてメディア(マイクなど)を取り扱う方法


ローカル開発環境で[セキュアコンテキスト](https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts)を使用したいですか？もちろん可能です。

まず、質問文で示されている `MediaDevices.getUserMedia()` のようなAPIを使用するにはSecure
Contextが要求されますが、これは[MDN](https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts)で述べられているように、おもに以下のような環境に限って使用できます。

  * ローカルに配信されたリソース 
    * `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](https://developer.chrome.com/docs/devtools/remote-debugging/local-server/)
  * [ポートフォワーディングを使ってAndroidでlocalhostページを表示する | Android | アプリ関連ニュース | ギガスジャパン](https://www.gigas-jp.com/appnews/archives/9390)

### 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](https://ngrok.com/) があります。  
注意点としては、アドレスを知っていれば誰でもアクセスできるようになります。(無料プランの場合)

登録をし、ダッシュボードの指示に従ってngrokのダウンロード、セットアップを行えばポートフォワーディングが行えるようになります。

### オレオレ証明書を使用する

ここまで面倒そうな方法をつらつら書き連ねてきましたが、実はvue-cliはhttpsでのサーブに対応しています。証明書をわざわざ用意する必要もありません。

`vue-cli-service serve` のオプションに `--https` をつけるだけです。

例えば普段サーバーを`yarn serve`で起動しているのであれば`yarn serve --https`、`npm run
serve`で起動しているのであれば`npm run serve -- --https`
のようにコマンドをたたくだけで、オレオレ証明書を使用してhttpsでサーバーを起動できます。


CC BY-SA 4.0
2022-11-16T18:35:22.673
92266
2022-11-16T18:35:22.673
2376
92265
answer