Azure Bot Builder SDK for Node.js Version 4でTypeScript開発環境構築

botbuilderのVersion4ですが、いつリリースされるのかと待ってたところ、今週botbuilderの4.0.6がnpmにリリースされて、preview表示が消えているのを見つけました。

実際はまだ各所でPreviewのままなので正式リリースでは無いのかもしれません。

このロードマップ見てもそろそろ固まってきたかな、と思い使い始めることにしました。

Roadmap · Microsoft/botbuilder-js Wiki · GitHub

とりあえず初期作成からTypeScriptで開発できる環境構築までやったので書きます。

環境
Botの初期作成
ソースコードダウンロード
TypeScript開発環境調整(ソース関連）
- 追加部分
- 変更部分
TypeScript開発環境調整(設定ファイル関連）
Typescript化後のTest & Debug & Deploy
あとは

環境

azコマンドのbotservice extentionも同じタイミングで新しいバージョンがリリースされていたので、それを入れています。

$ az --version
azure-cli (2.0.46)
〜省略
Extensions:
botservice (0.4.1)

Botの初期作成

最初はBot作成です。 azコマンドでやると認証部分で上手くデプロイできなかったのでウィザードから。ここはSDK v4はプレビュー表示です。

f:id:yomon8:20180927160206p:plain

ソースコードダウンロード

デプロイが終わったらソースコードダウンロードします。この時点ではCommonJSです。

$ az bot download -g otomo-rg -n otomo-type-bot

TypeScript開発環境調整(ソース関連）

追加部分

Typescriptのソースとコンパイル後のファイル出力先を作成しておきます。

$ mkdir src/ dist/

上記を受けて、tsconfig.json も最低限の設定で準備しておきます。

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "moduleResolution": "node"
  }
}

変更部分

ファイル移動

JSファイルはTSファイルに変更してsrcフォルダに移動します。

$ mv index.js src/index.ts
$ mv bot.js src/bot.ts

bot.tsの変更

TypeScriptで最低限動くように調整します。

$ git diff -U0 src/bot.ts
diff --git a/src/bot.ts b/src/bot.ts
index b5c2347..d64c88f 100644
--- a/src/bot.ts
+++ b/src/bot.ts
@@ -15,0 +16,2 @@ class EchoBot {
+    private countProperty;
+    private conversationState;
@@ -48 +50 @@ class EchoBot {
-exports.EchoBot = EchoBot;
+export { EchoBot };

index.tsの変更

上記と同じでImport部分を調整します。

$ git diff -U0 src/index.ts
diff --git a/src/index.ts b/src/index.ts
index a4b56d7..fea7c19 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16 +16 @@ const { BotConfiguration } = require('botframework-config');
-const { EchoBot } = require('./bot');
+import { EchoBot } from './bot';

ディレクトリ構造が変わるので、相対的な.env の場所を調整。

@@ -20 +20 @@ const { EchoBot } = require('./bot');
-const ENV_FILE = path.join(__dirname, '.env');
+const ENV_FILE = path.join(__dirname, '../.env');

同様にディレクトリ構造の変化から相対的な botFilePath の場所が変わるので調整。

@@ -25 +25 @@ const env = require('dotenv').config({ path: ENV_FILE });
-const BOT_FILE = path.join(__dirname, (process.env.botFilePath || ''));
+const BOT_FILE = path.join(__dirname, (process.env.botFilePath || env.parsed.botFilePath || ''));

TypeScript開発環境調整(設定ファイル関連）

.env修正

.env の中でbotファイルを指定している部分も相対パスを変更します。

-botFilePath=./otomo-type-bot.bot
+botFilePath=../otomo-type-bot.bot

web.config

ディレクトリ構造の変化に合わせてエントリポイントを調整。

$ git diff -U0 web.config
diff --git a/web.config b/web.config
index 9a4ff8e..7a2b001 100644
--- a/web.config
+++ b/web.config
@@ -15 +15 @@
-      <add name="iisnode" path="index.js" verb="*" modules="iisnode"/>
+      <add name="iisnode" path="dist/index.js" verb="*" modules="iisnode"/>
@@ -21 +21 @@
-          <match url="^index.js\/debug[\/]?" />
+          <match url="^dist\/index.js\/debug[\/]?" />
@@ -34 +34 @@
-          <action type="Rewrite" url="index.js"/>
+          <action type="Rewrite" url="dist/index.js"/>

WebAppの環境変数変更

Azure上では .env ではなく、WebAppの環境変数が使われるので、botFilePathの値を変更しておきます。

変更前

$ az webapp config appsettings list -g otomo-rg -n otomo-type-bot --query '[?name == `botFilePath`]'
[
  {
    "name": "botFilePath",
    "slotSetting": false,
    "value": "./otomo-type-bot.bot"
  }
]

変更実施

$ az webapp config appsettings set -g otomo-rg -n otomo-type-bot --settings 'botFilePath=../otomo-type-bot.bot' --query '[?name == `botFilePath`]'
[
  {
    "name": "botFilePath",
    "slotSetting": false,
    "value": "../otomo-type-bot.bot"
  }
]

package.json

scripts の各項目の前にtsc コマンドを仕込みます。ついでにデプロイ用に publish という名前でタスク仕込みます。

$ git diff -U0 package.json
diff --git a/package.json b/package.json
index 9dea352..cbb25cd 100644
--- a/package.json
+++ b/package.json
@@ -8,2 +8,3 @@
-    "start": "node index.js",
-    "watch": "nodemon index.js"
+    "start": "tsc && node dist/index.js",
+    "watch": "tsc && nodemon dist/index.js",
+    "publish": "tsc && az bot publish -g otomo-rg -n otomo-type-bot"

Typescript化後のTest & Debug & Deploy

ローカルテスト

まずはローカルPCでテストが動くことを確認します。

$ npm start

> echobot-with-counter@1.0.0 start /home/yomon8/work/otomo-type-bot
> tsc && node dist/index.js


restify listening to http://[::]:3978

Get Bot Framework Emulator: https://aka.ms/botframework-emulator

To talk to your bot, open echoBot-with-counter.bot file in the Emulator

デバッグ

以下の2ファイル準備してvscodeでデバッグできます。

事前のコンパイルタスクと、

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Compile TypeScript",
      "type": "shell",
      "command": "tsc",
      "problemMatcher": []
    }
  ]
}

実際のデバッグ用の設定です。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debugging TypeScript",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/dist/index.js",
      "preLaunchTask": "Compile TypeScript",
      "cwd": "${workspaceFolder}",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}