webpack devServer을 이용해 localhost https 설정하기

 

개발 환경 localhost에서 로그인 시 HttpOnly와 Secure로 설정된  리프레시 토큰 쿠키가 제대로 들어오는지 확인해야 했는데 개발환경이  http라서 확인할 수 없었던 문제가 있었습니다. 그래서 https로 localhost를 설정하는 방법을 알아보게 되었습니다

 

1. mkcert를 설치합니다

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

 

 

2.인증서를 생성해 줍니다

 

mkcert localhost 127.0.0.1

 

 

 

 

3.webpack의 devServer에 설정해 줍니다.

 

 

  devServer: {
  ...,
    port: 3000,
    server: {
      type: 'https',
      options: {
        key: './localhost+1-key.pem', // 생성된 파일의 이름을 입력해주세요
        cert: './localhost+1.pem',
      },
    },
  },

 

 

4. htttps로 잘 나오는 모습

 

 

------

 

주의

 

.gitignore에 pem키를 추가해주고 github에 올려야합니다

 

 

pem키는 공유하지 않는 것을 권장한다고 합니다 또한 인증서를 발급한 컴퓨터에서만 로컬 인증 기관이 설치되어 있기 때문에 git으로 공유를 하더라도 의미가 없다고 합니다.

 

 

 

 

참고자료

 

 

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

 

DevServer | 웹팩

 

[React] localhost https 설정하기