1

ローカルの開発環境で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になっているためブラウザのマイクを許可しているにも関わらずマイクの使用が許可できずにブロックされてしまっているという問題が発生している。
※ブラウザのサイトの設定のところのマイクは許可するのラジオボタンを選択しています。

発生している問題・エラー

スクリーンショット 2024-05-11 154454.png

試したこと

package.json
scriptに"start": "webpack-dev-server --mode development
& HTTPS =true"としたが通信がhttpのままであった

{
  "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のプロジェクトをはじめていない)ことや自分が調べられた情報では実装が難しかったため質問させていただきます。

よろしくお願いいたします。

7
  • HTTPS の実装は、ディプロイ先の環境に依存すると思われるので、ディプロイ先の環境の情報を提供いただけると良いと思います。クラウドサービスを使っているのであれば、そのサービス名、オンプレや IaaS なら OS と Web サーバーのミドルウェア等の情報があれば良いと思います。 Commented 5月11日 7:48
  • 1
    ローカル環境、つまりお手元のパソコンで実行しているサーバーに対して自分自身 (localhost) からアクセスしたときにエラーが出るのか、インターネット上のどこかにデプロイしたサーバーに手元からアクセスしたときにエラーが出るのか、どちらでしょうか。質問文を読むに前者なのかなと思ったのですが、スクリーンショットを見ると後者のようにも見えました。前者であれば localhost でアクセスするやり方を、後者であれば真面目に HTTPS 化するやり方を回答することになりそうです。
    – nekketsuuu
    Commented 5月11日 8:00
  • そもそも追加されたオプションは「なぜそうしようとしたか」が知りたいです。webpack-dev-serverは--httpsの引数が利用可能ですが、「デプロイ時にも」とのことなのでそもそもデプロイ先でwebpack-dev-serverを使うのは不適切でもあります。(あくまでも開発用のサーバーです)
    – hinaloe
    Commented 5月11日 8:25
  • hiromasa masudaさん 回答していただきありがとうございます。デプロイ先の環境ですが今はローカルでの開発環境でのみ作成しているためありません。 今はデプロイ先の環境がないのですが、ローカルから環境を移すときに現時点でhttps通信ができるのであれば一緒に設定することはできないかと思い質問させていただきました。                       デプロイをする場合でのhttpsの実装はデプロイ先により設定が変わってくるとのこと勉強になりました。丁寧に教えていただきありがとうございます。
    – mitu
    Commented 5月12日 7:22
  • nekketsuuuさん 回答していただきありがとうございます。locahostからアクセスしました。 Network (IPv6): http://[fe80::658c:ff6:5b36:22a3]:8080/からアクセスしたときにマイクのエラーが出てしまいました。質問を投稿した後に別のQ&Aサイトでipv6ではなくlocalhostで動かすとよいと教えていただいた方のを試したところマイクのエラー自体は出なくなりました。現時点でエラー自体はでなくなったもののhttps化したいと考えております。
    – mitu
    Commented 5月12日 7:31

1 件の回答 1

6

ちょっとXY問題になっていると思われます。一つ一つ説明していきます

通常、開発環境ではlocalhostへのHTTPアクセスで行い、ほとんどの場合で問題が発生することは無い

HTTPアクセスであるためマイクが有効にならないと困っているようですが、そもそも開発用Webサーバーへのアクセス方法が間違っています。npm startの時に下記のようなメッセージがでたと思います。

<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.x.x:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::xxxx:xxxx:xxxx:xxxx]:8080/

画像が潰れて不明確なところがありますが、そのうちの三番目である「On Your Network (IPv6)」のアドレスにアクセスしていませんか?それがそもそもの間違いです。https://localhost:8080/にアクセスすべきです。lcoalhostは自分自身を示すループバック用のアドレスですが、必ずそのコンピューター上のサイトになるため、信頼できるサイトとみなされます。セキュリティ上の理由で、ブラウザーではHTTPS接続でしか有効にならない機能がいくつかありますが、localhostは特別にHTTP接続であっても有効になることがあります。マイクの機能もその一つです。https://localhost:8080/であれば、HTTPのまま、マイクを使用できることでしょう。(http://127.0.0.1:8080/http://[::1]:8080/でも同じく可能です。マイクが有効になることはWindows 11のMicrosoft EdgeとGoogle Chromeで確認しています。)

