仮想サーファーの波乗り

仮想サーファーの日常

プログラミング・エンジニアのスキルアップ・ブログ運営などに関してよく書く雑記ブログ

➡ Udemyで8/27(木)まで割引セール開催中! 1,200円〜で普段の90%以上OFF!

ngrokのインストール方法と使い方(MacOS)


ローカルにSSLアクセスできるようにすることができるngrokの使い方。

ngrokとは?

f:id:virtual-surfer:20180714144001p:plain

Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall.
(引用:ngrok - secure introspectable tunnels to localhost

「コマンド一発でローカルに安全にアクセスでき、プログラミングに集中できるぜ!」という便利ツールです。


ngrokを使う準備

Homebrewがインストールされているか確認

$ brew -v

Homebrew 1.6.6
Homebrew/homebrew-core (git revision 86e1c; last commit 2018-07-14)


Homebrewがインストールされていない場合はインストール。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"


ngrokをインストールする。

$ brew cask install ngrok

==> Tapping homebrew/cask
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask'...
...
==> Linking Binary 'ngrok' to '/usr/local/bin/ngrok'.
🍺  ngrok was successfully installed!

インストール成功。これで準備完了。


以下のようなエラーになった場合は、コマンドラインツールがインストールされていない。

$ brew cask install ngrok

...
error: invalid active developer path (/Library/Developer/CommandLineTools)
...


コマンドラインツールをインストールしてから再度brewコマンド実行。

$ xcode-select --install

f:id:virtual-surfer:20180714142123p:plain


ngrokを使う


ポート番号を指定して実行する

$ ngrok http 1337

ngrok by @inconshreveable                                                                                                                                         (Ctrl+C to quit)
                                                                                                                                                                                  
Session Status                online                                                                                                                                              
Session Expires               7 hours, 59 minutes                                                                                                                                 
Version                       2.2.8                                                                                                                                               
Region                        United States (us)                                                                                                                                  
Web Interface                 http://127.0.0.1:4040                                                                                                                               
Forwarding                    http://66d653d5.ngrok.io -> localhost:1337                                                                                                          
Forwarding                    https://66d653d5.ngrok.io -> localhost:1337                                                                                                         
                                                                                                                                                                                  
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                         
                              0       0       0.00    0.00    0.00    0.00


別タブでHTTPSアクセスしてみる。

$ curl https://87c463e5.ngrok.io


ngrokを実行しているタブに戻って確認してみる。アクセス結果が表示されてる。アクセスできてる!

HTTP Requests                                                                                                                                                                     
-------------                                                                                                                                                                     
                                                                                                                                                                                  
POST /                         404 Not Found                                                                                                                                      
GET  /                         404 Not Found


では。