<div id="readability-page-1" class="page"><div>이야기가 길었다. 기본적으로 원리는 이렇다.우선은 도메인 설정이 필요하다. 물론 도메인 설정을 안하고 로컬에 있는 host 파일등을 수정해도 되지만, 아무래도 도메인 설정을 해놓으면 팀원들이 좀 편하게 사용이 가능하다.예를들어 회사의 API 서버의 주소가 api.example.com 이라면 local.example.com 을 127.0.0.1 로 IP를 설정한다.mkcert 를 brew 로 다운받는다.<pre>$ brew install mkcert</pre>mkcert 를 컴퓨터에 설치한다.<pre>$ mkcert -install # 이때 컴퓨터의 관리자 비번을 입력한다.</pre>mkcert 를 컴퓨터에 설치한다.<pre>$ mkcert "local.example.com"</pre>package.json 을 수정한다.<pre>"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" },</pre>FILE 에는 해당 파일의 경로와 HOST는 웹브라우저에서 열릴 호스트명, 그리고 PORT에서 사용할 포트를 입력해준다.마지막으로 다음과 같이 실행하면 로컬에서 웹브라우저가 실행되며 해당 작업을 할 수 있다.<pre>$ yarn run start</pre>만약에 여러개의 프로젝트를 진행할 경우 같은 도메인을 재활용 할 수 있다.사용자(개발자)의 컴퓨터에는 brew install mkcert 와 mkcert -install 만 1회 해준뒤, 생성된 pem 파일만 재활용해서, 다른 프로젝트에 package.json 파일만 수정하면 그대로 재활용 할 수 있다. ( 비슷하게 여러 팀원들이 있을 경우 모두가 파일을 생성할 필요없이 단순히 brew install mkcert 와 mkcert -install 만 하면 yarn run start 만 해주면 된다.</div></div>

Stories by Harrison Jung on Medium

요즘은 백엔드 작업과 프론트엔드 작업을 나눠진 팀에서 작업하는 경우가 많을것인데, 이런 경우 서버에 있는 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 만 해주면 된다.

Local 에서 https API 다루기

댓글