はじめに
LINE Bot 開発入門したてのころ、デバッグするためには毎回 GAE または Cloud Functions にデプロイしてconsole.logで確認する方法をとっていた時期があり、デプロイには 5 分から 10 分かかり、console.logがロギングに反映されるには数秒かかったりなどすごく時間を浪費してました。
Ngrok を使えばこれらの問題が一気に解消されます。
このサービスを使うことで、PC 内で立ち上げたサーバ（localhost）を 1 つのコマンドを叩くだけで外部に公開することができます。
言葉で説明するより実際に触ってみるのが良いでしょう。
実践
環境構築
LINE Bot の環境構築ですが、以前私が公開したこちらの記事を使って環境構築をします。
オウム返しボットが初期構築されます。
- 記事
- ソースコード
git close git@github.com:hyodoblog/line-bot-typescript-template.git
cd line-bot-typescript-template
cd functions
yarn
Ngrok のインストール（Mac)
⚠Mac のみの紹介となりますのでご了承ください。
- https://ngrok.com/ にアクセスし会員登録する
-
ダッシュボードページに移動し「Download for Mac OS」を押しダウンロードする
- その後は、ダッシュボードページ記載の初期設定手順に従い設定を行う
Ngrok の実装
まずターミナルを 2 つ準備する必要があります。
VSCode であれば以下のようにターミナルを画面分割で表示するとわかりやすいと思います。
- functions の emulator を起動する
- Ngrok を起動する
Ngrok を起動する際の注意点はポート番号の指定です。
Firebase Functions Emulator のデフォルトポート番号は 5001 番なので以下のようにコマンドを叩けば問題なく動きます。
ngrok http 5001
起動すると公開用の URL が発行されるのでこちらのドメイン + Firebase Functions の相対パスを webhook に設定すれば簡単に LINE Bot のデバッグ環境が整います。
https://8e28278045ce.ngrok.io/{firebase_project_id}/{firebse_functions_region}/{functions_name}
Ngrok のおすすめオプション（Ngrok の有料プランのみ）
--subdomain
Ngrok はサブドメインを指定せずに実行すれば毎回ランダムの文字列がサブドメインに設定されます。
このオプションを使うことで、サブドメインをコピペする手間が省けます。
（私はそれだけのために課金する価値はあると考えてます）
--region
Ngrok が起動するリージョンの指定ができます。
| コマンド | 場所名 |
|---|---|
us |
United States |
eu |
Europe |
ap |
Asia/Pacific |
au |
Australia |
sa |
South America |
jp |
Japan |
in |
India |
デフォルトがusなため、ネットワーク回線の遅いところだと少し遅く感じるかもしれません。
まとめ
Ngrok を使うことで LINE Bot のデバッグが容易になります。また、Ngork は LINE Bot 以外の開発にも強力なツールです。例えば、HP や web サービス案件などでクライアントに実際に触ってもらいたいときなどは、Ngork を使って URL を共有すればすぐにテストしていただくことが可能です。
Discussion