もし、npm startを実行する開発環境が別サーバーやWSL2や仮想マシン等の場合は、注意が必要です。npm startで公開されるhttp://localhost:8080/は、そのnpm startを実行している環境でしかアクセスできないため、パソコン上のブラウザーでhttp://localhost:8080/にアクセスしても表示できません。そのような場合はポート転送を使用してください。SSH接続しているのであればSSHのポートフォワーディング機能を使えば良いでしょう。開発にVisual Studio Codeを使っている場合はもっと簡単で、Visual Studio Codeのポートの転送機能が有用で、ほとんどの場合は自動で設定されます。

通常、本番環境ではフロントエンドにWebサーバーを置いて、HTTPSはWebサーバーでのみに設定する

ここでのフロントエンドというのはブラウザーからのアクセスを最初に受け付けるサーバーのことです。もっと手前にファイアウォールやロードバランサー等がある場合がありますが、最初にコンテンツを扱うという処理を行うところと思ってください。通常、このフロントエンドのWebサーバーには、Webサーバーに特化したソフトウェアを用います。このWebサーバーというのは、次のようなソフトウェアのことです。

  • nginx
  • Apache HTTP Server (Apache)
  • Microsoft Internet Information Services (IIS)

静的コンテンツはこれらのWebサーバーで直接表示します。動的コンテンツは、CGIのようにWebサーバーが直接処理するか、PHP-FPM(PHP)やJetty(Java)やGunicorn(Python)やPuma(Ruby)等のバックエンドへFastCGIまたはリバースプロキシ接続して、返ってきたコンテンツを表示します。このWebサーバーからバックエンドの接続は、暗号化の必要が無いループバックアドレスまたはUNIXドメインソケットを使うため、バックエンド側はHTTPSではなくFastCGIやHTTPといった非暗号化の通信のみフロントエンド側に提供します。

ということで、本番環境をHTTPSにしたいという場合は、本番環境ではどのWebサーバーを使っているかを調べて、そのWebサーバーでHTTPSの設定をすれば良いとなります。ただ、デプロイするサービスによっては、自分でサーバーの設定をしなくても、設定画面でSSLを有効にしたりできるところがほとんどかもしれません。

なお、今回開発しているというWebアプリを見る限り、実体は静的コンテンツのように思われます。その場合は、本番環境ではdistの中身をWebサーバーの公開ディレクトリに置くだけですので、ますます、そのWebサーバーについて考えれば良いなります。

どちらにしても、開発環境で本番環境のHTTPSを用意する必要はありません。

webpack-dev-serverでHTTPSを有効にする方法

ここまで来てわかったように、開発環境でHTTPS化する必要性は皆無です。でも、どうしてもやりたい、後学のために知っておきたいという事もあるでしょう。

オプションや設定はバージョンによって大きく異なる場合があります。どこかのサイトやコメントを見る前に正式なドキュメントを読む癖を付けてください。

DevServer | webpack #devServer.server

上記に書いて有るとおり、serverオプションでhttpsを指定するだけです。方法は二つあり、webpack.config.jsで設定するか、コマンドで--server-type httpsを付けるかです。今回であれば、"start": "webpack-dev-server --mode development --server-type https"とするのが一番早いかと思います。自己署名証明書を自動作成するため、証明書を用意する必要はありません。

なお、https: tureと設定するとかコマンドで--httpsオプション付けるとか書いているサイトやコメントがありますが、これは古いバージョンでの方法であり、webpack-dev-server 5.0.4以上では動作しません。

1
  • raccyさん 開発時と本番環境でのhttps等の考え方について詳しく回答とご説明していただきましてありがとうございます。開発環境で信頼しているサイトとみなされるためにはlocalhostを利用する必要があるのですね。これからlocalhostを利用して開発をしていきます。また本番環境でhttps化するにはwebサーバ上でhttps通信ができるような設定をすれば良く開発環境でlocalhostは信頼できるサイトとみなされるためhttps通信ができるようにする必要がないとのこと説明していただいているのを拝見し理解しました。開発環境でhttps化する必要はないとのことでしたが最後に示していただいたhttps有効化を勉強のため試してみたところsslの記載があり暗号化されていることをコマンドプロンプト上で確認できました。今後設定やオプションについてつけたい場合や開発を進めるときには公式のドキュメントを先に読む癖をつけます。
    – mitu
    Commented 5月12日 8:22

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

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