[Vue.js] ngrok를 이용한 localhost 외부접속-2

이전 포스팅에 이어 외부에서 로컬로 접속할 수 있도록 도와주는 터널링 프로그램인 ngrok를 이용한 localhost 외부접속에 대해 알아보도록 하겠습니다. (한번에 글을 길게 쓰려다 보니 더이상 이미지를 붙일 수 없고 브라우저 멈춤 현상이 발생하여 어쩔수 없이 포스팅을 두번에 나눠 진행하게 되었습니다. )

 

1. ngrok 설치

아래의 링크로 ngrok를 접속하여 다운로드탭을 선택합니다.

https://ngrok.com/

ngrok - secure introspectable tunnels to localhost

ngork 홈페이지

2. 프로그램 다운로드

저는 Windows기반에서 작업하기때문에 Windows용을 다운받았습니다.

ngrok 다운로드 화면

3. ngrok 파일실행

ngrok는 설치형태가 아니라 압축파일로 제공되며 압축을 풀면 아래와 같이 ngrok.exe파일이 있습니다. 

해당파일을 실행시킵니다.

ngrok 실행파일

 

4. ngrok.exe 명령실행

ngrok를 실행시키면 아래와 같이 명령창이 뜹니다. 설명을 읽어보시면 try typing 'ngrok.exe http 80' 이라고 되어있습니다. 일단 해당하는 명령어를 입력하기 전에 아래와 같이 vue 프로젝트를 실행해야합니다. 해당 프로젝트는 8080포트를 사용하고 있기에 아래와 같이 명령어를 입력합니다.

명령어 : ngrok.exe http 8080

 

5. ngrok 실행확인

ngrok가 실행되며 아래와 같이 로컬 사이트를 외부에서 접근할 수 있는 도메인주소를 알려줍니다. 그리고 무려 https까지 지원해줍니다. 이렇게 https까지 지원해주면 PWA 테스트 하며 작업할 수 있습니다.

 

6. ngrok 도메인 접속

ngrok에서 지원해주는 도메인으로 접속해보도록 하겠습니다. 이게 뭔일일까요? 나오라는 홈페이는 안나오고 Invalid Host Header이라는 페이지만 덜렁 나옵니다. Vue에서는 기본세팅으로 내부 로컬접속은 허용하지만 외부접속을 허용하지 않아 생기는 문제였습니다.

 

7. 외부접속 문제해결

아래와 같이 vue.config.js 파일에 아래와 같이 disableHostCheck 설정을 true로 바꿔줍니다. ngrox를 종료하고 해당 프로젝트를 빌드한후 다시 ngrox를 실행시켜 ngrox에서 지원해주는 도메인으로 다시 접속합니다.

 

8. 외부접속 확인

이번에는 성공을 했습니다. 이제 로컬에서 개발중인 사이트를 ngrox를 이용하여 외부에 노출할 수 있게 되었습니다.

외부에서 접속한 로컬사이트

 

여기까지 2회에 걸쳐 ngrok를 이용한 localhost 외부접속에 대한 포스팅을 마치도록 하겠습니다.