로컬 개발 상태 공유하기 - By. ngrok

프론트엔드 개발자와 협업할 때 항상 어려웠던 부분이 백엔드의 수정사항을 어떻게 프론트엔드에게 전달할 것이냐 였다.

그래서 지금까지는 다음과 같은 방법으로 시도했었다.

1. 백: 수정사항 반영해서 배포하기 -> 프: 배포된 api로 테스트하며 개발하기
2. 백: 수정사항 반영해서 api 명세서 열심히 작성하기 -> 프: api 명세서 기반으로 개발하기 -> 이후 백이 배포하고 프론트가 테스트 해본 후 프론트 배포

그리고 이에 따르는 문제점은 다음과 같았다.

1. 백이 배포하고, 프론트가 개발하는 중에는 사용자들이 사용할 수 없다. 기존 api를 백엔드가 수정한 경우 에러가 나기 때문이다. 지금까지는 주로 사용자가 없는 프로젝트를 개발했기 떄문에 1번으로 작업했는데, 이번 프로젝트 처럼 사용자가 사용하고 있는 개발을 할 떄에는 사용할 수 없다.
2. 그래서 찾는 방법이 2번이었다. 하지만 프론트엔드가 디버깅이나 테스트를 할 수 없어 예상치 못한 문제가 나오는 경우가 있었다. 그리고 굉장히 비효율적이었다. 백엔드가 배포하고 나서는 프론트엔드는 빠르게 테스트하며 디버깅해야 했고 백엔드는 생각치 못한 에러나 예외처리를 급하게 수정해서 배포해야 했기 때문이다.

그래서 배포와 아예 무관하게 로컬 작업 환경을 공유하면 좋겠다고 생각해서 찾게 된 것이 Ngrok 이었다.

Ngrok

ngrok을 사용하면 상용 환경이 아닌, 개발 환경에서 외부 접근을 열어줄 수 있다.
ngrok은 외부에서 로컬에 접속할 수 있게 도와주는 터널링 프로그램이다.
사용하는 법은 다음과 같다.

1. Ngrok 설치

먼저 ngrok의 공식 홈페이지에서 본인의 운영체제에 맞게 설치한다.
Ngrok 공식 페이지
나같은 경우, Mac을 사용하기 때문에 다음 명령어로 설치했다.

brew install ngrok/ngrok/ngrok

2. 실행

이후 설치된 path로 들어간다. (/opt/homebrew/bin/)
그리고 다음과 같이 명령어를 입력한다.

./ngrok http 8080

그럼 다음과 같이 화면에 표시되고 터널링이 완료되어 외부에서 접근이 가능해진다. (아래 사진의 .ngrok.io로 끝나는 주소에 해당)

3. 해당 URL에 접속했을 때 발생하는 err_ngrok_6022 에러 해결 방법

하지만 최초로 저 주소에 접속하면 에러가 반환된다. 이 때에는 에러 로그가 말하는 대로 authtoken을 설치하면 된다.

./ngrok config add-authtoken {my_authtoken}

이 작업이 완료되면 다시 접속했을 때, 문제없이 실행된다.