ngrok - ローカル環境でhttps通信（サーバーを外部公開）

この記事について

ローカル環境でhttps通信をする必要性が出てきたので、その実現方法を記述した記事です。

環境

macOS Catalina：10.15.7
ngrok：2.3.35

なぜhttps通信をする必要があったんか

Webアプリで現在地の取得をするときにchrome, 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-24 17.16.26

③ダウンロードしたzipを解凍

unzip /path/to/ngrok.zip

④認証トークンの取得

認証トークンの取得が成功すると、~/.ngrok2/ngrok.ymlが生成され、認証トークン情報が登録される。
これを実行することで、より多くの機能がつかるようになるみたい。

./ngrok authtoken 1m5phzLi6zWczGbAKKigfWZMmOX_2TXGc5biazsTbXm58buiP

ここから後はサーバーを起動して、ngrokでWebサイトを公開するだけ、、、のはずやった。

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にアクセスすると。。。

ページが表示された！！！！！
ちゃんとsafariでも現在地取得してくれた！！！！

参考記事

ありがとうございました。

最後に

開発環境の状況を共有するのに役に立ちそうやし、いちいちデプロイせずに本番環境を確認できるから便利ですな〜。
ポートフォリオ作成してた時に知りたかったなり。