Botkit middleware を作ってみる作業メモ②

続き。

やること

  • [x] modern JavaScript なプロジェクトをセットアップしてみる
  • [x] Botkitアプリケーションに対して外から入れるような形のモジュールを作ってみる
    • Botkit middleware
  • [x] ローカルでのyarnを介したモジュール開発をしてみる
  • [ ] npmに登録してみる
  • [ ] サンプルアプリケーションを作成してみる
  • [ ] Deploy to Heroku で簡単に触って見られる、という感じにしてみる

第3章: npmへの登録

やっていきましょう。前回のステップでも大変お世話になった記事、続きを読んでいきます。

liginc.co.jp

「ソースはgit管理させつつ自動生成された最終成果物はgit管理させない、最終成果物はnpmに登録させつつソースは登録させない」か。そのためにbuildとprepublishが必要〜と。。

コマンドはrollup.jsの公式に載っている例をそのまま、で良い・・かな? f:id:o0h:20181014181825p:plain

ということで、

diff --git a/package.json b/package.json
index 02a630d..e7121b7 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
   "main": "dist/index.js",
   "scripts": {
     "watch": "rollup -cw",
+    "prepublish": "rollup -c --environment INCLUDE_DEPS,BUILD:production",
+    "build": "rollup -c --environment INCLUDE_DEPS,BUILD:production",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

こんなんでいいのかな。

qiita.com docs.npmjs.com

Additionally, everything in node_modules is ignored, except for bundled dependencies. npm automatically handles this for you, so don't bother adding node_modules to .npmignore.

なのね。なるほど。

あとは、「タグを打ってgithubにpushしてnpmにpublishする」っぽい。

docs.npmjs.com

npm version patch
git tag
git push -f
git push origin v0.0.2
npm publish

やった〜〜〜!🎉🎉 f:id:o0h:20181014183529p:plain

READMEとか、あとでちゃんと整えよ・・・

publish打ったときに、

npm WARN prepublish-on-install As of npm@5, prepublish scripts are deprecated

と言われたのだけど。気になって調べてみたら、なんだか面倒くさいんですね・・・

qiita.com これもどっかしらで。

ひとまず、これで公開された!ということで、ローカルのパッケージを正常な状態にしてみる。

  • yarn unlink botkit-hashtag
  • yarn add botkit-hashta

ls打ってみたらちゃんと入ってるな〜〜!嬉しい。yarn.lockとかrollup.config.jsもnpmignoreしちゃっていいのかな?

$ ls -l node_modules/botkit-hashtag
total 192
-rw-r--r--  1 hkinjyo  staff   1070 10 14 18:49 LICENSE
-rw-r--r--  1 hkinjyo  staff     53 10 14 18:49 README.md
drwxr-xr-x  4 hkinjyo  staff    128 10 14 18:49 dist
-rw-r--r--  1 hkinjyo  staff   1323 10 14 18:49 package.json
-rw-r--r--  1 hkinjyo  staff    288 10 14 18:49 rollup.config.js
-rw-r--r--  1 hkinjyo  staff  81303 10 14 18:49 yarn.lock

第4章: サンプルアプリの作成 & deploy to heroku

ローカルでbotkitアプリを作りながら作業を進めてきていたので、それを少し整える。

  • yarn add botkit botkit-hashtag

あとは、dev系のツールは基本的にbotkit-hashtagと同じでいいかな〜という感じで。ただ、(楽をするために)勤め先のeslint-configに乗っかりたいので、依存するモジュールを足しておく

  • yarn add eslint-plugin-flowtype eslint-plugin-react

アプリケーションの内容は、 src/index.js に数行書いて終わりになりそ〜

そしてもう最後の山場?となる、Deploy to Heroku buttonである。

devcenter.heroku.com

今回でいうと、やりたいことは

  • 初回インストール時にENVの指定を案内できて
  • yarnで依存を解決できて
  • nodeアプリケーションを起動できて

くらいかなぁ。大したことがない! 👼
そういう観点で、 app.json の設置と一部 package.json の修正を加えて。

・・・で、ここで結構ハマったのだけど 基本的な事しかしないのであれば、package.jsonにだけ書いておけば十分に動くので、app.jsonのscriptsは必要なかった みたい。
基本的なこと => 要するに、

{
  "scripts": {
    "build": "rollup -c --environment INCLUDE_DEPS,BUILD:production",
    "start": "node dist/index.js",
    "postinstall": "yarn run build",
  }
}

あたり。これらを用いて、良しなにビルド&スタートしてくれた。app.json側にも同様に start などの動きを指定できるのだが、中途半端に使おうとしたためか、デプロイに失敗して暫くハマってしまった・・

formationの変更

ここまでで、ひとまずデプロイまではうまく行った・・・のだが、少し時間が経つと反応しなくなる。
ログを見る。

  • heroku logs -t --app $HEROKU_APP_NAME

Web process failed to bind to $PORT within 60 seconds of launch

と書いてある。
たどり着いたのがこの文書で、「あーたしかにworkerにしたほうが良いよね〜webで起動しているのにweb用のポートの待受ができていないよ!!」っていう理屈で落ちるのか、と。

[Slack]Botkitをherokuの無料プランで動かす方法

app.jsonの formation 、Procfile辺りが関係しそう。うまきゃって「workerだけ動かす」ができれば最高。

Platform API Reference | Heroku Dev Center

・・・なのだが、暫くハマってみて解決できなかった。。。*1

で、気持ち悪いのだけど「無理やりwebサーバー起動してしまえばいいのか」っていう発想の転換。会社で使っているbotkitベースのアプリケーションにはworkerの利用などの様子が見られず、なんで大丈夫なんだ?というところから得た解法。

index.jsを修正する。

diff --git a/src/index.js b/src/index.js
index c1f3d28..53014f3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ const controller = botkit.slackbot({ debug: process.env.DEBUG })

 require('botkit-hashtag')(controller)

+controller.setupWebserver(process.env.PORT || 3000, (err, webserver) => {})
 controller
   .spawn({
     token: process.env.SLACK_TOKEN

いやー・・・👼

とりあえず動くようになりましたよ!

作業メモとしてはここらへんまで。

残タスクとしては

  • npmモジュールちゃんとする。いい感じにREADME入れる
    • botkitのmiddlewareでテスト書いてあるやつないかな〜参考になるのがあればちゃんとしたい
  • app側も使いやすくする。機能紹介+step-by-steoの導入を作る。qiita辺りかなー

*1:「webじゃないからか」という点に至るまでに、そもそも時間を要していて、そこからの「formationが組めないなぁ」の絶望たるや・・・何が悪いんだろうか。やり方は確実にあると思うのだけども。