React localhost에 https 달기(openssl) - window

​

윈도우에서 리액트 로컬 개발 중에 테스트 용으로 인증서를 달아줬습니다.

openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

먼저 다음 명령어로 key와 crt 파일을 만들어줍니다.

(저는 윈도우에 ubuntu가 깔려있어서 openssl을 이용할 수 있었습니다.)

 

​

윈도우키 + R을 눌러서 "MMC" 를 실행해줍니다.

​

좌측 메뉴 상단의 파일 -> 스냅인 추가/제거 -> 인증서를 더블 클릭합니다.

​

컴퓨터 계정을 선택하고,

로컬 컴퓨터를 선택한 뒤에, 마침을 누릅니다.

확인을 누르고 해당 스냅인 창을 빠져나옵니다.

​

그리고 좌측 메뉴에서 인증서 - 신뢰할 수 있는 루트 인증 기관으로 이동합니다.

인증서를 우클릭하고, 모든 작업 -> 가져오기를 누릅니다.

​

​

다음을 누릅니다.

​

찾아보기를 눌러서 처음에 생성했던 crt파일을 넣어줍니다.

​

​

이제 리액트 프로젝트 디렉토리로 이동하겠습니다.

# .env
HTTPS=true
SSL_CRT_FILE=localhost.crt
SSL_KEY_FILE=localhost.key

프로젝트의 루트 디렉토리에 .env를 만들어주고, crt와 key파일을 루트 디렉토리로 옮깁니다.

그 후 위와 같이 설정해줍니다.

 

​

https가 설정되었습니다.

​

만약, localhost대신 다른 것으로 지정하고싶다면,

처음 openssl로 생성할 때 DNS 부분에 원하는 이름으로 지정하고,

C:\Windows\System32\drivers\etc\hosts

파일을 수정해서 127.0.0.1에 localhost 대신 다른 도메인을 지정해주면 됩니다.

 

* 예전에 작성했던 건데, 왜 했었는지는 잘 기억이 나지 않습니다.