0

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

1 件の回答 1

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のリモートデバッグで用意されている機能を利用して、容易に実現可能です。

SSHを使用する場合

最近のPCであれば、Windows,macOSいずれでもOpenSSHが使用可能です。SSH上でポートフォワードが可能です。iOS端末でも、これを可能にするアプリが複数あるようです。ここでは詳細については割愛させていただきます。

httpsでアクセスできるようにする

おもに2種類のアプローチがあります。

  • https用の入口を用意してくれるサービスにポートフォワードする
  • 開発機で(ここではVueCLIで) オレオレ証明書(自己署名証明書)を使用してhttpsで待ち受ける

外部サービスを利用する

外部サービスにてhttpsで待ち受け、そこにきたリクエストを開発機上に転送することが可能です。これを行える有名なサービスとして ngrok があります。
注意点としては、アドレスを知っていれば誰でもアクセスできるようになります。(無料プランの場合)

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

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

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

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

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

1
  • 早速のご回答ありがとうございます。vue-cliの機能でhttpsを利用できたのですね。他にもhttpsでのアクセスを可能にする方法がたくさんあるとのことでvue以外を利用したときには参考にさせていただきます
    – ymzkd
    Commented 2022年11月17日 1:37

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。