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

このチュートリアルの最後のステップは、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 CX Messenger エージェントへの未認証アクセスを設定するには:

  1. Dialogflow CX コンソールに移動する。
  2. ご自身の Google Cloud プロジェクトを選択します。
  3. エージェントを選択します。
  4. [Manage] タブを選択します。
  5. 左側のサイドバー メニューで [Integrations] をクリックします。
  6. Dialogflow CX Messenger で [接続] をクリックします。
  7. 構成ダイアログが開きます。
  8. このエージェントに対して以前に統合が設定されている場合、埋め込み可能な HTML コードが表示されます。認証と非認証のどちらを行うかに関係なく、ダイアログの下部にある [無効にする...] ボタンをクリックして、設定を次の手順で再構成します。
  9. 環境を選択します。
  10. [未認証の API] を選択します。
  11. スタイルを選択します。
  12. 必要に応じて、ドメイン アクセスを制限します。
  13. [未認証の API を有効化する] をクリックします。
  14. ダイアログに、ウェブサイトに埋め込むことができる埋め込み可能な HTML コードが表示されます。そのコードをコピーします。
  15. [完了] をクリックします。

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

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

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

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

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

クリーンアップ

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

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

  2. 関数を削除します。

    gcloud functions delete tutorial-telecommunications-webhook

  3. アプリを無効にする

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

詳細

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

前へ
データベースに対してクエリを実行する