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

2024. 9. 5. 17:23·Web/유용한 설정
반응형

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기능을 이용할 때, 유용하게 사용할 수 있을 것 같다.
반응형

'Web > 유용한 설정' 카테고리의 다른 글

Docker에서 ELK중 EK 세팅하기 (8.13.4)버전  (0) 2024.06.05
Vue 공식 확장 프로그램 자동완성 느림 이슈  (0) 2024.05.02
파이썬 가상환경 실행 명령어 git bash 오픈시 자동실행  (0) 2024.04.09
Ubuntu없이 windows git bash에서 zsh사용하기  (1) 2024.03.28
부트스트랩 자동완성, 새로고침 없이 바로 페이지 확인  (0) 2024.03.09
'Web/유용한 설정' 카테고리의 다른 글
  • Docker에서 ELK중 EK 세팅하기 (8.13.4)버전
  • Vue 공식 확장 프로그램 자동완성 느림 이슈
  • 파이썬 가상환경 실행 명령어 git bash 오픈시 자동실행
  • Ubuntu없이 windows git bash에서 zsh사용하기
cvcvcx9
cvcvcx9
프로그래머
  • cvcvcx9
    참치와 연어가 좋아
    cvcvcx9
  • 전체
    오늘
    어제
    • 전체보기 (90)
      • JAVA (22)
        • 웹 프로그래밍 딥하게 파보기 (7)
        • String (2)
        • 자바의 다양한 객체 (3)
        • 클래스와 인터페이스, 추상클래스 (2)
        • 컬렉션과 자료구조 (6)
        • 제네릭 (0)
      • SPRING (3)
      • JPA 게시판 (19)
        • JPA게시판 만들기 (7)
        • JPA (10)
        • Spring Security (2)
        • 오류정리 (0)
      • 코딩테스트 준비 (4)
        • 자료구조 (3)
      • Python (21)
        • Django (21)
      • 컴퓨터 기초 (8)
        • 컴퓨팅사고 (7)
      • Web (7)
        • 유용한 설정 (6)
        • Git 관련 (1)
      • 데이터베이스 (1)
        • 친절한 SQL튜닝 (1)
  • 블로그 메뉴

    • 홈
    • 태그
  • 링크

  • 인기 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.3
cvcvcx9
모바일에서 https에서만 사용 가능한 기능 확인방법
상단으로

티스토리툴바