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을 실수하지 않도록주의하십시오.