Dialogflow Webフック:ローカルで開発してCloud Functionsにデプロイする方法

私たちのチームがLINE HACK 2018でNilaチャットボットの構築を開始したとき、Webフックの構築方法についてJon Snowと同じくらい知りました。私たちの中にはFirebaseとCloud Functionsの作成の経験がある人もいたので、特にインラインエディターを見つけたときは非常に簡単だと思っていましたが、Nodeを実行するライブ環境であるGlitchで最初のバージョンを完全に構築することになりました.jsアプリ。グリッチは学習には最適ですが、ローカルの開発環境を設定することで生活が楽になりました。

この記事では、ローカルで開発してクラウドにデプロイすることでWebフックを構築する方法について説明します。これは、ウェブフックの開発をより速く、実用的で安全にする一連のヒントとコツです。

  • より高速—ローカルで実行し、必要な場合にのみ展開します
  • 実用的— Webフックからのライブリクエストでアプリケーションをデバッグします
  • より安全—リンティングとお気に入りのエディターのオートコンプリート

1.テンプレートから始めて、ローカルで実行します

この記事ではDialogflow Webフックに焦点を当てていますが、これらのステップはWebフックの開発でも同じだと思います。 Dialogflowを使用している場合、フルフィルメントのためにインラインエディターから開始することができます。最初に行うことは、そのコードを取得し、ローカルで実行するように修正することです。

simpleServer.jsでは、インラインエディターからDialogflowフルフィルメントコードを取得し、Firebase固有のコードを削除し、Webフックを提供するエクスプレスを追加しました。 express、dialogflow-fulfillment、actions-on-googleの依存関係を持つpackage.jsonが必要になります。ノードsimpleServer.jsでWebフックを実行し、http:// localhost:8080 /を開いて動作していることを確認します。

2. ngrokを使用して、ローカルhttpsをパブリックhttpsに提供します

Ngrokは、ローカルWebサーバーへのパブリックな安全なhttps URLを提供する無料のサービスです。 ngrokをグローバルにインストールできます(バイナリまたはnpm install globalをダウンロードします)が、私の好みはdev依存関係としてインストールすることです:

npm install ngrok --save-dev

そして、package.jsonを変更します。

  ...
  「スクリプト」:{
    「トンネル」:「ngrok http 8080」
  }、

ローカルの開発環境へのhttps URLを作成する場合は、npm run tunnelを使用するだけです。 Ngrokが実行され、https URLが作成されます。

ngrokを実行して、ローカルサーバーのパブリックhttps URLを取得します

これで、「転送」(赤で強調表示)の下にhttps URLをコピーして、DialogflowのフルフィルメントWebフックにできます。

ngrok転送URLを使用するようにDialogflowのフルフィルメントを構成します

この時点で、Dialogflowのテストコンソールで「hello」を送信して、すべてが機能していることをテストします。

開発者の依存関係としてインストールすることを好む理由は、別の開発者がチームに参加するときに、追加のものをインストールする必要がないためです。npmrun tunnelを使用してhttps URLを作成するだけです。

Ctrl-Cを使用してngrokを終了できます(パブリックURLの提供を停止します)。 ngrokを再起動するたびに、新しいURLを受け取ります。つまり、DialogflowコンソールでURLを更新する必要があります。これを回避する1つの方法は、ngrokの有料プランの1つにアップグレードすることです。

3.リロード(nodemon)およびデバッグ(VS Code)

この時点で、基本的なDialogflowテンプレートを実行しているローカルマシンにすべてのトラフィックをトンネルするパブリックURLがあります。コードを編集し、Webフックで即座に変更を確認します(たとえば、Dialogflowシミュレーターを使用)。

NodemonはNode.jsの親友であり、変更を検出するたびにサーバーを再起動します。 ngrokと同様に、dev依存関係としてインストールします。

npm install nodemon --save-dev

そして、package.jsonスクリプトを再度変更します。

  「スクリプト」:{
    「dev」:「nodemon --inspect simpleServer.js」、
    「トンネル」:「ngrok http 8080」
  }、

次に、npm run devを使用して開発環境を開始します。

--inspect引数は、デバッガーを有効にします。 VS Codeでは、次のようにnodemonで機能するデバッグ構成を作成できます。

  1. 「デバッグ」メニューで「構成を開く」を選択して、launch.jsonファイルを開きます。
  2. 「構成の追加…」ボタンを使用して、新しい「Node.js:接続」デバッグ構成を追加します。結果の構成は次のようになります。
「構成」:[
  {
    「タイプ」:「ノード」、
    「リクエスト」:「添付」、
    「名前」:「添付」、
    「ポート」:9229
  }
]

これをテストするには、F5を押してデバッグを開始します(ターミナルにデバッガーが添付されているのが見えるはずです)。次に、welcome()エージェントにブレークポイントを配置します。 Dialogflowテストコンソールに移動して、もう一度「hello」と言います。デバッガーはブレークポイントで実行を停止します。

4.コードスタイル(オプション)

VS Codeのセットアップ中は、リンターをセットアップするのがよいでしょう。 JavaScriptの標準スタイルを使用するのは好きです。シンプルだからです。100%のルールは好きではありませんが、十分に近いので、固定スタイルなので、ESLintを調整したり無駄にしたりする必要はありません。オプション。インストールも簡単です。

npm install standard --save-dev

package.jsonにlintコマンドを追加します。

「スクリプト」:{
    ...
    「lint」:「標準」
  }、

次に、npm run lintでコードを確認するか、npm run lint---fixですべてのエラーを修正します。

ただし、おそらくエディターに修正機能が必要です。 VS CodeにはStandardの拡張機能があります。これをインストールした後、{"key": "cmd + l"、 "command": "standard.executeAutofix"}をkeybindings.jsonに追加し、使用したいキーボードショートカットのcmd + lを変更します。これで、ショートカットを使用してコードを標準スタイルに保つことができます。 :)

