[React] localhost https 설정하기

개요

프론트엔드 개발을 하다 보면 localhost에서 https가 필요한 경우가 자주 있다.

예를 들어, 백엔드 API에서 Set-Cookie 헤더를 통해 쿠키를 전달하도록 구성할 때 Secure 설정이 걸려있다면 웹 브라우저와 웹 서버가 https로 통신하는 경우에만 쿠키를 저장한다.

 

참고) Set-Cookie Secure 설정에 대한 자세한 내용은 아래 생활코딩 수업에서 확인할 수 있다.

https://opentutorials.org/course/3387/21744

쿠키 옵션 - Secure & HttpOnly - 생활코딩

 

본론으로 돌아와서 로컬에서 https를 사용하는 방법을 알아보자.

mkcert 설치

로컬에서 https를 사용하기 위해서는 ssl 인증서가 필요하다.

로컬 개발 환경에서 자체 서명된 SSL/TLS 인증서를 생성하는 도구인 mkcert를 통해 인증서를 생성해 보자.

 

mac OS에서는 brew를 통해 쉽게 mkcert를 설치할 수 있다.

brew가 설치되어있지 않은 경우 설치를 하고 진행해야 한다.

brew install mkcert

windows에서는 chocolatey를 통해 설치해야 하는데, chocolatey 설치가 조금 까다롭다.

이 포스팅에서는 brew, chocolatey 등 패키지 매니저를 설치하는 방법까지 다루지는 않는다.

chocolatey를 이용해 mkcert를 설치하자.

choco install mkcert

 

인증서 생성

mkcert 설치가 완료되었으면 아래 명령어를 통해 로컬에 CA 인증서를 생성한다.

설치 팝업이 뜨는 경우 예를 누르고 진행하면 된다.

mkcert -install

이후 아래 명령어를 통해 현재 경로에 키 파일을 생성해 보자.

명령어를 통해 파일명 설정이나 추가 호스트 설정이 가능하지만 여기에서는 해당 부분은 생략하고 localhost 기준으로 가장 심플하게 생성하여 진행한다.

mkcert localhost

해당 명령어를 수행하면 터미널의 현재 경로에 localhost.pem, localhost-key.pem 파일이 생성된다.

해당 파일들을 프로젝트로 옮기고 이를 통해 https로 로컬 개발 환경을 구동한다.

 

이때 주의해야 할 점은 위 과정을 작업한 컴퓨터에서만 로컬 인증 기관이 설치되어 있기 때문에 git에 올려두는 것은 의미가 없다.

또한 키 파일들은 항상 보안과 관련이 있으니 .gitignore를 등록하는 습관을 들이도록 하자.

 

여기에서는 cert 폴더를 생성하고 키 파일들을 해당 경로에 보관하여 작업한다.

.gitignore 파일에 cert 폴더를 등록

cert 폴더 내에 키 파일 보관. ide에서 gitignore된 폴더 및 파일이라는 표시가 되었다.

실행 script 구성

이제 package.json에서 실행 script를 구성한다.

이 때 주의해야 할 점은 mac OS와 windows의 실행 명령어가 다르다는 것인데,

필자의 경우 mac OS와 windows를 둘 다 사용하기 때문에 이 부분에서 애를 먹었다. 이 포스팅을 하게 된 이유

"scripts": {
  "start": "react-scripts start",
  "start:mac": "HTTPS=true SSL_CRT_FILE=cert/localhost.pem SSL_KEY_FILE=cert/localhost-key.pem npm run start",
  "start:windows": "set HTTPS=true&&set SSL_CRT_FILE=cert/localhost.pem&&set SSL_KEY_FILE=cert/localhost-key.pem&&npm run start"
}

mac OS의 경우 npm run start:mac,

windows의 경우 npm run start:windows를 입력하면 https 환경에서 localhost가 실행될 것이다.

사용하는 OS가 하나라면 당연히 해당하는 명령어 하나만 구성하여 사용해도 무방하다.

 

마무리

mac OS와 windows의 명령어가 여기에서까지 다르다는 게 참 안타깝다.

내용은 거의 같은데도 문법의 차이만 존재하니 개발자들의 환경 구성하는 시간만 낭비되는 것 같다..

또한 windows 실행 명령어에서 && 앞뒤로 공백을 넣으면 동작하지 않는다.

항상 코딩할 때 가시성을 위해 공백을 넣는 습관이 있는데 덕분에 또 애를 먹었다.

이러나저러나 불편-