반응 앱 오류 : 'WebSocket'을 구성하지 못했습니다 : HTTPS를 통해로드 된 페이지에서 안전하지 않은 WebSocket 연결을 시작할 수 없습니다

React 앱을 배포하고 있지만 https를 통해 페이지를 방문하면 이상한 오류가 발생합니다.

https를 통해 페이지를 방문하면 다음 오류가 발생합니다.

SecurityError : 'WebSocket'을 구성하지 못했습니다 : HTTPS를 통해로드 된 페이지에서 안전하지 않은 WebSocket 연결을 시작할 수 없습니다.

그러나 http를 통해 페이지로 이동하면 완벽하게 작동합니다.

문제는 내가 말할 수있는 한 웹 소켓을 사용하지 않는다는 것입니다. 코드를 검색하여 wss : 대신 https 또는 ws : 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에서 serve와 함께 작동하는 배포 스크립트를 추가하십시오.

"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.json및 node_modules( rm -rf package-lock.json node_modules) 을 삭제 한 다음을 수행해야 할 수도 npm i있습니다. 새로운 리포지토리 package.json와 리포지토리를 모두 커밋하십시오 package-lock.json.

반응으로 엉망 react-scripts이 된 지 오래되었지만, 실수하지 않으면 webpack 위에 구축되므로 webpack-dev-server를 사용하여 개발 속도를 높일 수 있습니다. 디스크에서 변경 사항을 발견 할 때 핫 재로드를 트리거하기 위해 클라이언트와 통신하기 위해 웹 소켓을 사용합니다.

아마도 개발 모드에서 응용 프로그램을 시작했을 것이므로 프로덕션 환경에 배포하는 경우 npm run build즐겨 사용하는 웹 서버와 함께 제공 할 수있는 일련의 자바 스크립트 파일을 생성 해야합니다 .

• 폴더 및 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 웹 사이트에서이 기사를 봐야합니다. Heroku 앱을 만들 때 필요한 Github에서 React 앱의 특정 빌드 팩 인 mars / create-react-app-buildpack을 가리키는 'Create-React-App'으로 만든 React 앱을 올바르게 배포하는 방법에 대해 설명합니다.

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

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

모두가 여기에있는 안전하지 않은 웹 소켓 문제와 동일한 문제가 있었으므로 Create-React-App 기사에서 솔루션을 테스트했습니다. 문제를 해결했습니다. node_module 등을 수정할 필요가 없습니다.

React 앱의 루트에서 CLI에서 heroku 앱을 만들 때이 명령 만 있으면됩니다.

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

그때:

git push heroku master

Heroku 웹 사이트를 방문 할 때 "안전하지 않은 웹 소켓"오류없이 예상대로 실행됩니다.

(Heroku에 이미 생성 / 배포 한 후에 mars / create-react-app 빌드 팩을 추가하는 방법을 모르겠습니다. 아직 그 부분에 도달하지 못했습니다.)

위의 솔루션은 create-react-app 팀이 Heroku에 배포 해야하는 문제를 해결하는 것으로 보입니다.