[REACT] 로컬에서 HTTPS 환경 설정하기(Windows)

프로젝트를 하는 도중 웹캠을 적용해야 해서 getUserMedia API를 사용했다.

하지만 브라우저의 보안 정책으로 인해 getUserMedia API는 HTTPS 환경에서만 작동한다고 한다.

따라서 현재 로컬 환경인 HTTP환경을 HTTPS로 변경해주어야 한다.

1. mkcert설치

https://github.com/FiloSottile/mkcert/releases

Releases · FiloSottile/mkcert

위 링크로 가서 아래 사진에 표시된 mkcert를 다운 받아준다. 

그리고 프로젝트 폴더 안에 mkcert폴더를 만들고 다운 받은 인증서의 이름을 mkcert.exe로 변경한 후 폴더 안에 이동시킨다.

---

2. 인증서 다운받기

터미널을 열어 mkcert폴더로 이동해주고, 아래와 같이 명령어를 입력한다. 이미 설치되어 있으면 아래와 같이 출력되는데 처음이면 인증서 설치 허용에 대한 팝업이 뜬다. 예를 눌러준다.

PS C:\Users\User\Desktop\AIT-frontend> cd mkcert
PS C:\Users\User\Desktop\AIT-frontend\mkcert> ./mkcert -install
The local CA is already installed in the system trust store! 👍

그리고 도메인 인증서를 받기 위해서 아래와 같이 원하는 도메인을 입력한다. 띄어쓰기로 구분해주면 된다.

PS C:\Users\User\Desktop\AIT-frontend\mkcert> ./mkcert localhost 127.0.0.1

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"

The certificate is at "./localhost+1.pem" and the key at "./localhost+1-key.pem" ✅

It will expire on 2 October 2026 🗓

그럼 아래 와 같이 .pem과 key.pem 두 개가 다운로드 된다. 이 두 개의 파일 이름을 각각 cert.pem key.pem으로 바꿔준다.

---

3. 환경 적용

package.json파일로 가서 아래와 같이 start환경을 바꿔준다.

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

그럼 아래와 같이 HTTPS환경이 잘 설정된다.

---

[참고]

https://mungkhs1.tistory.com/64

윈도우즈 로컬 컴퓨터에 https를 위한 인증서 발급 방법2 (with mkcert.exe)

https://velog.io/@horang-e/React-localhost-%ED%99%98%EA%B2%BD-HTTPS%EB%A1%9C-%EB%B0%94%EA%BE%B8%EA%B8%B0Windows

React localhost 환경 HTTPS로 바꾸기(Windows)