Chromatic CI 파이프라인 구축 #25

minzzang144 · 2024-05-18T07:20:41Z

Description

스토리북 v7 -> v8 업그레이드, 새로운 빌드 구조에서 크로마틱을 CI 도입하기 위해 v8 업그레이드가 되면 좋을 것 같아 업그레이드 하였습니다.(무엇이 업데이트 되었는가? -> 참고)
스토리북 번들러 webpack -> vite 변경
바벨 제거(vite로 변경되면서 esbuild로 대체해도 문제 없어 보입니다..! 사이드 이펙트 예상되면 알려주세요!)
- 다시 vite에서 webpack으로 수정, babel 대신 swc 사용
Chromatic CI 구축 완료
- master, develop, feature/** 브랜치에서 push, pull request 액션이 일어날 경우 CI 동작

Checklist

I have performed a self-review of my code
If it is a core feature, I have added thorough tests.

- storybook v7 -> v8 - @storybook/testing-library -> @storybook/test - .storybook/main.ts findStories 함수 수정 - .storybook/preview.ts preview.parameters.argTypesRegex 수정

- storybook 버전 v8.0.9 -> v8.1.1 - @chromatic-com/storybook 패키지 이동(apps/docs) - @storybook/addon-webpack5-compiler-swc 패키지 제거 - 번들러 webpack -> vite 변경

- storybook에서는 vite esbuild로 대체 가능, 컴포넌트 빌드를 하지 않아 사용 x

- emotion issue

- @types/react 버전이 root 버전과 충돌하고 있어 제거

minzzang144 · 2024-05-18T07:23:35Z

apps/docs/.storybook/preview.tsx

@@ -45,7 +45,6 @@ function CustomDjProvider(props: PropsWithChildren) {

 const preview: Preview = {
  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },


v7 -> v8 업그레이드 하면서 deprecated 될 옵션

minzzang144 · 2024-05-18T07:24:50Z

packages/components/package.json

@@ -20,7 +20,6 @@
    "@emotion/react": ">=11"
  },
  "devDependencies": {
-    "@types/react": "^18.2.7",


root에 존재하는 @types/react 버전과 충돌하여 build 시 타입에러 발생하여 제거하였습니다~ 참고 부탁드려요!

packages/components/src/hooks/useTheme.ts

…atic

Danji-ya · 2024-05-19T02:25:02Z

apps/docs/.storybook/main.ts

+  async viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [viteTsconfigPaths()], // 자체적으로 루트에 있는 tsconfig.json을 참조
+    });


storybook 앱에서 가장 가까운 tsconfig를 참조하는게 아닌 루트를 바라본다고 이해해도 괜찮을까요?
지금은 루트의 tsconfig랑 큰차이가 없어서 문제 없지만 나중에 스토리북에서만 확장한다면 수정이 필요할 것 같아요!

좋은 의견입니다! vite-tsconfig-paths를 살펴보시면 root 옵션이 있는 것 같아요~ 이걸로 설정을 변경 가능할 것 같습니다:) 참고 부탁드려요!!

Danji-ya · 2024-05-19T02:25:17Z

apps/docs/.storybook/main.ts

  framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/react-vite'),


vite 환영이죠 ㅎㅎㅎ 굿굿

게다가 더 빠르게 빌드까지!

ㅋ.ㅋ ab180에서도 rollup에서 vite로 넘어가서 90% 가까운 빌드 시간을 줄였다고 하더군요

Danji-ya · 2024-05-19T02:30:06Z

packages/components/package.json

@@ -20,8 +20,6 @@
    "react-dom": ">=18"
  },
  "devDependencies": {
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.22",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },


타입 관련 라이브러리들을 삭제하신 이유가 있을까요?
개발환경에서는 필요하다고 명시해주면 좋을 것 같아요.

아 이랑! 요거는 제가 위에 작성해두긴 했는데 다시 상황을 드리자면 아래와 같아요!

storybook v7 -> v8 버전 업그레이드 한 환경

어째선지 yarn run multitask 실행하면 @danji/components#build 작업을 실패(빌드 실패)

상황을 확인해보니 DjProvider에서 타입에러가 발생하고 있었음

yarn list @types/react 명령어로 확인해보니 root에 존재하는 @types/react와 @danji/components에 존재하는 @types/react 버전이 두개 존재했고 이유는 확실하진 않으나 버전 충돌로 타입 에러가 발생한 듯 보임(루트 단에 존재했던 @types/react의 버전 -> @types/react@18.3.2)

@danji/components에 존재하는 @types/react를 제거하고 문제 해결한 상황입니다.

좋은 해결방법이 있을까요? 루트단에 왜인지 모르겠으나 타입이 설치가 되는 상황이라 @danji/components에 없어야 빌드가 서옹하는 상황입니다.

Danji-ya · 2024-05-19T02:30:40Z

이야... 배포까지 된건가요!!?
슬쩍 물어보러 가겠습니다 : )

minzzang144 · 2024-05-19T04:32:56Z

@Danji-ya 오잉? 저는 설정한 적이 없는데 크로마틱도 CI 단계에서 적용이 되었군요;; 이유를 찾아볼게요.

minzzang144 · 2024-05-19T09:29:53Z

@Danji-ya 많은 고민 끝에 vite에서 webpack으로 전환하려 합니다.. ㅠㅠ
문제가 무엇이었느냐? -> storybook vite 번들링 사용시 storybook v8 주요 기능인 chromatic 애드온을 사용할 수 없음..!
이 기능을 사용하기 위해서 v8로 업그레이드했다고 해도 과언이 아닌데 이걸 사용할 수 없다면 의미가 없군요..;
이미 storybook 측에서도 충분히 이슈라이즈 된 상황이었고 아직 해결 방법이 없는 듯 합니다.(베타 버전도 아닌데 이런 이슈가 있을줄은..; 현업에서 최신 버전 도입을 꺼려하는 이유를 알 것 같군요 ㅋㅋ)
제가 그래서 따로 webpack 버전으로 storybook 레포를 새로파서 진행해봤는데 webpack으로 했을 때는 아주 잘 되는군요.
일단은 webpack으로 돌리고 나중에 해결이 되었을 때 다시 vite 마이그레이션 진행해보겠습니다..!

- 타입 명시

- storybook8 기능을 vite로 빌드할 경우 사용할 수 없음

- dotenv-cli 명령어로 config 관리 - chromatic.config.json 파일로 chromatic cli 관리 - .env gitignore 처리

minzzang144 · 2024-05-25T07:37:09Z

apps/docs/.storybook/main.ts

    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
+    '@storybook/addon-links',
+    '@storybook/addon-webpack5-compiler-swc',


vite -> webpack 변경하면서 babel -> swc 교체해봤습니다!

minzzang144 · 2024-05-25T07:41:35Z

apps/docs/package.json

-    "build": "storybook build --docs",
+    "storybook": "storybook dev -p 6006",
+    "build": "storybook build",
+    "build-storybook": "storybook build",


Q: build 스크립트가 있는데 왜 build-storybook 스크립트가 또 있을까?
A: chromatic cli는 기본적으로 build-storybook 이라는 명령어를 찾아 storybook을 빌드할 수 있도록 합니다. chromatic cli에서 제공하는 옵션 중 --build-script-name이 존재하지만 chormatic에서는 이 옵션을 제대로 읽지 못하는 에러가 있습니다.
Q: build 대신 build-storybook를 사용하면 안될까?
A: yarn run multitask를 사용할 수 없게됩니다.

조금 더 찾아봐야할 것 같아요,
지금 당장 생각나는 방식은

"build": yarn run build-storybook ..?

minzzang144 · 2024-05-25T07:42:21Z

apps/docs/package.json

    "preview": "serve storybook-static",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf storybook-static"
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf storybook-static",
+    "chromatic": "dotenv -e apps/docs/.env chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"


해당 명령어를 사용하기 위해서는 .env 파일에 CHROMATIC_PROJECT_TOKEN 값이 필요합니다.
추후 따로 공유 예정

minzzang144 · 2024-05-25T08:32:09Z

.github/workflows/chromatic.yml

+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}-chromatic
+  cancel-in-progress: true


동시성 그룹을 설정할 수 있는 건 처음 알았네요! 이렇게 되면 pull request, push가 동시에 일어난다해도 하나만 작동해서 두번 chromatic에 게시될 일은 없게 됩니다:)

minzzang144 · 2024-05-25T08:32:36Z

.github/workflows/chromatic.yml

+        # ⚠️ Pick one of these, matching the package manager for your project
+        # run: npm ci
+        # run: pnpm install
+        run: yarn install --immutable --immutable-cache --check-cache


추후에 패키지 매니저를 pnpm으로 변경할 경우 변경 필요

minzzang144 · 2024-05-25T08:41:40Z

.github/workflows/chromatic.yml

+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: apps/docs
+          onlyChanged: true # 👈 Required option to enable TurboSnap / 터보스냅이 필요할지는 테스트 여부에 따라 상이할 예정
+          exitZeroOnChanges: true # 👈 Option to prevent the workflow from failing
+          autoAcceptChanges: 'master' # 👈 Option to accept all changes on master
+          # ignoreLastBuildOnBranch: 'my-branch' # 👈 Option to ignore the last build on target branch


projectToken: 크로마틱에서 발급해주는 토큰으로 인증할 때 필요. 없으면 절대 안되는 필수값

workingDir: 모노레포를 위해 디렉토리 설정 가능

onlyChanged: 크로마틱이 터보스냅을 사용해서 변경된 스토리에 한해서 스냅샷을 생성합니다. 대신 변경된 스토리 x 1.4~5배 정도 스냅샷을 더 생성한다고 하는데 어떤 것이 더 효율적인지는 계속 테스트를 해봐야 알 것 같습니다. 지금은 저와 이랑 둘만 사용하기 때문에 크게 문제되는 부분은 아닐 것 같아서 추가했습니다.

exitZeroOnChanges: 개발 환경에서 변경 사항이 있으면 빌드하지만 CI 환경에서는 시간이 꽤 소요되기 때문에 변경점이 있다면 빌드를 생략해주고 성공여부를 OK로 반환하는 옵션입니다.

autoAcceptChanges: merge/rebase 할 때 생기는 커밋에 대해 스냅샷을 생성하지 않고 자동으로 성공으로 처리

ignoreLastBuildOnBranch: 이 옵션은 혹시 사용할 일이 있을지 몰라서 주석으로 추가하였습니다.

하나하나 꼼꼼하게 설명까지 ㄷ ㄷ

minzzang144 · 2024-05-25T08:46:00Z

@Danji-ya @types/react, @types/react-dom을 @danji/components의 devDepenencies로 다시 추가하였습니다! 왜 그런지 계속 체크해봤는데 결국잘 모르겠네요.. 여튼 이제 문제 하위 패키지에 추가되어도 문제 없어보여서 다시 추가했습니다~

minzzang144 · 2024-05-25T08:47:02Z

@Danji-ya Chromatic CI 추가 완료했습니다! 세부 설정과 apps/docs -> apps/storybook 변경만 마치고 머지하면 될 것 같네요~!

Danji-ya · 2024-05-26T02:33:19Z

이번 주도 열일 하셨군요 ㅋㅋㅋ
고생 많으셨습니다!
궁금한게 있어서 월요일에 자리에 한번 찾아갈게여~ : )

minzzang144 · 2024-05-27T04:24:16Z

머지 하겠습니다:)

* fix(test): 중복적으로 테스트되는 문제 수정 * fix(storybook): 스토리북 관련 파일 위치 수정 * fix(buildSystem): lerna -> turborepo로 변경 * fix(path): 모듈 import, export 선언문 수정 * feat(template): 패키지 폴더 자동화 기능 추가 * fix(utils): 유틸함수 패키지로 분리 * fix(dependency): circular dependency 수정 * feat(graph): dependency graph 명령어 추가 * fix(path): 내부 패키지는 상대경로로 변경 * fix(build): 빌드프로세스 변경 * fix(lint): 린트 프로세스 변경 * docs(husky): husky 및 lint-staged 도입 * fix(lint): 규칙 수정 * fix: turbo dependency 수정 * fix: lint-staged 프로세스 수정 * feat: commit-msg rule 추가 * feat: lint ignore 추가 * fix: package 진입 방식 수정 * fix: storybook 컴포넌트 수정 * fix: 증분 빌드를 위해 turbo.json 수정 - test pipeline dependsOn 제거 * fix: apps/docs 패키지 스크립트 수정 - .turbo, storybook-static 디렉토리 제거 * fix: apps/docs 패키지 스크립트 수정 - 오타 수정 * feat: custom forwardRef 추가 * fix: components 패키지 emotion 의존성 분리 * fix: storybook production docs안보이는 이슈 수정 * fix: package dependency graph 수정 * fix: package 역할 재조정 * fix: types/react 버전 수정 * feat: styled 테스트코드 추가 * fix: css type-only export로 변경 * fix: 누락된 dependecies 추가 * feat: 스타일 우선순위를 높일 수 있는 기능 추가 * fix: typography 1 depth로 변경 * fix: css 변형하지 않은 예외케이스 추가 * feat: system prop 목록 추가 * fix: spinner lg size 넓이,높이 수정 * feat: conditional wrapper 컴포넌트 추가 * refactor: button 컴포넌트 system prop활용하도록 변경 * fix: spinner currentColor가 적용안되는 이슈 수정 * fix: nested styles 값이 덮어씌워지는 이슈 수정 * feat: shouldForwardProp 기능 추가 * feat: utility system prop 추가 * refactor: spinner 컴포넌트 system prop 활용하도록 변경 * refactor: cssVar 토큰 상수 활용하도록 수정 * Chromatic CI 파이프라인 구축 (#25) * feat: storybook 버전 업그레이드 - storybook v7 -> v8 - @storybook/testing-library -> @storybook/test - .storybook/main.ts findStories 함수 수정 - .storybook/preview.ts preview.parameters.argTypesRegex 수정 * feat: storybook 버전 업그레이드 재조정 - storybook 버전 v8.0.9 -> v8.1.1 - @chromatic-com/storybook 패키지 이동(apps/docs) - @storybook/addon-webpack5-compiler-swc 패키지 제거 - 번들러 webpack -> vite 변경 * fix: 바벨 제거 - storybook에서는 vite esbuild로 대체 가능, 컴포넌트 빌드를 하지 않아 사용 x * feat: vite.config.ts 추가 * feat: storybook webpack -> vite 변경 * fix: 타입 오류로 인한 빌드 실패 해결 - emotion issue * fix: 버전 충돌로 인한 빌드 실패 해결 - @types/react 버전이 root 버전과 충돌하고 있어 제거 * feat: @types/react, @types/react-dom 패키지 추가 - 타입 명시 * feat: dovenv-cli 패키지 추가 * feat: storybook vite -> webpack 변경 - storybook8 기능을 vite로 빌드할 경우 사용할 수 없음 * feat: chromatic script & config 설정 - dotenv-cli 명령어로 config 관리 - chromatic.config.json 파일로 chromatic cli 관리 - .env gitignore 처리 * feat: vite.config.ts 제거 * feat: github workflow chromatic.yml 추가 * feat: github workflow deploy.yml 추가 --------- Co-authored-by: minzzang144 <shigatsu970704@gmail.com> Co-authored-by: Minchan Lee <minzzang144@gmail.com>

minzzang144 added 7 commits May 6, 2024 10:40

feat: storybook 버전 업그레이드

a059401

- storybook v7 -> v8 - @storybook/testing-library -> @storybook/test - .storybook/main.ts findStories 함수 수정 - .storybook/preview.ts preview.parameters.argTypesRegex 수정

feat: storybook 버전 업그레이드 재조정

db02c41

- storybook 버전 v8.0.9 -> v8.1.1 - @chromatic-com/storybook 패키지 이동(apps/docs) - @storybook/addon-webpack5-compiler-swc 패키지 제거 - 번들러 webpack -> vite 변경

fix: 바벨 제거

de5ac86

- storybook에서는 vite esbuild로 대체 가능, 컴포넌트 빌드를 하지 않아 사용 x

feat: vite.config.ts 추가

5214b6e

feat: storybook webpack -> vite 변경

c3bf4ed

fix: 타입 오류로 인한 빌드 실패 해결

feb46d0

- emotion issue

fix: 버전 충돌로 인한 빌드 실패 해결

199d456

- @types/react 버전이 root 버전과 충돌하고 있어 제거

minzzang144 added the enhancement New feature or request label May 18, 2024

minzzang144 requested a review from Danji-ya May 18, 2024 07:20

minzzang144 self-assigned this May 18, 2024

minzzang144 commented May 18, 2024

View reviewed changes

packages/components/src/hooks/useTheme.ts Outdated Show resolved Hide resolved

refactor: Merge branch 'feature/workflow' into feature/workflow-chrom…

bce3101

…atic

Danji-ya reviewed May 19, 2024

View reviewed changes

minzzang144 added 4 commits May 25, 2024 16:27

feat: @types/react, @types/react-dom 패키지 추가

dc96260

- 타입 명시

feat: dovenv-cli 패키지 추가

ca0e2b0

feat: storybook vite -> webpack 변경

1d1bf89

- storybook8 기능을 vite로 빌드할 경우 사용할 수 없음

feat: chromatic script & config 설정

3acb6b2

- dotenv-cli 명령어로 config 관리 - chromatic.config.json 파일로 chromatic cli 관리 - .env gitignore 처리

minzzang144 commented May 25, 2024

View reviewed changes

minzzang144 added 3 commits May 25, 2024 16:42

feat: vite.config.ts 제거

0bcae6a

feat: github workflow chromatic.yml 추가

dbb965d

feat: github workflow deploy.yml 추가

64628ef

minzzang144 commented May 25, 2024

View reviewed changes

minzzang144 changed the title ~~Storybook v7 -> v8 업그레이드~~ Chomacic CI 파이프라인 구축 May 25, 2024

minzzang144 changed the title ~~Chomacic CI 파이프라인 구축~~ Chromatic CI 파이프라인 구축 May 26, 2024

minzzang144 merged commit 7c730b1 into feature/workflow May 27, 2024
5 of 6 checks passed

minzzang144 mentioned this pull request May 31, 2024

Chromatic CI 파이프라인 구축(revert) #29

Merged

2 tasks

minzzang144 deleted the feature/workflow-chromatic branch August 31, 2024 20:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chromatic CI 파이프라인 구축 #25

Chromatic CI 파이프라인 구축 #25

minzzang144 commented May 18, 2024 •

edited

Loading

minzzang144 May 18, 2024

minzzang144 May 18, 2024

Danji-ya May 19, 2024

minzzang144 May 19, 2024

Danji-ya May 19, 2024

Danji-ya May 19, 2024

minzzang144 May 19, 2024

Danji-ya May 19, 2024

minzzang144 May 19, 2024

Danji-ya commented May 19, 2024

minzzang144 commented May 19, 2024

minzzang144 commented May 19, 2024

minzzang144 May 25, 2024

minzzang144 May 25, 2024

Danji-ya May 26, 2024

minzzang144 May 25, 2024

minzzang144 May 25, 2024

minzzang144 May 25, 2024

minzzang144 May 25, 2024 •

edited

Loading

Danji-ya May 26, 2024

minzzang144 commented May 25, 2024

minzzang144 commented May 25, 2024

Danji-ya commented May 26, 2024

minzzang144 commented May 27, 2024

Chromatic CI 파이프라인 구축 #25

Chromatic CI 파이프라인 구축 #25

Conversation

minzzang144 commented May 18, 2024 • edited Loading

Description

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Danji-ya commented May 19, 2024

minzzang144 commented May 19, 2024

minzzang144 commented May 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minzzang144 May 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minzzang144 commented May 25, 2024

minzzang144 commented May 25, 2024

Danji-ya commented May 26, 2024

minzzang144 commented May 27, 2024

minzzang144 commented May 18, 2024 •

edited

Loading

minzzang144 May 25, 2024 •

edited

Loading