Local 에서 https API 다루기

요즘은 백엔드 작업과 프론트엔드 작업을 나눠진 팀에서 작업하는 경우가 많을것인데, 이런 경우 서버에 있는 HTTPS API 를 로컬에서 다루려고 하면 웹 브라우저에서 CORS와 Cookie 이슈로 인해 작업이 어렵거나 불가능한 경우가 많을 것이다.

얼마전까지는 도메인을 시스템에 잘 연결해서 사무실에 있는 중계서버를 통해서 프론트팀 개인 컴퓨터에 적당히 잘 연결해서 사용을 하고 있었는데, 문제는 이상황에 갑자기 코로나 확진자가 급증하게 되면서, 회사가 전원 재택을 하게 되었다.

우선은 VPN을 이용해서 해결을 하였는데, 더 좋은 해결책이 있어 공유하고자 한다.

이야기가 길었다.
기본적으로 원리는 이렇다.

우선은 도메인 설정이 필요하다.
물론 도메인 설정을 안하고 로컬에 있는 host 파일등을 수정해도 되지만, 아무래도 도메인 설정을 해놓으면 팀원들이 좀 편하게 사용이 가능하다.

예를들어 회사의 API 서버의 주소가 api.example.com 이라면 local.example.com 을 127.0.0.1 로 IP를 설정한다.

mkcert 를 brew 로 다운받는다.

$ brew install mkcert

mkcert 를 컴퓨터에 설치한다.

$ mkcert -install # 이때 컴퓨터의 관리자 비번을 입력한다.

mkcert 를 컴퓨터에 설치한다.

$ mkcert "local.example.com"

package.json 을 수정한다.

"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=./local.example.com.pem SSL_KEY_FILE=./local.example.com-key.pem HOST=local.example.com PORT=3000 react-scripts start"
},

FILE 에는 해당 파일의 경로와 HOST는 웹브라우저에서 열릴 호스트명, 그리고 PORT에서 사용할 포트를 입력해준다.

마지막으로 다음과 같이 실행하면 로컬에서 웹브라우저가 실행되며 해당 작업을 할 수 있다.

$ yarn run start

만약에 여러개의 프로젝트를 진행할 경우 같은 도메인을 재활용 할 수 있다.

사용자(개발자)의 컴퓨터에는 brew install mkcert 와 mkcert -install 만 1회 해준뒤, 생성된 pem 파일만 재활용해서, 다른 프로젝트에 package.json 파일만 수정하면 그대로 재활용 할 수 있다. ( 비슷하게 여러 팀원들이 있을 경우 모두가 파일을 생성할 필요없이 단순히 brew install mkcert 와 mkcert -install 만 하면 yarn run start 만 해주면 된다.