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
