Edited at

ngrokを使って社内の人たちに、自分のローカル起動のRailsアプリを見てもらう方法


概要

サブドメイン運用を基軸にしているRailsアプリがあります。

favyですw

「www.favy.jp」や「page.favy.jp」などサブドメイン運用を基本としています。

しかも色々開発工程の都合から1つのRailsアプリでそれを運用していたりします(だからroutesも結構な記述量です)。

単一ドメインであればlocalhost:3000で見ればいいんだけども、サブドメインとなるとlocalhost:3000じゃ全然機能しないので、さて困った!という人たちはpuma-devを使えば良いというプラクティスがあります。

んでだ。

これを社内(とかdeployまでいかないレベルで見せたい!という)人たちに見せようとなったときにこれでも不十分となるため、そいつを解決しようぜ!が今回の全体概要です。

※なお、単一ドメインであればifconfigなどで調べた自分のIPアドレスを使って、192.168.1.100:3000みたいなIPアドレスで提供すればLAN環境内であれば見てもらうことは可能だね!


ngrokをインストールしよう

便利なものがあります。ngrok。なんて読むのか知りませんが「えぬじーろっく」とか「んごろく」とか呼んでます。


インストール方法

ngrokは2.0台と1.7台とがあるようですが、とりあえず最新入れよう。

brew cask install ngrok

でOKです。

(brew install caskroom/cask/ngrok2 とかでも)

 

※上記のインストにはhomebrew-caskが必要。入ってない人は、

brew install caskroom/cask/brew-cask

とかしてインストしとこう。


起動方法

ngrok http -host-header=rewrite www.favy.dev:80

こんな感じです。www.favy.devはpuma-dev使ってるURLです。

ngrok by @inconshreveable                                                                                                                                                                                                                                       (Ctrl+C to quit)

Session Status online
Version 2.1.18
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://16687cb4.ngrok.io -> www.favy.dev:80
Forwarding https://16687cb4.ngrok.io -> www.favy.dev:80

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

うまくいくとこんなような画面が出てきます。

上記にある「Forwarding」の欄のhttp://16687cb4.ngrok.ioを提供すれば、誰でも自分のPCの開発環境状態でプレビューしてもらうことができます。

なお、ngrokを使うとhttps(SSL)環境も同時にテストができるようになるので、オレオレSSLとかも手元環境には不要になるため、その点でも超便利です。


2019130追記:


ngrokのログを見る

ログみたいなーと思ってたんですが、ざざーーと流れてしまうコンソールの標準使用では攻殻機動隊の人たちのような動体視力がないと見えないです。

それをウォッチするためになんかないかと思ったら公式にすごく便利な事が書いてあって、

localhost:4040

にアクセスすることで、ログやらインスペクトやらをGUIで見ることが出来ます。


Inspecting your traffic

ngrok provides a real-time web UI where you can introspect all of the HTTP traffic running over your tunnels. After you've started ngrok, just open http://localhost:4040 in a web browser to inspect request details.


さらに便利。

参考: ngrok公式: https://ngrok.com/docs