Zenn
🤖

HubotとSlackを連携して文字や画像を返す(2020年版)

2020/10/19に公開
Docker
Heroku
Slack
hubot
tech

概要

今さらですがHubotとSlackを連携して遊んでみたら結構楽しかったので記事として残します。

完成イメージ


※ 現場猫の画像をお借りしています🙇‍♂️

完成品

https://github.com/nagi125/hubot-slack-sample

Slack側の設定

事前にSlack側にHubotを追加しておきます。
App検索でHubotと調べればでてきますので「Slackに追加」を押して追加します。

ユーザー名を指定する必要があるので入力します。
Botのユーザー名になります。

Tokenが発行されるため、これをサーバー側に設定します。

Slack側にBotが作成されていれば、Slack側の設定は完了です。
※現場猫の画像をお借りしています🙇‍♂️

Dockerを利用してLocal環境で動かす

Docker環境準備

Dockerfileとdocker-compose.ymlは下記の通りです。
Hubot作成時にrootユーザーだと怒られてしまうので、hubotユーザーを準備しています。
docker-compose.ymlで環境変数を読み込むように設定しているので.envファイルにTOKENを書いてください。

Dockerfile

FROM node:13.8-alpine

ENV TZ Asia/Tokyo

# Hubotライブラリ準備
RUN npm install -g yo generator-hubot

# Hubot用のユーザー作成
RUN addgroup -S hubot && \
    adduser -S hubot -G hubot && \
    echo "hubot ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers && \
    echo 'hubot:hubot' | chpasswd

USER hubot

WORKDIR /app

docker-compose.yml

version: '3'
services:
  hubot:
    container_name: hubot
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/app
    stdin_open: true
    env_file:
      - .env
    tty: true
    restart: always

.env

HUBOT_SLACK_TOKEN=xxxxx

Hubotの設定

Docker環境を立ち上げて、Containerの中に入ります。

$ docker-compose up -d
$ docker-compose exec hubot /bin/ash

yoコマンドでHubotを作成します。

$ yo hubot

Hubotから色々聞かれるので答えていってください。
※ Bot adapterは「slack」と入力してください。

? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== Yes
                     _____________________________
                    /                             \
   //\              |      Extracting input for    |
  ////\    _____    |   self-replication process   |
 //////\  /_____\   \                             /
 ======= |[^_/\_]|   /----------------------------
  |   | _|___@@__|__
  +===+/  ///     \_\
   | |_\ /// HUBOT/\\
   |___/\//      /  \\
         \      /   +---+
          \____/    |   |
           | //|    +===+
            \//      |xx|

? Owner nagi125.dev@gmail.com
? Bot name myhubot
? Description A simple helpful robot for your Company
? Bot adapter slack

Scriptの準備

「scripts/」にCoffeeScriptを準備すれば完成です。
execを利用するため「child_process」をrequireしてください。
scripts/sample.coffee

child_process = require 'child_process'

module.exports = (robot) ->
  # メッセージ送信
  robot.hear /疲れた/i, (msg) ->
    msg.send  "頑張って！"

  # 画像送信(imagesディレクトリはプロジェクト直下)
  robot.hear /ヨシ！/i, (msg) ->
    filename = 'images/neko.jpg'
    channel = msg.message.rawMessage.channel
    child_process.exec "curl -F file=@#{filename} -F channels=#{channel} -F token=#{process.env.HUBOT_SLACK_TOKEN} https://slack.com/api/files.upload"

Hubotを立ち上げる

$ bin/hubot -a slack

動作を確認する


ヨシ！

HerokuにDeployする

heroku-cli利用前提で書きます。(インストール方法)

Nodeのバージョンを修正する

Localのバージョンと揃える

  "engines": {
    "node": "13.x"
  }

Procfileの確認をする

Hubot作成時にslackを指定しないとHerokuで使うProcfileの設定が上手くいっていないので下記になっているか確認する。

web: bin/hubot -a slack

アプリケーションの作成

$ heroku apps:create your-app-name

アプリケーションのDeploy

※ 2020/10/19現在masterでもOK

$ git push heroku main

環境変数のセット

Slack側で発行されたTokenを設定する

heroku config:set HUBOT_SLACK_TOKEN=xxxxx -a your-app-name

最後に

気分転換に作ったら意外にも社内で評判がよかったので記事として残します。
せっかく作ったので社内の作業自動化等で活用したいなーって思ってます。
基幹システム側でAPI作ってレポート通知とか？

Discussion