LoginSignup
23
19

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-01-26

概要

サブドメイン運用を基軸にしている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

23
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
19