ngrok을 사용한 개발 방법(Actions on Google Node편)

사실이라면 1년 정도 전에 써야 했던 기사를 지금 덧쓰기합니다. (계속 존재 잊어 버렸습니다)

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의 다운로드나 인스톨은 다른 분의 기사나 이하의 문서를 확인하실 수 있으면 다행입니다.
htps : / / 응 g로 k. 코 m / 도 w 응 아 d

다음 명령으로 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를 기동해 주세요.

    이상입니다∠( ゚д゚)/

    좋은 웹페이지 즐겨찾기