102
101

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ngrokの利用方法

Last updated at Posted at 2019-11-04

ngrokの利用方法

業務でngrokを利用したので、忘れない為にも利用方法を記載します。

ngrokとは?

Public URLs for building webhook integrations.
Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall.

webhookを利用する為のpublicURLを発行できます。
簡易的にセキュアなURLをローカルホストサーバーにNATやFirewallを通して構築することが可能です。

有料プランと無料プランがありますが、ちょっとした動作確認が目的の場合は無料プランで十分です。

ngrok説明図

スクリーンショット 2019-11-04 22.46.23.png

画像参考:ngrok を使ったら Webhook のデバッグが非常に捗った話

ngrokのメリット

1. デモサイトをデプロイせずに試すことが出来る
2. 開発環境でwebhookを試す事が出来る
3. モバイルappのバックエンドサービスをテストを出来る。
4. httpだけではなくhttps通信可能

ngrokを利用した理由

ngrokを利用してローカル環境を外部に公開すれば、デプロイせずにwebhookの受信テストをローカル環境で試す事が出来ると思ったから。

ngrokの使い方

基本的には以下のサイトを参考にしました。
https://qiita.com/kitaro729/items/44214f9f81d3ebda58bd

インストール

brew install ngrok

インストール完了すると、以下のコマンド叩けばバージョンが確認できます。

❯❯❯ ngrok --version                                                                                                                                               [~/Desktop/workspac]
ngrok version 2.3.35

実行

ローカルで起動しているページのポート番号を入れ起動します。

http://localhost:3000

の場合はポート番号3000なのでこのように実行

ngrok http 3000

こんな画面が見れれば成功

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1fd2ec17.ngrok.io -> http://localhost:3000
Forwarding                    https://1fd2ec17.ngrok.io -> http://localhost:3000

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

アクセス

httpの場合

http://1fd2ec17.ngrok.io

httpsの場合

https://1fd2ec17.ngrok.io

まとめ

簡単にローカル環境をhttp/httpsで外部公開できるので、webhookURLで本当にhttps受信できるのか確認したりする時に便利です。あと、デモサイトを外部に一時的に見せるときとかにも便利です。

102
101
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
102
101

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?