모바일에서 https에서만 사용 가능한 기능 확인방법

1. 문제발생

• 리액트로 모바일 웹앱을 제작중인데, 현재 위치에 실시간으로 접근해야하는 경우가 발생했다.
• https로 로컬에서 실행하여 확인하는 방법을 사용하려했으나, 모바일 자체에서 신뢰가능한 CA로 등록되어있지 않아, 접근이 귀찮고, 설정해야하는것이 많았다.

2. 문제 해결

• 검색도중 localhost에서 실행한 서버에 접근할 수 있는 https서버를 대신 열어주는 서비스인 ngrok을 발견
• ngrok을 사용하여 문제를 해결하였다.

3. 구체적인 해결 방법

a. ngrok 공식문서로 가서, ngrok을 다운로드 받고, 초기설정을 한다.

• windows의 경우에는 https://dashboard.ngrok.com/get-started/setup/windows 이 사이트로 접속하여 확인가능
• 만약 회원가입이 되어있지 않다면 회원가입을 진행한 뒤, 공식문서를 따라간다.
• auth-token의 경우에는 setup페이지에 나와있는 코드 그대로 복사해서 사용해도 되는 듯 하다(본인의 코드를 제공하는듯)

b. 초기설정을 완료했으면, 확인해야할 서버를 실행시킨다.

• react에서 실행하는 서버를 확인해야하므로, 아래와 같이 작성한다.

ngrok http 5173

• 그럼 아래와 같은 창이 나오게 되는데, 이중 Forwarding 항목에 나와있는 url로 접속하면 된다.

ngrok으로 배포를 실행한 화면. 민감한 정보는 가렸다.

• 이후 모바일로 저 url로 접속하게 되면, 맵으로 현재 실시간 위치가 떠야한다
• 하지만 나의 경우에는 그렇게 뜨지 않고, 흰색 화면이 뜨고 있었다.
• 이전에도 똑같은 문제가 발생했었는데, 카카오 디벨로퍼스 플랫폼에 등록된 url이 아니었기 때문이다.
• 카카오 디벨로퍼스 플랫폼설정으로 가서 위에 포워딩 항목에 뜬 url을 등록해주면 끝이다.

4. 결과 화면

현재위치를 찍고있다.

5. 느낀점

• https로 요청을 주고받아야 사용할 수 있는 기능이 많았는데, 그런 기능을 바로바로 테스트할 수 있다는 것이 놀라웠다.
• 이제 귀찮게 포트포워딩 작업을 거치지 않고도 공유기 환경에서도 간단한 테스트를 진행할 수 있을 것 같다.
• 앞으로도 카메라기능과 같은 pwa기능을 이용할 때, 유용하게 사용할 수 있을 것 같다.