mkcert - localhost를 https 환경으로 만들기

webpack의 dev server를 이용해 localhost로 개발을 진행하다보면 https로 인해 스트레스를 받는 상황이 생깁니다.

(웹 서버가 http를 이용한 접근을 제한하거나 쿠키의 Secure 옵션이 설정되어 있는 경우 등)

 

이는 localhost가 http로 동작하기 때문입니다.

 

이러한 문제가 발생했을 때 서버의 설정을 바꾸기 보다는 localhost의 설정을 바꿔 문제를 간단하게 해결할 수 있습니다!

 

바로 mkcert를 이용하면 localhost를 https로 동작시킬 수 있습니다 👍

 

GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd lik

 

위의 공식 페이지를 보고 mkcert를 설치해주세요.

 

설치가 완료됐다면 https를 적용할 프로젝트의 최상위 디렉토리에서 mkcert -install을 실행시켜줍니다.

 

mkcert 설치 완료

 

그리고 mkcert localhost 127.0.0.1을 실행해줍시다.

 

그러면 *-key.pem 파일과 *.pem 파일이 생성됩니다.

 

마지막으로 webpack의 devServer 설정에 다음과 같은 코드를 추가하면 설정이 끝나게 됩니다.

devServer: {
  ... // 기존 설정들
  https: {
    key: "./*-key.pem", // 생성된 파일의 이름을 입력해주세요
    cert: "./*.pem"
  }
}

 

 

다시 로컬 서버를 실행시키면 다음과 같이 https 설정이 정상적으로 적용된 것을 확인할 수 있습니다!