5.(a)Firebaseのクラウド機能への展開

手順1でCloud Functionsを削除して別れを告げた後、展開に戻りましょう。元のCloud Functionsコードは次のようになったことを思い出してください。

exports.dialogflowFirebaseFulfillment =
    functions.https.onRequest((request、response)=> {...})

エクスプレスアプリはリクエスト/レスポンスを受け取る関数でもあるため、(request、response)=> {...}のCloud Functions要件を満たしていることがわかります。

したがって、既存のsimpleServer.jsをserver.jsとapp.jsに分割できます。 app.jsファイルには、Node.jsまたはCloud Functionsで実行できるアプリケーションが含まれています。

Cloud Functionsを介してエクスプレスアプリを実行する

このアーキテクチャにより、開発中にngrokとノードを使用してローカルで実行し、本番用のCloud Functionsにデプロイすることができます。

結果:

Firebaseの依存関係をインストールすることを忘れないでください:npm install firebase-functions firebase-admin --save。

次に、展開…

Cloud Functionsの展開に慣れていない場合は、Firebaseのドキュメントをご覧ください。

基本的な手順:

  1. Firebase CLIをインストールします:npm install -g firebase-tools @ latest
  2. 以下を含むfirebase.jsonを作成します。
    {「関数」:{「ソース」:「。」、「事前展開」:[「npm run lint」]}}
  3. プロジェクトフォルダー内でfirebase use --addを実行して、Firebaseプロジェクトを選択し、エイリアスを割り当てます。
  4. package.jsonを編集して、「main」スクリプトが「cloudFuncs.js」を指すようにします。
    「メイン」:「cloudFuncs.js」、
  5. Node 8を使用する場合(おそらく!)、これもpackage.jsonに追加します。
    「エンジン」:{「ノード」:「8」}、
  6. 配備してみてください:firebase deploy --only functions
FirebaseのCloud FunctionsにWebフックをデプロイします

デプロイが正常に完了したら、https:// us-central1- [yourprojectid] .cloudfunctions.net / app /のブラウザーでテストエンドポイントを開くことができます(注:エクスプレスのルートマッチングには末尾のスラッシュ/が必要です)。

また、WebフックURLはhttps:// us-central1- [yourprojectid] .cloudfunctions.net / app / dialogflowです。

最後に、npm run deploy-cfを実行していつでもFirebaseにデプロイできるように、package.jsonにデプロイスクリプトを追加します。

  「スクリプト」:{
    ...
    「deploy-cf」:「firebase deploy --only functions」
  }、

ローカルNode.jsとクラウド機能

  • 環境変数は、firebaseコマンドで設定する必要があります。例:
    firebase functions:config:set apiKey = "THE API KEY"
  • 長谷川アランのアドバイスに従って、スクリプトを使用して環境変数の取得と設定を自動化します。
  • グローバル変数は期待どおりに動作しません。
    「クラウド機能の状態が将来の呼び出しのために保持される保証はありません。」https://cloud.google.com/functions/docs/bestpractices/tips

5.(b)Google App Engineへの展開(ボーナス!)

Googleは最近、より柔軟なスケーリング機能をApp Engineに追加し、ノード10をサポートしました。AppEngineとCloud FunctionsでWebフックを実行することの違いは非常に微妙です。私の理解では、Firebaseは潜在的に多くのCloud Functionsを多くのインスタンスで一緒に実行しており、使用されていないときに非アクティブ化されるインスタンスを管理します。一方、App Engineは、需要に応じて自動的にスケーリングできる1つ以上の専用インスタンスでアプリを実行します。

需要がゼロの場合、App Engineはインスタンスをゼロにスケーリングできます。これは、実験中のコスト管理に適したデフォルトです。 App Engineには無料の割り当て(1日あたり28インスタンス時間)があります。これは、1つのインスタンスにコストがかからないことを意味します(ただし、そのことについては言及しないでください)。

App Engineへの展開は、Cloud Functionsよりもはるかに簡単であることがわかりました。

  1. gcloudコマンドラインツールをインストールします—ドキュメントを参照してください
  2. Google Cloud PlatformのAPIとサービスページでプロジェクトのCloud Build APIを有効にします。
  3. プロジェクトのルートにapp.yamlという名前のファイルを作成します。
    ランタイム:nodejs8
    または、最新のNode.jsの場合:
    ランタイム:nodejs10
    (nodejs10を選択した場合、package.jsonの「エンジン」のノードバージョンも変更する必要があります。)
  4. デプロイ:gcloud app deploy --project [yourprojectid]

デプロイが成功した場合、ブラウザをhttps:// [yourprojectid] .appspot.comで開くと、Webフックがhttps:// [yourprojectid] .appspot.com / dialogflowで利用可能になります。

もう一度、package.jsonにデプロイスクリプトを整理して、npm run deploy-aeを実行していつでもデプロイできるようにします。

「スクリプト」:{
    ...
    「deploy-ae」:「gcloud app deploy --project [yourprojectid]」
  }、

概要

次のことができるはずです。

  • 好みのブラウザで、リントおよびデバッグ機能を備えたWebフックプロジェクトのローカル開発環境を作成します。
  • ngrokを使用して、ローカル環境をパブリックhttps URLとして提供する
  • FirebaseのCloud FunctionsおよびGoogle App Engineにアプリケーションをデプロイします

このプロジェクトはDialogflowのWebフックとして始まりましたが、説明した手法はどのWebフックプロジェクトでも機能します。

すべてのコードはgithubにあります:webhook-template。私はこれをあらゆるWebフックプロジェクトの出発点として使用します。あなたもそれが有用であることを願っています。