Windows에서 https로 localhost 테스트하기(feat. React)

이전에 mac에서 설정하는 법을 설명했었는데(*mac에서 설정하는 법 참고) windows에서는 다른 몇 가지가 있어서 추가로 정리해 봅니다. Powershell에서 설치하는 법만 간략히 정리하니 다른 문의 내용은 댓글로 달아주세요.

우선 윈도우에서 mkcert 설치를 위해 패키지 관리자인 chocolatey를 설치합니다. powershell 관리자모드에서 아래와 같이 실행하세요.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

이제 chocolatey로 mkcert 설치를 설치합니다.

choco install mkcert

이제 root 인증서를 생성합니다.

mkcert --install

C:\Program Files\Eclipse Adoptium\jdk-21.0.2.13-hotspot\lib\security 경로에 cacerts 가 생성됩니다. 폴더 위치는 PC 설정에 따라 다를 수 있으니 참고하세요. root 인증서로 별도로 사용할 일은 없으니 참고만 하세요.

사용할 hostname으로 인증서를 생성합니다.

mkcert localhost

실행하면 해당 폴더에 localhost-key.pem , localhost.pem 파일이 생성됩니다. 사용려는 폴더에서 실행하거나 생성된 파일을 옮기면 됩니다. 별도의 host name을 사용한다면 localhost를 수정해 실행하면 됩니다.

linux나 mac에서는 별도 환경변수 설정없이 package.json에서 등록했었는데 vscode에서는 powershell로 실행할 때 환경 변수 설정 방법이 달라 아래와 같이 따로 환경변수를 등록해 줍니다.

$env:HTTPS = "true" ; $env:SSL_CRT_FILE="localhost.pem" ; $env:SSL_KEY_FILE="localhost-key.pem" ;

한 번 등록하면 이후에는 별도 추가 설정은 필요없습니다. 

이제 npm start를 하면 아래와 같이 https로 잘 실행되는 것을 확인할 수 있습니다.

끝!