일반적으로 React 앱이 http : // localhost : 3000에서 로컬로 실행되는 것을 확인했습니다. 

그러나 프로덕션에서 앱을 배포하고 실행할 때 주로 HTTPS에서 호스팅합니다. HTTPS를 통해 요청을 처리하는 API를 사용해야 하는 경우 개발에서 HTTPS를 실행하면 유용합니다.

https://dev.to/ganeshagrawal/how-to-setup-https-locally-with-create-react-app-e46

안녕하세요, 오늘은 HTTPS를 통해 로컬 React 앱을 제공하는 방법에 대해 논의 할 것입니다. 이 기사에서는 SSL 인증서를 사용하여 create-react-app을 위해 개발 중인 HTTPS를 설정합니다.

Create-react-app (CRA)는 React App을 개발할 때 초기 상용구를 설정하는 편리하고 쉬운 방법입니다. CRA를 사용하여 React App 빌드를 시작하려면 일반적으로 다음 단계를 사용하여 설정을 시작하고 기본 CRA 앱을 실행합니다.

npx create-react-app dummy-app
cd dummy-app
npm start

이 단계를 실행 한 후 반응 앱은 http : // localhost : 3000에서 로컬로 실행됩니다. 하지만 https : // localhost : 3000에서 실행하고 싶습니다. 따라서 문제는 https에서 로컬로 앱을 실행하거나 테스트하는 방법입니다.

이것은 개발에서 자체 SSL 인증서 및 HTTPS를 설정하는 매우 간단한 프로세스입니다. 이 가이드의 경우 brew 사전 설치가 필요합니다.

1 단계 : HTTPS 추가 

package.json에서 시작 스크립트를 업데이트하십시오.

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

이제 npm start 또는 yarn start를 실행하면 브라우저 화면에 다음이 표시됩니다.

2 단계 : SSL 인증서 생성 

이전 단계에서 이미 https를 사용하도록 설정되었습니다. 그러나 유효한 인증서가 없으므로 연결이 안전하지 않은 것으로 간주됩니다. 이제 로컬 호스트에서 작동하는 SSL 인증서를 만듭니다. 인증서를 얻는 가장 쉬운 방법은 mkcert를 사용하는 것입니다.

터미널에서 다음 명령을 실행하십시오.

# Install mkcert tool
brew install mkcert

# Setup mkcert on your machine (creates a CA)
mkcert -install

위의 명령을 실행하면 향후 모든 프로젝트에 대한 인증서를 생성 할 수 있는 인증 기관이 컴퓨터에 생성됩니다.

create-react-app 프로젝트의 루트에서 이제 다음을 실행해야 합니다.

# Create .cert directory if it doesn't exist
mkdir -p .cert

# Generate the certificate (run from the root of this project)
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

생성 된 인증서를 .cert 디렉토리에 저장합니다. 이는 버전 제어를 위해 커밋 되지 않아야 하므로 .cert 디렉토리를 포함하도록 .gitignore를 업데이트해야 합니다.

3 단계 : 시작 스크립트에 SSL 인증서 포함 

다음으로 새로 생성 된 인증서를 포함하도록 시작 스크립트를 다시 업데이트 해야 합니다.

"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

npm start 또는 yarn start를 다시 실행하면 이제 연결이 안전한지 확인해야 합니다.

참고 : 시작 스크립트는 Windows, Linux 및 Mac 사용자를 위해 일부 변경 될 수 있습니다.