Reactアプリエラー：「WebSocket」の構築に失敗しました：安全でないWebSocket接続がHTTPS経由でロードされたページから開始されない可能性があります

Reactアプリをデプロイしていますが、httpsでページにアクセスすると奇妙なエラーが発生します。

httpsでページにアクセスすると、次のエラーが表示されます。

SecurityError： 'WebSocket'の構築に失敗しました：安全でないWebSocket接続がHTTPS経由でロードされたページから開始されない可能性があります。

しかし、httpでページに移動すると、完全に機能します。

問題は、私が知る限り、WebSocketを使用していないことです。コードを検索して、httpsまたはwss：ではなく、httpへのリクエストがあるかどうかを確認しましたが、何も表示されません。

これまでに誰かに遭遇したことがありますか？

package.jsonファイルのコピーを含めています。デバッグに役立つコードの他の部分をアップロードする必要があるかどうかをお知らせください。

前もって感謝します。

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "baffle": "^0.3.6",
    "cross-env": "^6.0.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-player": "^1.14.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-typist": "^2.0.5",
    "webpack-hot-dev-clients": "^2.0.2"
  },
  "scripts": {
    "start": "cross-env react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

パッチの反応スクリプトを待っている人々のために：

httpsを介したローカルテストの場合、手動で編集できます

node_modules/react-dev-utils/webpackHotDevClient.js

そのファイルの62行目に必要なコードを次に示します。

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

展開するには、以下の手順に従います。

npm install -g serve // This can be done locally too

npm run build

次に、package.jsonに、サーブと連携するデプロイスクリプトを追加します。

"scripts": {
    "deploy": "serve -s build",
}

その後

npm deploy or yarn deploy

この答えがあなたがエラーを取り除くのに役立つことを願っています。

詳細については、ここを参照してください `

ここでの多くの答えは実際に問題を解決しますが、この質問をした後に私が見つけた最も簡単な方法は、npmパッケージサービスを依存関係に追加することです。

yarn add serve または npm i serve

次に、起動スクリプトを次のように置き換えます。

"scripts": {
    "start": "serve -s build",
}

これは実際にはcreate-react-app ドキュメントから直接抜粋したものです

これがより簡単な解決策です。あなたのダウングレードreact-scriptsには3.2.0、あなたの中にpackage.json（私がでました3.3.0）。

package-lock.jsonand node_modules（rm -rf package-lock.json node_modules）を削除してから、を実行する必要がありますnpm i。新しいものpackage.jsonとpackage-lock.jsonリポジトリの両方をコミットします。

私が反応をいじっていたのreact-scriptsは久しぶりですが、誤解しない限りwebpackの上に構築されているので、おそらくwebpack-dev-serverを使用して開発を高速化します。Websocketを使用してクライアントと通信し、ディスク上の変更を検出したときにホットリロードをトリガーします。

おそらくアプリケーションを開発モードで起動しているだけなので、本番環境にデプロイする場合は、実行npm run buildして、お気に入りのWebサーバーで提供できる一連のJavaScriptファイルを作成する必要があります。

• フォルダーとnode.jsアプリの後ろに作成
• アプリのルートにエクスプレスルーターを作成する
• server.jsファイルを作成する

このコードをserver.jsに追加します

const express = require('express')
const path = require('path')
const app = express()

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')))
  // Handle React routing, return all requests to React app
  app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'))
  })
}
const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`API listening on port ${port}...`)
})

pakage.jsonに

,
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && yarn && yarn run build"
  }

ルートプロキシを/folder-name-react-app/pakage.jsonに追加します

  "proxy": "http://localhost:8080"

herokuのデプロイメントでこの問題に苦しんでいる人は誰でも、reac-scriptsモジュールをにダウングレードします3.2.0。

1. package-lock.jsonファイルを削除
2. node_modulesフォルダを削除
3. react-scriptsバージョンを置き換える3.2.0
4. npm install 再びすべてのモジュール

この記事はCreate-React-App Webサイトから参照する必要があります。「Create-React-App」で作成されたReactアプリを適切にデプロイする方法を説明します。これは、Herokuアプリの作成時に必要なGithubで、Reactアプリの特定のビルドパックmars / create-react-app-buildpackを指します。

https://create-react-app.dev/docs/deployment/#heroku

https://github.com/mars/create-react-app-buildpack

誰もが抱えている安全でないWebSocketの問題でも同じ問題が発生したため、Create-React-Appの記事のソリューションをテストしました。問題は解決しました。node_moduleなどを変更する必要はありません。

ReactアプリのルートでCLIからherokuアプリを作成する場合、このコマンドを実行するだけです。

heroku create --buildpack mars/create-react-app

次に：

git push heroku master

HerokuのWebサイトにアクセスしたとき。「安全でないwebsocket」エラーなしで期待どおりに実行されます。

（Herokuに作成またはデプロイした後で、mars / create-react-appビルドパックを追加する方法がわかりません。その部分はまだわかりません。）

上記のソリューションは、Herokuにデプロイするためにcreate-react-appのチームが持つ問題に対処しているようです。