create-react-app 3.3.0 WebSocket 이슈 해결하기

개발자쿠키·2020년 1월 10일

React WS create react app react dev utils react scripts websocket wss

create-react-app 3.3.0 Bug

create-react-app 3.3.0 ver 를 사용하여 React 서비스를 만든 경우, https 프로토콜 사용 시 다음과 같은 에러메세지를 볼 수 있습니다.

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

./node_modules/react-dev-utils/webpackHotDevClient.js
node_modules/react-dev-utils/webpackHotDevClient.js:60

원인

https 프로토콜 사용 시에는 WebSockets over SSL/TLS (WSS) 프로토콜을 사용해야 하는데,
create-react-app 하위 패키지인 react-scripts 패키지 v3.3.0 에서
http 와 https 모두 WebSockets (WS) 를 사용하도록 설정되어 있어서 생긴 이슈입니다.

react-scripts 를 3.3.0 버전으로 설치 시, webpackHotDevClient.js 파일이 아래와 같이 ws 로 지정되어 있는 것을 볼 수 있습니다.

var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    ...

여기서 protocol 부분이 아래와 같이 fix 되어야겠죠?

var connection = new WebSocket(
  url.format({
    protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
    ...

create-react-app 개발팀은 이 이슈를 알고 있을까요?

create-react-app Github 의 이 PR 을 통해 개발 팀에서도 이를 인지하고 픽스 중인 것을 알 수 있습니다.

그래서 다음 버전인 3.3.1 에서는 이 버그가 픽스되어 나갈 예정이지만,
현 시점 - 2020.01.13 을 기준으론 아직 3.3.1 version 이 릴리즈되지 않았으므로,
지금은 npm 을 통해 픽스된 새 버전을 받아볼 수 없습니다.

⚡️ 해결 방법

그러므로! 지금 우리가 할 수 있는 방법은 크게 아래 2가지 입니다.

1번) react-scripts 를 이전 버전인 `3.2.0` 으로 downgrade 한다.

2번) create-react-app 오픈소스 깃헙에서 이번에 픽스된 package 인 "react-dev-utils" 부분의 master 버전 코드를 다운받고, 
    이를 개인 github Repository 에 올린 다음, 이 Repository를 npm install 받아 사용한다.

☝🏻 1번 방식

만약 현재 서비스에서 3.2.0 ver 를 사용해도 문제가 없다면, 3.2.0 으로 downgrade 하는 것이 가장 빠릅니다.

아래와 같이 package.json 파일에서 react-scripts 의 버전을 3.2.0 으로 설정하고,
npm install 명령어로 dependencies 를 새로 다운받아 서버를 띄우면 됩니다.

"dependencies": {
	...
	"react-scripts": "3.2.0"
}

✌🏻 2번 방식

1. create-react-app 오픈소스 다운받기

우리가 오버라이딩 해야할 파일은 webpackHotDevClient.js 이므로,
다른 packages 파일은 유지하고 react-dev-utils 패키지에 해당하는 코드만 오버라이딩 해보아요.

우선 create-react-app 오픈소스 (https://github.com/facebook/create-react-app/tree/master/packages/react-dev-utils) 에서 master branch 를 기준으로 전체 코드를 다운받습니다.

2. 개인 Repository 에 올리기

다운받은 코드 중packages/react-dev-utils 하위의 코드만 개인 Repository 에 올려줍니다.

👉🏻 예시) https://github.com/WoolimRyu/react-dev-utils-3.3.0-bug-fixed-version

3. package.json 파일 수정하기

아래와 같이 react-scripts 는 3.3.0 버전으로 유지하고, 아래에 새로 만든 Repository URL 을 적어줍니다.
그러면 react-dev-utils 에 해당하는 파일들이 오버라이딩 됩니다.

"dependencies": {
    "react-scripts": "3.3.0",
    "react-dev-utils-3.3.0-bug-fixed-version": "github:WoolimRyu/react-dev-utils-3.3.0-bug-fixed-version"
}