React_개발 환경에서 HTTPS 사용하기

React.js 개발 환경에서도 OAuth 인증 테스트의 이유로 HTTPS 서비스를 실행시켜야 할 경우가 있다.

이런 경우, package.json 파일의 scripts 그룹의 start 항목에 HTTPS=true를 추가하면 된다. 이게 가장 간단한 방법이다.

  "scripts": {
    "start": "HTTPS=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

TLS 인증서가 준비되어 있지 않은 채로 실행하게 되면, 브라우저에서 경고 메시지를 보여주는데, 프론트엔드 개발 단계에서는 큰 문제가 되지 않는다.

다만, 사설 인증서라도 발급해서 경고 메시지 없이 HTTPS 서비스를 실행하고자 하는 경우에는 다음과 같이 추가 작업을 해줄 필요가 있다.

openssl req -x509 -newkey rsa:2048 -keyout mykey.pem -out mycert.pem

  "scripts": {
    "start": "export HTTPS=true&&SSL_CRT_FILE=mycert.pem&&SSL_KEY_FILE=mykey.pem react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

브라우저에서 여전히 경고 메시지를 출력하는데, 인증서 항목을 클릭해서 OS의 키체인이나 인증서 저장소에 저장해두면 된다. 자세한 내용은 다음 문서를 참고하는 게 좋다.