そこに仁義はあるのか(仮)

略してそこ仁!

ローカルで起動したサーバーを簡単に外部公開できるngrokと活用方法

たまたまngrokを使うことがあり、便利だったのでご紹介します

🙏 ngrokで出来ること

ローカル環境で起動したサーバーをとても簡単に外部公開できます。
インストールや利用もとても簡単で、自分でドメインを用意する必要もなく、ngrokの無料アカウントではランダムな英数のURLドメインがふられます。
(有料アカウントではドメイン設定も可能です。)

f:id:syobochim:20181209164956p:plain

💬 どうやって使おう?

ngrok便利だけど、外部公開するサービスはちゃんとサーバーを立てて構築するだろうし、どうやって使うだろう??
と考えてみたけど、

  • 外部サービスと連携するシステムのテスト開発のため
  • イベントQAサイトのような一時的に利用するサービスを公開するため

というような後腐れない(?)システムに利用するのがいいのではないかと思います。

私がngrokを知ったきっかけも、チャットボットサービスのテスト目的でした。
チャットボットの応答をするシステムを自分のPCで起動させ、ngrokで外部公開用のURLを発行する。
そして、チャットボットサービスのテスト用アカウントからngrokのURLと連携させるという使い方をしました。

✌️ 始め方と使い方

👍 始め方

1. ngrokのサイトでアカウントを登録する

ngrok - secure introspectable tunnels to localhost

2. クライアントをインストールする

ngrokのサイトの説明にある通りngrokをダウンロードしてngrokにパスを通せばOKだけど、私はインストールにhomebrewを使いました。
f:id:syobochim:20181209180108p:plain

brew install ngrok

上でダメだった場合はこちらを実行する。

brew cask install ngrok

ちなみに、npmでもインストールできる。

npm install ngrok -g
3. tokenを設定する

サイトの手順の3に表示されているコマンドをコピーして実行します。
多分、homebrewなどを使ってインストールした方はコマンドの先頭の 「 ./ 」は不要で、「ngrok」からコマンドを始めないと実行できません。
コマンド実行すると、~/.ngrok2/ngrok.ymlにtokenの情報が登録されます。

f:id:syobochim:20181209175957p:plain:w400

準備はこれだけです。

👍 使い方

1. 外部公開したいシステムを起動

例えばnode.jsのアプリを3000番ポートで起動します。

$ yarn start
  yarn run v1.12.3
  $ node .
  Listening on port 3000
2. ngrokをポート指定して起動

このコマンドを実行するだけでシステムを外部公開できます。
3000はポート番号なので、システムを起動しているポートに合わせて変更してください。

ngrok http 3000

起動が成功するとこんな感じで表示され、システムの外部公開が完了します。
ドメインは毎回ランダムな英数字で振り直されます。
この画像の場合は、下のURLで外部からアクセスできます。

f:id:syobochim:20181209183037p:plain

👍 おまけ

http://localhost:4040 へアクセスすると、どんなリクエストが来たのかなどを確認できます。

f:id:syobochim:20181209183314p:plain