エージェントをホストする

このチュートリアルの最後のステップは、Dialogflow エージェントをホストすることです。 設定とスケーリングが容易であることから、App Engine はホスティングに使用されます。Dialogflow Messenger 統合は、エージェントのユーザー インターフェースに使用されます。

プロジェクトの構成

理想的には、Dialogflow エージェントと App Engine インスタンスの両方が同じプロジェクト内にあることです。 また、Cloud Build API を有効にする必要があります。

  1. インスタンスを作成する前に、Google Cloud コンソールからプロジェクトを選択します。

    プロジェクト セレクタに移動

  2. プロジェクトに対して Cloud Build API を有効にします。

    Cloud Build API を有効にする

環境のセットアップ

App Engine 用の Go アプリケーションを開発するには、インストールして構成作業をいくつか行う必要があります。開発環境の設定でまだ完了していない手順を完了します。

ウェブサービス コードを作成する

このチュートリアルのサンプルコードは Go で記述されていますが、App Engine でサポートされている任意の言語を使用できます。 ローカルマシンの任意の場所に次のファイル構造を作成します。

  • go-app/: Go サービスのディレクトリ。
    • templates/: Go HTML テンプレートのディレクトリ。
      • index.html: Go HTML テンプレート。
    • app.yaml: サービスの構成。
    • main.go: アプリケーション コード。

以降の 3 つのセクションでは、3 つのファイルの内容について説明します。

index.html ファイルの内容

この Go HTML テンプレート ファイルには、ホームページの HTML が含まれています。このファイルに次の内容を入力します。

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tutorial agent</title>
  </head>
  <body>
    <p>Open the chat window in the bottom right corner.</p>
  </body>
</html>

app.yaml ファイルの内容

これは、サービスのランタイム環境の設定を指定する構成ファイルです。 サポートされている Go バージョンのリストについては、Go 1.12 以降のランタイム環境のドキュメントをご覧ください。 このファイルに次の内容を入力します。

runtime: go116  # or another supported version

main.go ファイルの内容

このファイルにはアプリケーション コードが含まれています。このファイルに次の内容を入力します。

// Package main is the main package
package main

import (
	"log"
	"net/http"
	"os"
	"text/template"
)

var templates *template.Template

func init() {
	templates = template.Must(template.New("").ParseGlob("templates/*"))
}

// indexHandler handles the homepage.
func indexHandler(w http.ResponseWriter, r *http.Request) {
	if r.URL.Path != "/" {
		http.NotFound(w, r)
		return
	}
	if err := templates.ExecuteTemplate(w, "index.html", nil); err != nil {
		log.Fatal(err)
	}
}

func main() {
	// Register the handlers
	http.HandleFunc("/", indexHandler)

	port := os.Getenv("PORT")
	if port == "" {
		port = "8080"
		log.Printf("Defaulting to port %s", port)
	}

	log.Printf("Listening on port %s", port)
	if err := http.ListenAndServe(":"+port, nil); err != nil {
		log.Fatal(err)
	}
}

ウェブサービスをデプロイする

これで、コードをデプロイできるようになりました。以下のデプロイの手順では、gcloud ツールを使用します。

  1. gcloud が Dialogflow エージェントと同じプロジェクトで構成されていることを確認します。 プロジェクトを確認するには:

    gcloud config get-value project

    プロジェクトを変更するには:

    gcloud config set project YOUR_PROJECT
  2. app.yaml ファイルがある go-app ディレクトリで、次のコマンドを使用してウェブサービスを App Engine にデプロイします。

    gcloud app deploy

    コマンドから、リージョンの入力を求められます。 Dialogflow エージェントと同じリージョンを選択してください。 このコマンドを実行すると、target url 値(ウェブサービスの URL)が出力されます。

  3. ブラウザを起動してウェブサービスを表示するには、前のステップで取得したターゲット URL を開くか、次のコマンドを実行します。

    gcloud app browse

Dialogflow Messenger を設定する

Dialogflow Messenger をセットアップして有効にするには:

  1. Dialogflow ES コンソールに移動します。
  2. 左側のサイドバー メニューで [Integrations] をクリックします。
  3. [Dialogflow Messenger] をクリックします。
  4. 構成ダイアログが開きます。
  5. 環境を選択します。
  6. [有効にする] をクリックします。
  7. ウェブサイトに貼り付ける埋め込みコードをコピーします。
  8. [閉じる] をクリックします。

ウェブサービスにエージェントを埋め込む

上記でコピーした埋め込みコードを index.html ファイルに貼り付けます。 <script><df-messenger> HTML 要素をページの <body> 要素に含める必要があります。

gcloud でウェブサービス アプリを再度デプロイします。埋め込んだら、右下のチャット アイコンをクリックすると、ウェブページを介してエージェントを操作できます。

ウェブページに埋め込まれた Dialogflow エージェントのスクリーンショット

これで、Dialogflow エージェントが完全にデプロイされました。 エージェントと会話してみてください。

クリーンアップ

このチュートリアルの手順を進めながら、課金対象のリソースを作成しました。 Google Cloud アカウントに課金されないようにするには:

  1. データベース インスタンスを削除します
  2. 関数を削除します。

    gcloud functions delete tutorial-telecommunications-webhook
  3. アプリを無効にする

  4. エージェントを削除する

詳細

上述の手順の詳細については、以下をご覧ください。