[Infra] Ngrok 사용법, 외부에서 내 로컬에 접속, local에서 Jenkins Webhooks 설정, Mac

저번 프로젝트때 인프라를 경험해보고 재밌기도 하고 해서 요새 공부를 좀 하고 있습니다.. ㅎㅎ

현재 공부중인 부분은 Jenkins를 활용한 CI/CD 입니다.

제가 가지고 있는 무료 인스턴스는 사양이 안좋은 관계로 로컬에서 진행을 하고있습니다.

로컬에서 Jenkins container를 docker를 이용해 띄워놓고 GitHub에 올려놓은 test 프로젝트를 CI/CD 해보는 연습을 하는중입니다.

잘 마무리 되면 해당 부분도 포스팅 해보겠습니다!

---

문제

 

저는 현재 localhost:8080 포트에 Jenkins를 띄워놨습니다.

GitHub의 Webhooks를 활용해 Jenkins에서 CI/CD를 구현하려 했지만 저는 현재 로컬에서 테스트를 진행중이고 
GitHub Webhooks 설정 시 localhost로 설정할 수 없는 문제가 있었습니다.

 

해결방법

 

Ngrok을 사용하여 해결하였습니다.

https://ngrok.com/

ngrok | Unified Application Delivery Platform for Developers

 

Ngrok은 외부 네트워크에서 로컬 환경으로 접속할 수 있게 해주는 터널링 프로그램 입니다.

 

회원 가입하면 Authtoken을 확인할 수 있습니다.

 

이제 제 컴퓨터에 Ngrok을 설치하겠습니다.

저는 Mac m2칩 환경에서 download를 하였습니다.

 

공식 홈페이지에 있는 명령어를 통해 다운받았습니다.

brew install ngrok/ngrok/ngrok

 

후에 Ngrok을 사용하기 위해서는 AuthToken을 등록해야 합니다.

터미널에 다음과 같이 입력합니다

YOUR_AUTHTOKEN에는 아까 확인한 AuthToken을 넣어시면 됩니다.

ngrok config add-authtoken $YOUR_AUTHTOKEN

 

Ngrok을 사용할때는 다음 명령어를 활용합니다.

PORT_NUMBER는 개방하고 싶은 포트번호를 입력합니다.

ngrok http $PORT_NUMBER

 

 

저는 제대로 되는지 확인하기 위해 3000번 프로젝트에 REACT 프로젝트를 띄워놓고 테스트 해봤습니다.

주소창에 Forwarding URL을 통해 접속합니다.

 

 

 

Visit Site를 클릭하시면

 

3000번 포트에 올려놓은 리액트 프로젝트가 제대로 나오는 것을 확인할 수 있습니다.

다른 분들에게도 도움이 되었으면 합니다.

---

초보 개발자의 글이라 부족한 점이 많습니다. 잘못된 점 등을 말씀해주시면 감사히 받겠습니다.