nglok 설정

위챗 미니 프로그램에 개발을 하는데, 위챗은 https가 아니면 접속이 불가능하다.
디버깅 모드 내에 설정을 하면 https 접속이 가능하다고 하지만, 그거는 ide 내부의 시뮬레이터에 한정된다.
카메라로 촬영을 하는 로직을 추가하는데, 시뮬레이터로는 도저히 실행이 불가능하다!!

로컬호스트를 https를 붙여서 접속할 방법이 없을까 찾아보다가, localtunnel 및 다른 방법도 시도했지만, ngrok이 가장 쉬운 방법이다!

ngrok은 로컬 개발 환경의 서버를 안전하게 인터넷에 노출시키는 터널링 도구다. ngrok은 로컬호스트에서 실행 중인 웹 서버에 대해 보안 터널을 생성하고, 공개적으로 접근 가능한 URL을 제공한다. 이를 통해 개발자는 방화벽 제한이나 NAT(Network Address Translation) 문제 없이 외부에서 로컬 서버에 접근할 수 있게 되어, 웹훅 테스트, 모바일 앱 개발, 원격 데모 등 다양한 개발 시나리오를 용이하게 한다.

사용방법

1. ngrok 사이트에 접속하여, os에 맞는 다운로드를 실행한다.
2. 다운로드 받은 ngrok 프로그램을 실행한다.
3. 특정 포트를 터널링한다.

	ngrok http 80

2개 포트는 안돼?

공식 사이트에서는 분명!! pricing에 애매모호하지만, 2개의 포트에 대해 터널링이 가능하다고 하지만, 프로그램을 2개 실행해서 명령어를 입력하는 방법도, 한 번에 2개의 명령어를 입력하는 방법도 되지 않는다.
그치만 나는 총 3개의 프로젝트를 함께 변경중으로, 위챗에서는 2개의 프로젝트를 로컬호스트로 붙어야 한다! 약 3일간의 삽질을 하다가(3일 내내 한 것은 아니고 시간이 날 때마다,,,) 방법을 찾았다. 그건 바로 ngrok의 실행 파일 내부에 포워딩할 포트를 지정하고, 실행하는 것!

무료로 2개 포트를 포워딩하는 방법

1. ngrok 프로그램을 실행한다.
2. ngrok config edit 명령어를 입력한다.
   설정 파일을 수정하는 명령어로, 해당 파일은 C:\Users\AppData\Local\ngrok 경로의 ngrok.yml이다.
3. ngrok.yml 파일 내부에 터널링할 포트 정보를 입력한다.
   authtoken값도 같이 입력해두면 편리하다.

version: "2"
authtoken: 내 authToken값

tunnels:
  tunnel1:
    addr: 8082
    proto: http
  tunnel2:
    addr: 8080
    proto: http

4. ngrok 프로그램에 설정 파일을 실행한다는 명령어 입력

ngrok start --all

무료로 사용하면 ngrok가 꺼질 때마다 또는 24시간 단위로 url 주소가 변경되는 불편함이 있지만 돈을 내지 않는다는 장점이 있다!

번외

localtunnel은 더 자주 url이 변경되는 불편함이 있어, ngrok를 사용했다.

ngrok는 1개 서버만 접속 가능해서, localtunnel 사용
1. node.js 설치
2. npm install -g localtunnel

lt --port 8080 --subdomain backend
your url is: https://itchy-monkey-95.loca.lt

lt --port 8082 --subdomain webview
your url is: https://webview.loca.lt

ssh 인증서를 pc에 발급받고 이를 설정하는 방법도 있는데, 제일 복잡하고
코드에 내용을 추가하는 부분이 발생해서 포기했다.