httpsが必須な機能でも開発用に「localhostならhttpsじゃなくても使える」例外があるのでlocalhostを使えばいい。
Like!
webアプリの通信をhttps化したい
ローカルの開発環境でwebアプリを作成しているが,デプロイした時にも通信がhttpsになるような環境を作りたい
アプリ開発環境
言語：react,typescript
パッケージバージョン管理：node.js
webAPI：react-speech-recognition
言語等使用バージョン
react:18.3.1
typescript:5.4.5
node:20.12.8
npm startにてローカルの開発環境にてアプリを実行したときに通信がhttpになっているためブラウザのマイクを許可しているにも関わらずマイクの使用が許可できずにブロックされてしまっているという問題が発生している。
※ブラウザのサイトの設定のところのマイクは許可するのラジオボタンを選択しています。
発生している問題・エラー
試したこと
package.json
scriptに"start": "webpack-dev-server --mode development
& HTTPS =true"としたが通信がhttpのままであった
package.json
{
"name": "react_voice_stanp",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development & HTTPS =true",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "git+https://github.com/miduki-gif/react_voice.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/miduki-gif/react_voice/issues"
},
"homepage": "https://github.com/miduki-gif/react_voice#readme",
"description": "",
"devDependencies": {
"@types/node": "^20.12.8",
"@types/webspeechapi": "^0.0.29",
"ts-loader": "^9.5.1",
"typescript": "^5.4.5",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.16",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"lodash": "^4.17.21",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-speech-recognition": "^3.10.0"
}
}
調べたこと
https化するにはドメインを発行して証明書を取るという方法やmkcertを使う（vite環境にてreactのプロジェクトをはじめていない）ことや自分が調べられた情報では実装が難しかったため質問させていただきます。
よろしくお願いいたします。
1
5Answer
1
Comments
@mitu1935
Questioner@pop-culture-studioさん回答していただきありがとうございます。
[webpack-dev-server] On Your Network (IPv6)での実行では
なく教えていただいた通りlocalhostの方で改めて試したところマイクのアクセスが
許可されました。丁寧に教えていただきましてありがとうございます。
package.jsonではなく、npm start 時にHTTPS=trueを指定したらどうなりますか？
Like!
Comments
@mitu1935
Questioner@iiokazuyaさん回答していただきありがとうございます。
いただいた通りpackage.jsonではなくnpm start時にset HTTPS=true&&npm startのように指定して実行しましたが以下のようなhttp通信になったままです。<i> [webpack-dev-server] Loopback: http://localhost:8080/ <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.179.22:8080/ <i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::658c:ff6:5b36:22a3]:8080/
albireoさん 回答していただきましてありがとうございます。
コメントしていただいている場所がブラウザ上で探せなかったためこちらの全体に対してコメントさせていただきます。申し訳ございません。
mkcertを試して実行してみます。
できましたら改めてコメント致します。
丁寧にhttpsの通信ができる仕組みについても書いてくださりありがとうございます。
Like!
Comments
@mitu1935
Questioneralbireoさん mkcertで行う方法を教えていただきましてありがとうございます。試して実行してみると話してしまったのですが今回は下記の方法でやっていこうと思いました。今回は開発環境はlocalhostで実行し、本番環境ではwebサーバ上にhttpsの設定をして実行していこうと考えています。（エラーはlocalhostで実行したところマイクの問題は解消しました。）今回とは別でmkcertで行った場合の挙動について調べたり実行してみようと思います。丁寧にありがとうございました。
nginx（dockerでも直でも)でhttpsサーバを立てて、リバースプロキシでreactにproxyさせれば良いと思います。証明書はオレオレになりますが。
Like!
Comments
@mitu1935
Questioner@devzooiioozさん 回答していただきありがとうございます。自己証明書でnginxでhttpsサーバーを立ててリバースプロキシを使用する方法があるのですね。勉強で別プロジェクトでhttpsサーバを立てて挙動を見て試していきたいと感じました。知らなかった方法を教えていただきありがとうございます。今回は開発環境はlocalhostで実行し、本番環境ではwebサーバ上にhttpsの設定をして実行していこうと考えています。（エラーはlocalhostで実行したところ解消しました。）丁寧にありがとうございました。
Like!