github actions で storybook & storycap & reg-suitをやる

storybook & storycap & reg-suit をgithub actionsを使ってやる方法の備忘録。ググっても出なかったので書いてみる。
storybookの書き方は書きません

yarn

yarn add -D @storybook/react
yarn add -D storycap 
yarn add -D reg-suit reg-keygen-git-hash-plugin reg-notify-github-plugin reg-publish-s3-plugin 

storybook と storycap(storybookのキャプチャするやつ) と reg-suit をやーん

reg-suit init

reg-suit init

reg-suit init でよしなに。このタイミングで必要なreg-notify-github-pluginのキーは生成しちゃってください（後からやっても問題はない

私の場合 reg-suit init の結果はこんな感じで。コピペしても問題ない

regconfig.json

{
  "core": {
    "workingDir": ".reg",
    "actualDir": "__screenshots__",
    "thresholdRate": 0,
    "addIgnore": true,
    "ximgdiff": {
      "invocationType": "client"
    }
  },
  "plugins": {
    "reg-keygen-git-hash-plugin": true,
    "reg-notify-github-plugin": {
      "clientId": "$REG_NOTICE_CLIENT_ID"
    },
    "reg-publish-s3-plugin": {
      "bucketName": "your_choice"
    }
  }
}

plugins.reg-notify-github-plugin.clientId はgithub actions のenvから読み込ませたいので $REG_NOTICE_CLIENT_ID こんな感じにしてます
bucketNameとかはお好みで

package.json にscript追加

package.json

{
  "scripts": {
    "ci:vrt": "reg-suit run",
    "ci:storybook-generate": "build-storybook  -c .storybook -o dist-storybook -s public",
    "ci:storycap": "storycap --serverTimeout 60000 --captureTimeout 10000 --serverCmd 'npx http-server dist-storybook --ci -p 9009' http://localhost:9009",
  }
}

package.jsonはこんな感じ
storybookは静的で作ってからstorycapでスクショをとらせてます。travisとかサイコーCIとかだとこんなことしなくても良いみたいですが、github actionsだとこの手順じゃないとできませんでした

github actions のymlを作成

/.github/workflows/reg-suit.yml

name: reg-suit

on: push

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2.0.0
        with:
          fetch-depth:  0
      - name: Set Node.js 13.x
        uses: actions/setup-node@v1.3.0
        with:
          node-version: 13.x
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
      - uses: actions/cache@v1
        id: yarn-cache 
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-
      - name: yarn install
        run: yarn
      - name: workaround for detached HEAD
        run: |
           git checkout ${GITHUB_REF#refs/heads/} || git checkout -b ${GITHUB_REF#refs/heads/} && git pull
      - name: run storybook generate
        run: yarn run ci:storybook-generate
      - name: run storycap
        run: yarn ci:storycap
      - name: run reg-suit
        run: yarn ci:vrt

env:
  REG_NOTICE_CLIENT_ID: ${{ secrets.REG_NOTICE_CLIENT_ID }}
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

chacheとか使う感じで書いてます

reg-publish-s3-plugin とreg-notify-github-plugin のシークレットKeyとかはenvから参照するようにしているので、githubのリポジトリ設定からsecretを選択して REG_NOTICE_CLIENT_ID とかで設定してください

AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY この辺はIAMとかでS3にアクセスできるやつ作ってください

あとはpushとかしてきっとうまくいくはず(たぶん