Zenn
🙄

モノレポ + Chromaticでちょっとつまづいた話

2024/10/26に公開
Storybook
GitHub Actions
Chromatic
monorepo
tech

めっちゃ小ネタなので1、2分で読み終わると思います笑

これは何

個人開発のモノレポで「StorybookをChromaticにアップロードしたい！」となり、GitHub Actionsのworkflowを作成したところ、思ったように動かず「なんなの！ｷｰｯ！」となった時の話です。
（GitHub Actionsが何か、Chromaticが何かみたいなポイントには今回は触れていません🙇🏻‍♂️）

開発環境・ディレクトリ構成

  • 今回の開発ではNode.jsではなくBunをしてしています
  • frontendについてはVite + Reactという構成
  • ディレクトリは以下のようなモノレポ構成になってます
      .
  ├── frontend/
  │   ├── index.ts
  │   ├── node_modules  
  │   └── package.json
  ├── node_modules
  └── package.json
    • frontendには専用のfrontendディレクトリが切ってあり、ルートをbackend用途で使用しています

つまづいたポイント①

当初workflowファイルは以下のような内容で作成していました。
（name, onなどの直接関係ない部分は割愛しています）

chromatic.yaml
jobs:
  chromatic:
    name: "Chromatic"
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    steps:
      - name: "Checkout Code"
        uses: actions/checkout@v4
      - name: "Setup bun"
        uses: oven-sh/setup-bun@v2
      - name: "Install Dependencies"
        run: bun install
      - name: "Run Chromatic"
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

ところが実行してみると以下のようなエラーが。

Run chromaui/action@latest

Chromatic CLI v11.15.0--canary.1096.11448539011.0
https://www.chromatic.com/docs/cli

✖ Invalid package.json
Found invalid package.json at <frontendのpackage.json>
Make sure this is a valid Node.js package file, is readable, and contains a "scripts" block.

色々調べてみたところ公式のドキュメントでモノレポを使った場合の対応方法が書いてありました。
https://www.chromatic.com/docs/github-actions/#run-chromatic-on-monorepos
どうやらworkingDirというパラメータで処理を実行するディレクトリを指定する必要があったみたいです。（この部分workflow全体の実行場所をworking-directory: frontendで指定していしていたので完全に見落としてました。）

chromatic.yaml
jobs:
  chromatic:
    name: "Chromatic"
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    steps:
      - name: "Checkout Code"
        uses: actions/checkout@v4
      - name: "Setup bun"
        uses: oven-sh/setup-bun@v2
      - name: "Install Dependencies"
        run: bun install
      - name: "Run Chromatic"
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          # workingDirを指定
          workingDir: frontend

つまづいたポイント②

「さぁこれでもう大丈夫！！」とworkflow実行したところ今度は別のエラーが。ｷｰｯ！！！！

09:37:54.623 Retrieving git information
09:37:54.661     → ✖ Found only one commit
             This typically means you have ran into one of the following scenarios:
             - You've checked out a shallow copy of the Git repository, which actions/checkout@v2 does by default.
               In order for Chromatic to correctly determine baseline commits, we need access to the full Git history graph.
               With actions/checkout@v2, you can enable this by setting 'fetch-depth: 0'.
               ℹ Read more at https://www.chromatic.com/docs/github-actions
             - You've only made a single commit so far. 
               Please make at least one additional commit in order for Chromatic to be able to detect what's changed.

ただこちらに関してはエラーメッセージに解決方法が乗ってました。
何が起こっているかというと、

  • actions/checkoutはデフォルトでは最新の1 commitのみしか取得しないような挙動になっており、これがエラーに書いてあるshallow copyの指す内容になります
  • Chromaticは過去と現在のコードを比較して差分を検知する必要があるため、上記のようなshallow copyではなくコミット履歴全体にアクセスを必要とします

以上の理由からactions/checkoutのパラメータにfetch-depth: 0(全てのコミット履歴を取得する設定)を追加してあげる必要があります。
以下完成版のworkflowです。

chromatic.yaml
jobs:
  chromatic:
    name: "Chromatic"
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    steps:
      - name: "Checkout Code"
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: "Setup bun"
        uses: oven-sh/setup-bun@v2
      - name: "Install Dependencies"
        run: bun install
      - name: "Run Chromatic"
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          workingDir: frontend

上記のworkflowを実行したところ今度はエラーなく無事に実行することができました！🎉

Discussion