[mkcert] localhost에서 https 적용하기 (+ webpack devServer에 설정하는 법)

 

 

 보안을 위해 현재 개발 중인 프로젝트에서 https를 사용해야만 하는 상황이 생겼다.

기본적으로 개발에 이용하는 localhost 환경에서는 TSL/SSL 인증서가 없어 http를 이용할 수밖에 없지만,

라이브러리를 이용한다면 간단하게 인증서를 발급받아 로컬에서도 https를 사용할 수 있다.

mkcert를 이용해 로컬 개발 환경에서 https 통신을 할 수 있는 방법을 알아보자.

 

 

mkcert 설치와 인증서 발급 (macOS)

---

1. 터미널을 실행한 뒤 mkcert를 설치한다.

brew install mkcert

 

2. 아래 명령어를 입력하면 로컬 인증 기관(CA)이 생성되고, mkcert로 생성한 로컬 CA는 기기에서 로컬로만 신뢰할 수 있다.

mkcert -install

 

3. 프로젝트의 루트 디렉터리 혹은 인증서를 저장할 디렉터리로 이동한 뒤, 아래 명령어를 실행해 인증서를 생성해준다.

mkcert localhost

// 사용자 지정 호스트 이름을 사용하는 경우엔 localhost 대신 다음과 같은 형식으로 생성한다
// mkcert mysite.example

 

아래와 같은 문구가 나오고 저장한 위치에 pem 파일이 잘 들어왔다면 인증서 준비는 전부 완료다! 

이제 발급받은 인증서를 서버에 적용만 해주면 마무리된다.

 

 

webpack devServer에 적용

---

devServer: {
	...
    https: {
    	key: "./*-key.pem", //조금 전 생성한 파일의 이름
        cert: "./*.pem"
    }
}

 

 

현재 나는 웹팩의 개발서버를 이용해 프로젝트를 개발 중이라 웹팩 devServer에 해당 인증서를 적용해주었다.

 

devServer 설정 파일에 위와 같이 https 객체에 key와 cert에 조금 전 발급받은 파일의 이름과 위치를 입력해 주고,

해당 설정을 저장한 후, 다시 프로젝트를 실행시켜 보면 https로 통신이 가능해진 것을 확인할 수 있다!

 

 

 

 

 

 

 

참고 사이트

- https://web.dev/i18n/ko/how-to-use-local-https/