ngrokを使った開発方法(Actions on Google Node編)


本当ならば一年ぐらい前に書くべきだった記事を今更書きます。(ずっと存在忘れてました)

Actions on Googleで開発するときの難点の一つとして、
Firebase functions側のデプロイ速度が遅いことが挙げられます。

一歩動けば、バグを産み落とすような人(私)にとっては、この更新速度は非常に辛いところがあります。

この点において、Firebase functionsのserve機能とngrokを用いれば、
Dialogflowからトンネリングすることで、ローカルにおいたソースコードにアクセスすることが可能です。
つまり、これらを用いればソースコード側の様子を即時反映で確認できるということです。

以下、この記事はその方法について書きました。

①Firebase側でリンクをゲットする

firebaseインストールやその方法については省きますが、
以下を参考に当該プロジェクトのfunctionsをserveします。

dev$ firebase login
dev$ firebase use --add
dev$ firebase serve --only functions

すると、以下画面のように出力されるので、赤枠のリンクの部分をコピーします。

たぶん、以下のような感じだと思う

http://localhost:5000/<ProjectID>/us-central1/<exportsに指定した文字列> 

②ngrok側でリンクをゲットする

ngrokのダウンロードやインストールは他の方の記事や以下のドキュメントを確認いただけますと幸いです。
https://ngrok.com/download

以下のコマンドでngrokを起動します。

ngrok http 5000

このとき、以下画像のように出力されるので、
赤枠のhttps://<魔法の文字列>.ngrok.io箇所をコピーします

たぶん、以下のような感じだと思う

https://<魔法の文字列>.ngrok.io

③リンク合体します

ngrokで得られたリンクとfirebase serveで得られたリンクを合体させます。

  • firebase部分のhttp://localhost:5000/箇所を削り、
  • ngrokで得られたリンクのhttps://<魔法の文字列>.ngrok.io箇所を置換します。

そうすると以下のようなリンクになる。

https://<魔法の文字列>.ngrok.io/<ProjectID>/us-central1/<exportsに指定した文字列> 
https://<魔法の文字列>.ngrok.io/dottassociate/us-central1/dottassociate // 今回の場合

④Dialogflow側に指定します。

③リンクを以下画像の様に Fulfillment > Webhook > URLに指定し、Dialogflow側でSaveします。

そうすると、Actions Simulatorで確認すると、指定したローカルを叩くと思います〜!

なお、ngrok無料版は8時間が上限で、これが切れたら再度ngrokを起動してください。

以上です∠( ゚д゚)/