스토리북 chromatic action error

1. 현상

 

스토리북 크로마틱 ci cd 를 사용하려고 문서를 보고 따라했는데 깃 액션에서 에러가 발생했다.

 

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/

Storybook Tutorials

 

에러 내용

non-zero exit code

액션에서 정의해놓은 에러이외로 예기치않게 프로세스가 종료됬다는 의미이다.

 

2. 원인

자세히보면 Run yarn 이 보인다. 빌드를 하기 위해 yarn 패키지를 설치하는건데

이미 프로덕트에는 pnpm 을 사용하고있고 액션에서 yarn 을 패키지 매니저로 사용한다고해도 yarn.lcok 파일이 없기 때문에 에러가 날수 밖에 없다. npm 을 사용한다하더라도 마찬가지로 package.lock.json 이 없으니 똑같이 에러가 날 것이다.

 

3. 시도

 

pnpm install 하여 pnpm 을 패키지 매니저로 사용하게끔 설치해주었다.

그러나 보기와 같이 pnpm command not found 에러를 냈는데

pnpm 이 없다는 이야기이다.

 

pnpm install 로 설치할게요 -> pnpm 명령어가 없는데..??

pnpm 자체가 설치가 안되서 pnpm cli 을 사용못한다는 뜻,

 

4. 해결

해결 방법은 pnpm 을 설치해주면 된다.

https://github.com/pnpm/action-setup/tree/v3/

GitHub - pnpm/action-setup: Install pnpm package manager

pnpm 을 설치해주는 action 이 있다.

 

문서대로 그냥 pnpm 을 사용해도 되지만 마지막 단락에 캐시사용하는 코드에서 노드는 사용하지 않으므로 제거하고 사용했다.

on:
  - push
  - pull_request

jobs:
  cache-and-install:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - uses: pnpm/action-setup@v3
        name: Install pnpm
        with:
          version: 8
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - uses: actions/cache@v3
        name: Setup pnpm cache
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install

캐시사용하는 액션 with 부분을 보면 대충 pnpm lcok 파일을 변경을 감지해서 캐시사용 유무를 정하는듯하다.

 

 

5. 전체코드

# Workflow name
name: "Chromatic Deployment"

# Event for the workflow
on: push

# List of jobs
jobs:
  chromatic:
    # Operating System
    runs-on: ubuntu-latest
    # Job steps
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - uses: pnpm/action-setup@v3
        name: Install pnpm
        with:
          version: 8
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - uses: actions/cache@v3
        name: Setup pnpm cache
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install Dependencies
        run: pnpm install

      - name: Publish to Chromatic
        uses: chromaui/action@latest
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          zip: true