LINE Bot + Ngrokで爆速開発を実現！
はじめに
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