ngrok-로컬 환경에서 https 통신(외부 발표 서버)

이 문장에 관하여

로컬 환경에서 https 통신을 하는 필요성이 생겼기 때문에 그 실현 방법을 기술한 보도이다.

환경

macOS Catalina:10.15.7
ngrok:2.3.35

왜 https 통신을 해야 합니까

웹 응용 프로그램에서 현재 소재지를 취득할 때 크롬, Firefox의 경우 브라우저에서 허가하면 위치 정보를 순조롭게 얻을 수 있으나,safari의 경우 https가 아니면 위치 정보를 얻을 수 없기 때문에 https 통신을 실현하는 노력이 필요하다.

무엇이 ngrok입니까?

ngrok allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on.
직접 번역
"ngrok는 로컬에서 실행되는 서버를 인터넷에 공개할 수 있도록 합니다. ngrok 서버listen의 포트 번호만 알려주면 됩니다."
https://ngrok.com/docs

ngrok를 사용하기 전의 절차를 소개합니다.우선, 왜 공식 사이트의 패턴이 좋지 않은지 모르겠다.

① 로그온ngrok

github와 연합할 수 있으니까 금방 할 수 있어!!!

② Download for Mac OS 클릭

이렇게 하면 다운로드 폴더에서 zip을 다운로드할 수 있습니다.

캡처 2020-12-2417.16.26

③ 다운로드한 zip 압축 해제

unzip /path/to/ngrok.zip

④ 인증 토큰의 취득

인증 영패가 성공하면 ~/.ngrok2/ngrok.yml를 생성하고 인증 영패 정보를 등록합니다.
이것을 실행하면 더 많은 기능을 사용할 수 있을 것 같다.

./ngrok authtoken 1m5phzLi6zWczGbAKKigfWZMmOX_2TXGc5biazsTbXm58buiP

여기서 서버를 시작하고ngrok에서만 사이트를 공개하면 할 거예요.

rails에서 개발한 rails s로 서버를 시작한 후 다른 단말기에서 ngrok http 3000 실행되었기 때문에 해당 페이지를 열 수 없습니다...

$ rails s

$ ngrok http 3000
ngrok by @inconshreveable
Session Status                online
Account                       hanatareman (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://d3f630bc2c4f.ngrok.io -> http://localhost:3000
Forwarding                    https://d3f630bc2c4f.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

둘 다 방문하는 것도 좋지 않아요.
왜 했을까, 아직 수수께끼야.

http://d3f630bc2c4f.ngrok.io
https://d3f630bc2c4f.ngrok.io

성공 모드 (실패 후 실행)

brew로 설치할 수 있을 것 같습니다.

① brew로 설치

$ brew install ngrok

② 서버 재부팅

$ rails s

$ ngrok http 3000
ngrok by @inconshreveable
Session Status                online
Account                       hanatareman (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://d3f630bc2c4f.ngrok.io -> http://localhost:3000
Forwarding                    https://d3f630bc2c4f.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

생성된 URL에 액세스합니다...

페이지가 떴어요!!!!
잘 사파리도 지금의 소재지를 얻었다!!!

참고문

감사합니다.

마지막

이것은 개발 환경의 상황을 공유하는 데 도움이 될 뿐만 아니라 하나하나 배치하지 않고 생산 환경을 볼 수 있어 매우 편리하다.
그룹 만들 때 궁금해서.