Briswell Tech Blog

ブリスウェルのテックブログです

ローカルPC上の開発中のネットワークサービスを外部公開できるサービスngrok

はじめまして、私はPhiと申します。
システム開発業務に携わってます。

最近は外部サービスと連携するためwebhookを開発しています。
webhookなので、オンラインURLがないとテストできないです。
毎回テストするため、elasticsbeanstalkへデプロイするのは結構面倒 + 時間かかります。
上記の解決策を探していたら、ngrokを見つけました。

NGROKとは?

ngrokとは「セキュアトンネル経由、NATおよびファイアウォールの背後にあるローカルサーバーをパブリックインターネットに公開」というサービス。 f:id:phint:20200831225715p:plain

利点は?

  1. webhook/chat bot 開発する時にとても便利
  2. モバイルアプリもしくはSPAのバックエンドサーバをdebugできる
  3. リモートでお客さんにウェブサイトのデモを紹介できる
  4. ローカルサーバを別の環境(スマホwindows/linux/macos)でテストできる

使い方

ngrokでアカウントを登録して、アプリをダウンロードしたら使えます。

  1. アカウント登録:
    このサービスは無料で使えますが、有料プランもあります。開発のみの場合は無料を使っても全然問題ないと思います。
    ここで登録してください。
    登録さた後、ダッシュボードへ遷移されます。
    ここで認証ためのコマンドを見えます。
    例: ./ngrok authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    アプリダウンロードした後、例のコマンド叩いたら、ログインできます。

  2. アプリダウンロード:
    ダウンロードリンクです。
    私はmacOS使っていますが、windowsも大体同じです。
    ※下記画像はmacの画像になります

まずはダウンロードファイルを解凍します。そのあとは terminal を起動して、解凍先のフォルダーへ移ります。(私はApplications フォルダーに解凍しましたから、Applicationsへ移ります)
f:id:phint:20200901123155p:plain ここで、上記の認証コマンドを実施します。 f:id:phint:20200901123711p:plain ここまでは準備のステップは終わりました。ngrok使いしょう!
./ngrok http <port> この簡単なコマンドでローカルサーバがパブリックインターネットに公開されます。私のローカルサーバは port 3333 で動いてますから、 ./ngrok http 3333 実施します。これは結果です。 f:id:phint:20200901125700p:plain httpsのリンクもあります、便利ですね。無料プランですから、毎回コマンド実施したらランダムURL返却されます。
ngrokのダッシュボードページでURLも見えます。 f:id:phint:20200901130104p:plain そして、コマンド実施結果の Web Interface http:127.0.0.1:4040 をアクセスすればリクエスト詳細を検査できます。 f:id:phint:20200901130359p:plain

他の機能も色々ありますが、今回の記事はここまでになります。皆様ngrokを試して楽しんでみてください!