ローカル環境でもHTTPS通信で動作検証する方法

f:id:ryoutaku_jo:20190210200029p:plain

【結論】
Facebookログインなど、https通信で無いと
 正常に動作しない機能を実装する際、
 「ngrok」を使う方法がある。

・「ngrok」は、ローカル環境で動いているアプリを
 そのままインターネット上に公開するサービス

・毎回URLが自動生成され、httpsのURLも生成される


【目次】


【本題】

ローカル環境で、HTTPS通信の動作を検証したい

チーム開発にて、Facebookログインの実装を試みていますが、
ダイレクトURIHTTPS以外、設定出来ない仕様になっていて詰まっています・・・

本番環境へマージさせる前に動作確認出来る様に、
ローカル環境でHTTPS通信を行う手段を探しました。

ngrokとは

他にも方法がある様ですが、今回は「ngrok」を使用して見ました。

github.com


「ngrok」とは、ローカル環境上で実行しているアプリケーションを
そのままインターネット上に公開してアクセス出来る様にするサービスです。

毎回ランダムのURLが割り振られるのですが、
その際にhtttpとhttpsの両方のURLが生成される為、
ローカル環境にあるアプリケーションでも、httpsでの通信が可能となります。

ngrokの使用方法

まず、下記をターミナルで実行し、「ngrok」を導入します。

brew cask install ngrok

次に、下記コマンドを実行すると、ngrokが実行されます。

ngrok http 3000

※portナンバーが3000以外の場合は、適宜修正して実行

そうすると、ターミナル上に下記の様な画面が表示されます。

f:id:ryoutaku_jo:20190210200100p:plain

「Forwarding https://・・・」の部分に
ランダムで生成されたURLが表示されます。

そちらにアクセスすると・・・

f:id:ryoutaku_jo:20190210200201p:plain

きちんと、ローカル環境のアプリが表示されました!

なお、localhostで動いている物をそのまま公開しているので、
サーバーを起動していないと、下記の様なエラーが出ます。

f:id:ryoutaku_jo:20190210200436p:plain

rails s」してサーバーを起動させるのを、お忘れなく!

《今日の学習進捗》

チーム開発:16日目
ソーシャルログイン実装の為、アプリのHTTPS化に着手する。
freenomからドメインの取得し、Route 53でDNSを設定し、
ACMで証明書の発行し、ロードバランサーで設定を反映させた筈だが、
表示がされない・・・

デプロイ以来の知らない単語の応酬に、
基礎知識の理解が不足している事を再度認識する。


学習開始からの期間 :65日
今日までの合計時間:672h
今日までに到達すべき目標時間:594h
目標との解離:78h
「10,000時間」まで、

残り・・・「9328時間!」