VTRyo Blog

一歩ずつ前に進むブログ

CircleCIでビルドした成果物をSlackに自動アップロードする

ども。

久々に書くけどまたCircleCIネタになってしまいました。楽しいから仕方ないね。

さて、今回は技術書典の合同誌をCI設定するにあたってちょっと一工夫いるかと思って書いた次第。

個人で書いていたこの同人誌↓は、個人のCircleCIアカウントに紐づけてCIしていました。

vtryo.booth.pm

CircleCI上でビルドしたPDFをCircleCIページからダウンロードしてたりしたんです。

f:id:vtryo:20191026184712p:plain

ただ、合同誌になると個人のページに他のコラボレーターがアクセスできたっけ。できなそうじゃね?

わからんけど、Slackがあるんだからそっちに投げとけばみんな見やすいだろって思ったので、その設定の話です。

アップロードフロー

雑ですがこういう感じでアップロードをしてもらいます。 なお、GrowthfactionではGithubではなくBitbucketを使っていますが問題なくできます。

f:id:vtryo:20191026180550p:plain
フロー

準備するもの

リポジトリ管理

  • github(もしくはbitbuketなど。CircleCIと連携可能なものです)

Slackワークスペース

投稿したいSlackワークスペースがあれば問題ないです。

やっていく

slackcatと連携する

Macをお使いの人は以下のコマンドでインストール。

brew install slackcat

それ以外の人は公式ページにあるインストール方法を参照。

github.com

インストール後に設定コマンドを実行。ワークスペースの名前を入れると、自動でブラウザに飛びます。

$ slackcat --configure

nickname for team: <INPUT_YOUR_SLACK_TEAM_NAME>
slackcat creating token request for slackcat
slackcat Use the below URL to authorize slackcat if browser fails to launch
slackcat http://slackcat.chat/configure
token issued:

f:id:vtryo:20191026181249p:plain
連携画面

f:id:vtryo:20191026181216p:plain
slackcatが連携後にTokenを発行

この発行されたTokenをあとでCircleCIに設定するのでメモっておきます。

Re:VIEWの設定

Re:VIEWテンプレートを使っていきます。 大元はこちらです。

github.com

この中にあるarticles/config.ymlをちょっといじります。 ファイル内にある booknameをシンプルなものに変えておきます*1

# review-epubmaker向けの設定ファイルの例。
# yamlファイルをRe:VIEWファイルのある場所に置き、
# 「review-epubmaker yamlファイル」を実行すると、<bookname>.epubファイルが
# 生成されます。
# このファイルはUTF-8エンコーディングで記述してください。

# この設定ファイルでサポートするRe:VIEWのバージョン番号。
# major versionが違うときにはエラーを出す。
review_version: 3.1

# ほかの設定ファイルの継承を指定できる。同じパラメータに異なる値がある場合は、
# 呼び出し元の値が優先される。
# A.yml、B.ymlのパラメータを継承する例。A.ymlとB.ymlに同じパラメータがある
# 場合、B.ymlの値が優先される。さらに今このファイルに同じパラメータがあるなら、
# その値がB.ymlよりも優先される。
# 同様にA.yml、B.yml内でさらにinherit:パラメータを使うこともできる。
# inherit: ["A.yml", "B.yml"]

# ブック名(ファイル名になるもの。ASCII範囲の文字を使用)
bookname: book #ここをbookに変えておきましょう。

~省略~

CircleCI

CircleCIの設定です。予め登録などは済ませておいてください。この辺の設定などはあちこちにブログが転がっていると思います。

Free プランのユーザーは、2,500 クレジットで 1 週間あたり最大 250 分間のビルドを実行できます。

とあるので、十分Freeでも行けます(並列実行はできないので注意)。

circleci.com

circleci/config.yml

具体的なconfigの話にします。Re:VIEWにPDFをビルドさせて、Slackに転送する。

version: 2

build: &build-image
  docker:
    - image: vvakame/review:3.1         #reviewコンテナをPull

slackcat: &slackcat-image
  docker:
    - image: vtryo/slackcat:node-6.10.0   #slackcatをインストールしておいたコンテナをPull 

aliases:           #ビルドした成果物をarticles/配下にbook.pdfとして保存されるので、これをpersist_workspaceで保存。attach_workspaceで展開するための設定
  - &attach_workspace
    at: articles
  - &persist_to_workspace
    root: articles
    paths:
      - book.pdf

references:
  commands:
    build_pdf: &build_pdf
      description: "PDFを生成する"
      name: Build PDF
      command: ./setup.sh && REVIEW_CONFIG_FILE=$REVIEW_CONFIG_FILE npm run pdf

    slackcat_cofigure: &slackcat_cofigure
      description: "slack tokenを書き込む"
      name: slackcat configure
      command: echo $SLACK_TOKEN > ~/.slackcat

    file_deploy: &file_deploy
      description: "チャンネルに転送する。チャンネルの指定はcircleciの環境設定で変更する"
      name: file deploy
      command: slackcat --channel $TO_CHANNEL ./articles/book.pdf

jobs:
  build: &build
    <<: *build-image
    steps:
      - checkout
      - run: *build_pdf
      - store_artifacts:
          path: ./articles/book.pdf
          destination: book.pdf
      - persist_to_workspace: *persist_to_workspace      #book.pdfを保存

  deploy: &deploy
    <<: *slackcat-image
    steps:
      - checkout
      - attach_workspace: *attach_workspace     #book.pdfを展開
      - run: *slackcat_cofigure
      - run: *file_deploy

workflows:
  version: 2
  articles-build:
    jobs:
      # - lint
      - build:
          filters:     #build/* というブランチ名でしかJobを実行させない
            branches:
              only: /^build\/.*/
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: /^build\/.*/

環境変数

CircleCI画面で環境変数を設定します。

ADD PROJECTをしたあとなら、このようにJOBSのタブでプロジェクトに歯車マークがあるはずです。

f:id:vtryo:20191026183648p:plain

上記で記述した環境変数を設定します。

f:id:vtryo:20191026183810p:plain

CircleCIのビルド

ここまでやったらbuild/*で適当にブランチを作ってみましょう。CircleCIがビルドの実行を開始させます。

↓結果

f:id:vtryo:20191026183458p:plain
Slackに届いた

もしビルドさせたくない(CircleCIを動かしたくない)場合は、commitメッセージにskip ciと入れると動きません。

circleci.com

まとめというか感想

合同誌だと特に成果物を確認しながら進めたかったりすると思うので、リポジトリを荒らさずにPDFをビルドしたかったりします。

CircleCI上でビルドしてくれるなら荒れないけど、いちいち確認しにいくのだるいな〜ってときにいいですね。

実際これ設定するのに30分もいらない*2ので、ぜひやってみてくださいな。

Enjoy技術同人誌!

参考

qiita.com

余談

CircleCI ユーザコミュニティのOrganizerになりました。12月に渋谷で開催する予定です!お待ちしてます^^

circleci.connpass.com

*1:CircleCIで設定する名前と紐付いていればいいです

*2:このブログの方が時間かかった