Chromatic의 미리 보기 링크에 대한 PR 자동 설명

Storybook을 사용하여 구성 요소를 관리하는 사람은 Chromatic도 함께 사용할 것이라고 생각합니다.
다음 기사에는 기릿허브 액션스를 사용해 크롬픽 디자인을 하는 방법이 기재돼 있어 활용되는 이들이 많다.
https://www.chromatic.com/docs/github-actions
하지만 지아이허브를 중심으로 활동하는 자신에게 검사할 때마다 크롬패틱에 로그인해 그에 맞는 디자인을 찾는 것은 번거롭다.
나는 상응하는 프로그램에 직접 방문하고 싶다.
나는 다음과 같이 미리 보기 링크가 첨부된 평어를 만들고 싶다.

Firebase Hosting 미리 보기 링크 메모
Source: Deploy to live & preview channels via GitHub pull requests
클라우드 런이 같은 일을 해냈기 때문에 그쪽과 같은 프로세스로 구현하고 싶어요.
https://zenn.dev/matken/articles/preview-deploy-on-cloud-run

GTHub Action 업데이트

Chromatic 설정과 위 Chromatic 공식 보도의 GiitHub Actions 설정은 완료된 전제에서 진행된다.chromaui/action에 아웃풋이 준비되어 있으며 미리보기 링크가 있는 주석을 생성할 수 있습니다.
https://github.com/chromaui/action#outputs

1. id 부여

GiitHub Actions에서는 추가id를 통해 후면step에서 출력된 output을 가져올 수 있습니다.
https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsid
.github/workflows/chromatic.yml

      - name: Publish to Chromatic
        uses: chromaui/action@v1
+       id: chromatic
        # Chromatic GitHub Action options
        with:
          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

2. Chromatic URL에서 불필요한 경로 제거

상술step 이후 연결의 형식으로 보충해 주십시오.
출력Publish에 필요하지 않은 storybookUrl이 추가되어 삭제된 후 다시 output으로 출력됩니다.
.github/workflows/chromatic.yml

      - name: Remove unnecessary path for Chromatic link
        id: storybook-url
        run: echo "::set-output name=value::${STORYBOOK_URL//\/iframe.html/}"
        env:
          STORYBOOK_URL: ${{ steps.chromatic.outputs.storybookUrl }}

3. 리뷰 작성

iframe.html와 find-comment를 병용하여 기존의 주석이 없으면 새로 만들고 있으면 업데이트하는 처리를 실시한다.create-or-update-comment 아래 링크를 참조하여 제작하십시오.
상황에 따라 필요 없을 수도 있어요.
https://github.com/peter-evans/create-or-update-comment#action-inputs
또 secrets.PAT_TOKEN에 맡긴 PAT의 작성자는 직접 리뷰를 하는 사용자가 된다.
따라서 create-or-update-comment의 find-comment에 PAT에 사용된 사용자의 ID를 입력합니다.
.github/workflows/chromatic.yml

      - name: Find Comment
        uses: peter-evans/find-comment@v2
        id: fc
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: github-user-id
          body-includes: ':books: Storybook :books:'

      - name: Get datetime for now
        id: datetime
        run: echo "::set-output name=value::$(date)"
        env:
          TZ: Asia/Tokyo

      - name: Create or update comment
        uses: peter-evans/create-or-update-comment@v2
        with:
          token: ${{ secrets.PAT_TOKEN }}
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
            Visit the :books: **Storybook** :books: for this PR (updated for commit ${{ github.event.pull_request.head.sha }}):
            <${{ steps.storybook-url.outputs.value }}>
            <sub>Build URL: ${{ steps.chromatic.outputs.buildUrl }}</sub>
            <sub>(:fire: updated at ${{ steps.datetime.outputs.value }})</sub>
          edit-mode: replace

실행

잘 설정되면 다음과 같이 PR에 리뷰를 작성합니다.
PR에서 제출할 때마다 뛰지만 반복되지 않도록 리뷰가 업데이트된다.

최후

이상 설정이 완료되었습니다.
평론의 형식은 자유롭게 설정할 수 있으니 시도해 보세요.
이 기사를 참고할 수 있다면 정말 좋겠다.