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

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

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

## yarn

```sh
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

```sh
reg-suit init
```

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

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

```json: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追加

```json: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を作成

```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とかしてきっとうまくいくはず(たぶん