모노레포에서 Storybook 통합으로 UI배포 시간 단축시키기 (6min -> 2min)

 

이전 게시글에서 UI테스트를 하기 위해 Storybook을 도입했다.

각각의 프로젝트마다 각각의 컴포넌트 테스트를 해볼 수 있어서 좋을것이라 판단했다.

하지만 문제가 있었다. 배포가 너무 많다.

3개의 배포

3개의 레포에 대해서 chromatic을 통해 storybook을 각각 배포하다보니 두가지 문제가 발생했다.

테스트하기 힘들다.

배포 완료된 링크가 3개라 일일히 들어가서 테스트해봐야한다는 단점이 있다.

 

속도가 느리다.

프로덕션 배포보다 느린 Storybook배포

위 사진처럼 순차적인 형태로 각각의 레포 storybook을 배포하다보니 2분씩, 총 7분가까이 걸리는 문제가 발생했다.

 

심지어 이 CI는 pull_request마다 돌아야하므로 더 자주, 더 많이 호출되어야한다. 또 우리 레포는 현재 4개의 프로젝트로 구성되어있고, 추후에 더 추가될 수도 있었기 때문에 이런 문제를 반드시 해결해야만 했다.

 

Storybook 통합하기

프로젝트 생성 

apps내부에 storybook을 위한 프로젝트를 vite를 기반으로해서 만들어주었다.

(참고로 우리는 turborepo를 통해 프로젝트를 생성했다.)

Stories이동시키기

그리고 각 레포에 있던 모든 stories파일을 apps/storybook/src/프로젝트 명으로 옮겨주었다.

그러면 이제부터 문제가 발생하기 시작한다.

이제 tsconfig.json이 달라졌기때문에 해당 경로를 찾을 수 없다.

상대경로로 변경시켜주었다.

이러고 Storybook 서버를 실행시켜보면

이건 마치 stories.tsx파일을 못가져오는 것 처럼 보이지만, 실제로 서버가 돌고있는 터미널을 보면

위와 같이 Stories.tsx에서 import해온 절대경로 모듈때문에 해당 모듈을 가져오지 못하여 발생한 문제라는 것을 알 수 있다.

절대 경로 문제 해결하기

이걸 도대체 어떻게 해결해야할까 고민했다. 3개의 절대경로를 각각 다르게 매칭시켜주어야했는데, 이걸 런타임에 해주려니 정말 쉬운일이 아니었다.

 

그러다가 이 질문글과 답변글을 보게 되었다.

https://github.com/storybookjs/builder-vite/discussions/411

Absolute Imports in Storybook Vite · storybookjs builder-vite · Discussion #411

 

이 글의 주요 내용은 아래 코드를 .storybook/main.ts에 집어넣으면 된다는 것이다.

...
const config: StorybookConfig = {
  ...
  viteFinal: async (config) => {
    return mergeConfig(config, {
      plugins: [tsconfigPath()],
    });
  },
};
export default config;

이 설정을 추가하고 실행하면... 마법과 같이 경로 문제가 해결된다.

해당 파일이 있는 프로젝트의 tsconfig.json의 내용을 통해 경로를 설정해주는 것으로 보인다.

 

 

이러면 잘 작동하는 것을 확인할 수 있다!

 

 

yml수정하기

이제 yml을 통해 단일배포로 변경해주자.

name: storybook-deployment

on:
  pull_request:
    branches: ['dev']

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: ✅ 코드 체크아웃
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: ⬇️ 의존성 설치
        run: npm install

      - name: 🚀 storybook 배포
        uses: chromaui/action@latest
        with:
          workingDir: apps/storybook
          projectToken: {{   }}
          token: ${{ secrets.GITHUB_TOKEN }}

 

결과

7분가량에서 2분초반대로 약 70%가량의 속도개선이 생겼다!

 

 

Next

그러나 이게 어떻게 동작하는지는 아직 정확하게는 알아보지 않았다.

다음 게시글에서 tsconfigPath라이브러리가 어떻게 동작하는지 알아보자.

다음게시글 :  https://0422.tistory.com/358

모노레포 Vite 경로의 마법사를 해부해보자 - vite-tsconfig-paths