Reveal.js を利用した内部公開スライドサーバーでスライドの自動デプロイを行う

概要

Reveal.js を利用した内部公開スライドサーバーでスライド自動デプロイを行います。

構成

• GitLab : GitHub Clone 。Git リポジトリの管理
• Hubot : ボット開発・実行フレームワーク
• Kandan : HipChat Clone. チャットツール
• スライドサーバー (node.js / reveal.js / connect )

構成図

処理の流れ

• ローカル環境で、Reveal.js のスライドを編集し、 GitLab サーバーに push
• GitLab サーバーは WebHooks を利用して Hubot へ push を通知
• Hubot は node.js の child_process を利用してシステムコマンドからスライドサーバーデプロイ用の bash を呼び出し、デプロイを実行
• Hubot は push の内容を Kandan のチャットに通知

前提

• スライドサーバーの初期構築は済んでいる前提
• Hubot サーバーからスライドサーバーへの 公開鍵による ssh 接続設定を済ませておく

サンプルコード

デプロイ用の bash

スライドサーバーに公開鍵で ssh 接続し、
対象ディレクトリに移動後、 git pull します。
静的サイトにつき、 git pull のみで最新化完了。

Hubot プロジェクト直下に shells ディレクトリを作成し、
そこに、 deploy_slide.bash として保存します。
※ディレクトリ構成や bash のファイルについて、命名や配置は自由

# !/bin/bash
cat << EOF > /tmp/CMD.txt
cd /home/some_user/slides/
git pull
EOF
CMD=`cat /tmp/CMD.txt`
rm /tmp/CMD.txt
ssh some_user@ip_or_name -i /home/some_user/.ssh/keyname "$CMD"

Hubot Script

GitLab の WebHooks に Hubot Server を登録し、
スライドショーのリポジトリに対して、 push があればHubot に通知する。

Hubot は、push の通知に対して

• push 内容を Kandan に Chat
• システムコマンドを呼び出し、スライドサーバーにリモート接続してデプロイを実行

の2つのタスクを行う。

# Description
#   Deploy slide server(trigger is GitLab push event)
#
# Dependencies:
#   None
#
# Configuration:
#   None
child_process = require 'child_process'

module.exports = (robot) ->
  say = (message) ->
    user = {
      room :
        id : 11 # Slide
    }

    robot.send user, message

  robot.router.post "/gitlab/hook/slides", (req, res) ->
    json  = req.body
    say "New Slide Added or Updated"
    say "json['repository.name'] = #{json['repository']['name']}"
    say "json['commits'][0]['message'] = #{json['commits'][0]['message']}"
    child_process.exec ". /path/to/hubot_project/shells/deploy_slide.bash", (error, stdout, stderr) ->
      if !error
        say "http://ip_or_domain:your_port/index.html"
      else
        say "error"
    res.send 200

結果確認

実行前 スライド確認

変更内容

• 変更前

##  Let's Publish Slideshow!

• 変更後

##  さぁ、スライド作るべさ

変更適用

$ git add -A
$ git commit -m "日本語にしたべさ（検証中）"
$ git push origin master

実行後 スライド確認

実行後 Kandan チャット確認