로컬환경에서 메타태그 테스트하기(ngrok 사용)

 

프로젝트를 리팩토링 하던 중 메타태그를 수정할 일이 있었다.

잘 수정되었는지 확인 하기위해 매번 배포를 진행하는 건 리스크가 있다고 생각하여 로컬에서 테스트 할 수 있는 방법을 찾아보았다.

찾아보니 ngrok이라는 서비스를 사용하면 로컬 환경에서도 테스트할 수 있다고 한다!

이번 기회에 ngrok이 뭔지 어떻게 사용하면 되는지 정리해보고자 한다. 😎

 

ngrok이란?

 

 

Webhook을 이용하여 로컬에 떠있는 서버를 방화벽을 넘어 ngrok.com 쪽에 바인딩해주는 서비스 

일반적으로 로컬 환경에서 작업을 할 때 웹서버를 로컬호스트에서 실행 후 개발을 진행하는데, 이렇게되면 외부에서 접근이 불가능하다. 이 때 ngrok을 사용하면 로컬개발환경에서 실행중인 웹서버를 외부에 공개적으로 접근이 가능한 URL로 노출시킬 수 있다.

 

ngrok 시작하기

설치

아래 사이트에서 사용하는 OS에 맞게 다운로드 후 설치한다.

 

https://ngrok.com/docs/getting-started/

Quickstart | ngrok documentation

 

 

인증 

ngrok을 사용하기 위해서는 가입 후 인증이 필요하다.

 

1. ngrok 사이트 회원가입하기

 

2. Getting Started > Your Authtoken 에서 인증토큰 복사하기

 

 

3. ngrok을 실행시켜 인증 토큰 추가하기

ngrok authtoken 인증토큰

 

ngrok 실행하기

로컬 서버를 실행 시킨 후 ngrok에 아래와 같이 명령어를 실행한다.

ngrok http 포트번호

 

내 로컬서버의 포트번호는 3000이었기 때문에 ngrok http 3000으로 실행했다.

 

✔️ 실행화면

 

✔️ 실행화면

 

정상적으로 실행이 되면 위와 같은 화면이 뜨는데, Forwarding에 나온 주소를 사용하면 된다.

 

아래와 같이 메타태그 수정 후 테스트가 가능해졌다! 😉

 

---

 

https://ngrok.com/docs

Overview | ngrok documentation