Actions on Googleアプリのデバッグ環境をngrok使って実現する

概要

Actions on Google向けのアプリを作成しているときに以下のようなフローで実現していたのだが

いつもはスマホアプリ開発をしている自分からすると
「これ毎度functionにあげないとdebugできない・・・？デプロイ環境と開発環境ってどうやって分けるんだ・・・？」
となったのでさくっと手順をまとめた

使うもの

• firebase-tools
• ngrok

firebase-toolsはおそらくCLIで開発しているだろうからインストールしてるでしょう。
ngrokはローカルサーバーを外部公開してくれるものです。こいつが今回のキモ
インストールはこちらを参照ください

ngrokを使ってローカルの開発環境を一時的に外部に公開する

事前知識

• DialogFlowのWebhookは当たり前ですがlocalhostにはアクセスできません。 そもそもConsoleでエラーを吐きます

• アプリを一度申請->リリースしてからDialogFlowConsole上でsaveした変更はもちろんすぐにはリリースされません。再度申請が必要になります。デバッグはActions on GoogleのTest Simulatorを利用・もしくはログインしているGoogleアカウントがリンクされたユーザーのGoogleHomeなどでテストします

実践

ローカル環境でデバッグする

$ firebase serve --only functions

まずはローカル環境にホストします

✔  functions: functionName: http://localhost:5000/{firebaseName}/us-central1/functionName

吐き出された5000ポートのlocalhost urlを覚えておきましょう

ngrokで外部に公開する

先でインストールしたngrokを使って、上記のlocalhost環境を外部に公開します

$ ngrok http 5000

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.3.25
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://*******.ngrok.io -> http://localhost:5000
Forwarding                    https://*******.ngrok.io -> http://localhost:5000

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

上記の https://*******.ngrok.io を覚えておいてください
ちなみにこの状態で https://*******.ngrok.io にはアクセス可能です

DialogFlow FulfillmentのWebhookを編集する

DialogFlow Consoleの Fulfillment -> WebhookのURLを以下のように修正します

あとは画面下部のSAVEボタンを押して Actions on GoogleのTest Simulatorを利用してテストしてください。

リリース->申請するときはWebhook URLを間違えないように気をつけてください