feature image

2023年12月13日 | ブログ記事

Ngrok を布教したいだけ

この記事は traPアドベントカレンダー2023 12日目の記事です!


外部の端末から、localhostに接続したい場合に利用できます。

ngrokを使えば、localhost:3000 に立っているアプリケーションをngrok http 3000のコマンド一つでスッと外部に公開することができます!

やっていき

Quickstart | ngrok documentation
This quickstart will use the ngrok agent to put your application on

1. brew install

$ brew install ngrok/ngrok/ngrok

2. Sign Up & Login

ngrokの公式サイトにアクセスして、登録した後ログイン。
MFA(2段階認証)の設定を求められるので、お好きなAuthenticatorのアプリをインストールして(私は Google Authenticatorを使っています)、表示されたQRコードを読み込みます。ログイン時は、表示されているワンタイムパスコードを入力することでログインできます

ngrok | Unified Application Delivery Platform for Developers
ngrok is a secure unified ingress platform that combines your global server load balancing, reverse proxy, firewall, API gateway and Kubernetes Ingress Controller to deliver applications and APIs.

ちなみに、Authenticatorアプリは既定のプロトコルに従えば誰でも作ることができるらしく、学科の友人がAuthenticatorアプリを自作してて衝撃を受けました。

3. Authtoken を取得

ダッシュボード画面のGetting Started > Your Authtoken からトークンをコピーします。

4. ngrok をセットアップ

ターミナルに移り、以下のコマンドを打ちます。

$ ngrok config add-authtoken <your-token>

使い方

接続

$ ngrok http 80

を実行すると

ngrok                                                                                                                                            (Ctrl+C to quit)

Introducing Cloud Edges for all ngrok users: https://ngrok.com/r/cloud-edges

Session Status                online
Account                       <自分のメールアドレス> (Plan: Free)
Version                       3.3.4
Region                        Japan (jp)
Latency                       9ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx.ngrok-free.app -> http://localhost:80

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

と表示されます。

Forwardinghttps://xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx-xxxx.ngrok-free.app が外部に公開されているURLです。このURLに他の端末からアクセスすると、ngrokで繋げられたlocalhost:80にアクセスすることが出来ます。

ただし、localhost:80に何も立っていない状態だと、URLにアクセスしても以下のようなエラーが出ます

Traffic was successfully tunneled to the ngrok agent, but the agent failed to establish a connection to the upstream web service at localhost:80. The error encountered was:

dial tcp [::1]:80: connect: connection refused

(あなたのPCの)ngrok agentには接続できたけど、localhost:80 にある Webサービスに接続できなかったよ!

それはそう。

切断

Ctrl + Cで簡単に公開を止めることができます。

ちゃんと止まっているか不安な場合は、公開しているlocalhost の一覧をWeb上のダッシュボードの Tunnels > Agents から確認、停止できます。ただし、ngrokコマンドからは確認できない(n敗)

認証

ngrokを使うとやはり不安になるのはセキュリティ面です。月5ユーザーまでではありますが、各種OAuthプロバイダーと連携してホワイトリスト形式でアクセスできるユーザーを限定できます。

以下のような感じです。

ngrok http 80 --oauth=google --oauth-allow-email=example@gmail.com,example2@gmail.com

以前は有料プランに入る必要があったので、嬉しい変化ですね。5人を超える場合は月15ドルの有料プランに入る必要がありますが、個人利用や簡単なデバッグ程度なら十分でしょう。

Securing your applications with OAuth 2.0 | ngrok documentation
Ngrok simplifies networking by creating secure ingress to any app, device, or service with a single command or line of code. It’s an ingress-as-a-service platform that decouples ingress from infrastructure, removing the hassle of getting code online without provisioning proxies or VPNs.

利用例

1. 成果物の共有

現状の成果物をngrokを通して共有するといったことができます。

例えば、フロントエンドの開発をしていて現在の進捗を他の人に共有したい時に、npm run dev等でローカルのポートにアプリケーションを立てて、ngrokを通じて公開するといったことができます。ただし最近はVercelのPreview Deployments機能が便利すぎて(ブランチ毎のプレビュー環境を作成してくれる)、利用機会が減ってきました。

Preview Deployments Overview
Preview Deployments allow you to preview changes to your app in a live deployment without merging those changes to your Git project’s production branch.

2. 外部の端末で動作確認したい

例えばフロントエンドを実装している際に、CSSやレスポンシブ対応の実装の際にスマホやiPadの実機で確認しながら開発したいといった場合が考えられます。こういった事例はまさにngrokの良さが光るところで、コマンド1つで外部からアクセスが可能になります。

他には以前に芸術の課題で、「画像を交換することで人と人を繋げるSNS」を題材に開発したことがあり、その際に複数の端末(スマホとタブレット)でもちゃんと動作するのかの確認に利用しました。

3. 外部との連携箇所のデバッグ

前にSlack Boltを用いてSlack上で対話ボットを作ってしていた時に、Slack Boltのリッスンの挙動がドキュメントを読んでもよく分からず沼ったことがありました。Slack側でRequest URLを設定しないとメッセージをリッスンすることすらできないため、コードを修正しては長い時間かかけてデプロイして試すということを繰り返していました。

こういう時に、サッとローカルで立ち上げてngrokで公開し、Slackから直接ローカルにリクエストを飛ばすようにすれば、毎回の試行錯誤でデプロイする必要がないので、かなり開発体験がよくなります。デバッグの手数をたくさん持っていくことは開発速度にダイレクトに影響しますし、知っておいて損はないんじゃないかと思います。

下の記事はSlack BotとLINE Botの差こそあれど、同じことをやっていますね。

LINE Bot + Ngrokで爆速開発を実現!

4. ローカルのリソースを使いたい時

一番の用途はこれですね。今回ブログを書くということで、ngrokの記事をZennやQittaで漁っていたのですが、一番の多かったのはこの用途でした。

真っ先に思いつく事例としては、円安の影響も受けて高くなっているGPUインスタンスの代わりに、自宅のデスクトップPCのGPUを利用して外部から機械学習を回したい時にngrokを利用できます。flaskでWebサーバーを立てて、ngrokからそのアプリケーションに向けてトンネルを開ければ、外から自由に実行できます。

他の事例としては、ラズパイに外部からアクセスしたい時などがありそうです。

LINEから「ただいま」と送れば、マンションのオートロックを開けてくれるシステムをRaspberryPiで作った

明日は

@Kirby0717さんの「おっきい数の話」と、@kegraさんの「setIntervalの第二引数には気を付けろ」です。お楽しみに!!!

irori icon
この記事を書いた人
irori

SysAd班、アルゴリズム班(Kaggle)とグラフィック班で活動しています

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2023年12月11日
DIGI-CON HACKATHON 2023『Mikage』
toshi00 icon toshi00
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
2021年5月19日
CPCTF2021を実現させたスコアサーバー
xxpoxx icon xxpoxx
2023年12月13日
HgameOPについて語る
noc7t icon noc7t
2022年9月26日
競プロしかシラン人間が web アプリ QK Judge を作った話
tqk icon tqk
2023年12月25日
オレオレRustプロジェクトテンプレート
H1rono_K icon H1rono_K
記事一覧 タグ一覧 Google アナリティクスについて