분류 Reactjs

localhost의 React 앱에서 HTTPS를 구성하는 방법

컨텐츠 정보

  • 조회 265 (작성일 )

본문

create-react-app을 사용하여 애플리케이션을 빌드하고 컴퓨터에서 로컬로 실행하는 경우 기본적으로 HTTP 프로토콜을 사용하여 제공됩니다.


프로덕션에서 실행되는 모든 애플리케이션은 HTTP의 보안 버전인 HTTPS를 사용하여 제공됩니다.


특히 Netlify 또는 Vercel과 같은 최신 플랫폼을 사용하여 앱을 제공하는 경우 대부분의 경우 거의 노력 없이 HTTPS를 얻을 수 있습니다.


하지만 로컬에서 .. 우리가 원하는 것보다 조금 더 복잡합니다.


어떻게 할 수 있는지 봅시다!


아시다시피 create-react-app 애플리케이션은 npm run start 또는 간단히 npm start를 사용하여 실행됩니다. package.json 파일의 스크립트 섹션에 다음 줄이 있기 때문입니다.


"start": "react-scripts start"

다음으로 변경하십시오.


"start": "HTTPS=true react-scripts start"

HTTPS 환경 변수를 true 값으로 설정합니다.


그래도 충분하지 않습니다.


이제 로컬 인증서도 생성해야 합니다. 이 단계는 create-react-app 앱 뿐만 아니라 모든 앱에서 잘 작동하지만 이 게시물에 참고로 포함하겠습니다.


참고 : macOS에서 이 명령을 실행했습니다. Linux는 동일한 방식으로 작동해야 합니다. Windows를 보장하지 않습니다. 


프로젝트 루트 폴더에서 다음을 실행합니다.


openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365

이제 실행 :


openssl rsa -in keytmp.pem -out key.pem

이제 폴더에 cert.pem 및 key.pem 파일이 있어야 합니다.


이제 package.json 파일의 시작 스크립트를 다음과 같이 변경하십시오.


"start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start",

npm run start를 실행하고 https : // localhost : 3000 (또는 앱이 사용하는 포트 (다른 ​​경우 사용하는 포트-제 경우에는 3008))에 액세스하면 다음 경고 메시지가 표시됩니다.


Screen%20Shot%202020-07-31%20at%2015.52.07.png 


macOS에서 문제를 해결하려면 macOS에 로컬 인증서를 설치하는 방법에 대한 튜토리얼의 지침을 따르십시오.


이렇게 하면 SSL을 사용하여 제공되는 앱을 문제 없이 볼 수 있습니다.