[ci/cd] storybook github actions를 활용해 s3 배포하기

서문

디자인과 거리가 먼 삶을 살다가 프론트엔드 개발자가 된 것에도 스스로 놀라울 때가 있습니다. 더군다나 이전 회사에 이어 현재 회사까지 디자인 시스템을 개발하게 될 줄도 몰랐습니다. 7-8개월째 하다보니 디자인시스템을 구축한 경험에 관해 정리해봐도 괜찮겠다 싶습니다. 오늘 다룰 주제는 제목 그대로 github actions를 활용해 storybook s3에 배포하기 입니다.

목차

1. storybook build and deploy to s3
2. ci/cd with github actions

storybook build and deploy to s3

스토리북은 build 된 파일을 생성하는 간편한 cmd를 제공합니다.

scripts: {
	"build-storybook": "storybook build",
}

이 때 build에 포함되는 파일은 storybook init시 생성된 .storybook/main.ts config에서 정의할 수 있습니다. 저같은 경우는 storybook 에서 제공하는 default 값을 사용하지만 component와 동일한 폴더에 stories 파일을 정의하는 경우도 많습니다. 그 땐 stories 설정에 폴더경로를 추가하거나 수정해서 사용하면 됩니다.

const config: StorybookConfig = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  // 생략...
}

해당 명령어를 실행하면 storybook-static 폴더가 생성되고, 이를 s3에 배포하면 우선 수동 설정은 완료가 됩니다.

빌드 파일을 정적으로 배포하는 방법으로 storybook 공식 홈페이지는 chromatic을 활용하는 방법을 예시로 듭니다. publish storybook 참고

그러나 s3를 활용하는 편이 여타 서비스와 함께 관리가 용이할 것 같아 s3 배포를 쉽게 만들어주는 라이브러리를 설치합니다.

npm i -D @storybook/storybook-deployer

storybook-deployer 는 github-pages 또는 s3 배포 옵션을 제공하는데, chromatic 을 쓰지 않는 이유와 마찬가지로 s3 배포를 선택합니다.

scripts: {
  "deploy-storybook": "storybook-to-aws-s3 --bucket-path=your.storybook.page"
}

storybook-deployer의 storybook-to-aws-s3 파일을 실행해 미리 만들어둔 s3 bucket에 build folder 를 배포합니다. 저같은 경우는 storybook url과 bucket 이름을 맞춰 나중에 올 수도 있는 혼선을 최소화하고자 했습니다. 이러고 나면 your.storybook.page에서(bucket이름과 url이 동일하다면) 정적으로 배포된 storybook 페이지를 확인할 수 있습니다.

ci/cd with github actions

storybook 배포는 보통 사내 Ui library에서 관리되는 경우가 많고, ui library 업데이트와 함께 배포되는 경우가 많습니다. 이를 위해 company-ui 의 storybook branch가 push 되면 자동으로 배포가 이루어지도록 ci/cd 설정을 할 수 있습니다. 이를 위해 .github/workflow 폴더에 storybookpushed.yml 파일을 생성합니다.

name: StorybookPushed

on:
  push:
    branches: ['storybook']

jobs:
  publish:
	  # ...생략...

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-region: ap-northeast-2
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

      - run: npm ci
      - run: npm run semantic-release
		# ...생략...

      - run: npm run build-storybook
      - run: npm run deploy-storybook

차례로 보겠습니다. 우선 aws 인증을 합니다. 이 때 AWS_ACCESS_KEY_ID와 AWS_SECRET_ACCESS_KEY는 github token에 저장되어 있어야 합니다. 그 후 npm run semantic-release를 통해 storybook 버전 변경이 patch, minor, major 여부를 결정합니다. 그 후 위에서 언급한 build, deploy과정을 실행합니다.

이 때 주의할 점은 deploy-storybook command 입니다. 위에서 수동으로 진행할 때는 package.json 의 deploy-storybook 값이 storybook-to-aws-s3 --bucket-path=your.storybook.page 까지만 있어도 동작 했습니다. 그러나 aws credentials를 통해 인증을 거친 후 s3에 배포할 때 aws 프로필 설정을 default로, 즉 credentials에 설정한 값으로 사용하겠다고 명시적으로 언급하지 않으면 profile이 설정되지 않았다는 에러를 반환합니다. 이를 위해 다음과 같이 script를 수정해줍니다.

scripts: {
  "deploy-storybook": "storybook-to-aws-s3 --bucket-path=your.storybook.page --aws-profile=NONE"
}

이제 내부 ui library의 스토리북 branch가 업데이트 될 때 마다 배포까지 자동으로 이루어지도록 설정이 완료되었습니다. 간단하지만 설정해놓지 않으면 버전관리와 최신 디자인시스템 관리를 번번히 놓치는 경우를 겪게 되더군요. 긴 글 읽어주셔서 감사합니다.