해당 게시글은 vite v4, typescript v5, react v18, storybook v8, pnpm v8 환경에서 작성되었습니다.

Storybook & NPM 배포 자동화

YDS는 github action을 활용하여 storybook을 버전 별로 aws s3에 배포하며, 패키지를 npm에 배포하고 있다.

1. S3 버킷 생성 및 설정 - 생략
2. Bucket Versioning 설정

Storybook을 버전 별로 배포하기 위해 먼저 AWS S3 버킷 버전 관리를 활성화한다.

YDS는 {주소}/v0.1.0/* 형태로 Storybook을 배포하고 있다!

버전 정보는 deploy 전 package.json에서 가져오며, deploy 시 가져온 버전 정보를 넣어주도록 yml script를 작성하였다.

- name: Extract version from package.json
  id: version
  run: echo ::set-output name=VERSION::$(node -p "require('./package.json').version")

- name: Deploy to s3
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  run: |
    aws s3 cp \
      --recursive \
      --region ap-northeast-2 \
      ./storybook-static \
      s3://yds-react-storybook/${{ steps.version.outputs.VERSION }}

3. Repository secrets 등록

4. .npmrc 설정

로컬에서 npm publish를 진행할 때는 로그인이 되어있는 상태였기 때문에 문제가 발생하지 않았지만, github action에서는 로그인 NPM_TOKEN을 넣어주지 않을 시 인증 에러가 발생하였다.

따라서 root 경로에 .npmrc 파일을 생성하고, yml에서 사용하는 NPM_TOKEN을 넣어주었다.

//registry.npmjs.org/:_authToken=${NPM_TOKEN}

yarn to pnpm in github workflow

YDS는 원래 yarn을 사용하고 있었지만 최근 pnpm으로 마이그레이션을 진행하였고, 이에 따라 workflows 명령어도 변경이 필요했다.

# 변경 전 yarn 명령어를 사용하던 steps 부분
- name: Install dependencies
  run: yarn install --immutable --immutable-cache --check-cache

- name: Build storybook
  run: yarn build-storybook --output-dir=storybook-static

해당 부분을 변경하지 않는다면 Install dependencies에서 에러가 발생하며, 변경 시 yarn과 달리 (pnpm의 경우) set up 및 version을 명시해주어야 한다.

Set Up을 하지 않았을 경우

PackageManager, Version 명시를 하지 않았을 경우

# 전체 코드 (packageManager: pnpm)
name: build and deploy storybook to s3, publish to npm

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code
        uses: actions/checkout@v3

      - name: Set up pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20

      # 이전 yml script와 달리 cache 설정을 따로 하지 않았다.
      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm build

      - name: Build storybook
        run: pnpm build-storybook --output-dir=storybook-static

      - name: Extract version from package.json
        id: version
        run: echo ::set-output name=VERSION::$(node -p "require('./package.json').version")

      - name: Deploy to s3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            ./storybook-static \
            s3://yds-react-storybook/${{ steps.version.outputs.VERSION }}

      - name: Publish to NPM
        run: npm publish
        env:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

yml 작동 과정을 간략하게 요약해보자면, main branch로 push가 되면, jobs의 steps 순서대로 실행된다.

• 먼저 source code를 checkout한 후, pnpm v8을 setup 하고, node.js v20을 setup 한다.
• 그 후, pnpm install을 실행하여 dependencies를 설치하고, build, build-storybook 명령어를 차례대로 실행한다.
• package.json에서 버전 정보를 추출한 후 s3 버킷에 배포 시 해당 버전 정보를 함께 넣어준다.
• 마지막으로 npm publish를 실행하여 패키지를 배포한다.

Storybook 문서 url이 현재 버전 정보를 포함하고, NPM 패키지도 정상 배포 되었다면 성공이다!

개발자에게 효율은 생명 ¡¡¡( •̀ ᴗ •́ )و!!!

Reference

• https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow#create-and-check-in-a-project-specific-npmrc-file

This post was written in an environment with vite v4, typescript v5, react v18, storybook v8, and pnpm v8.

Automating Storybook & NPM Deployment

YDS uses GitHub Actions to deploy Storybook by version to AWS S3, and to publish the package to npm.

1. Create and configure the S3 bucket — (omitted)

2. Configure Bucket Versioning

To deploy Storybook by version, start by enabling AWS S3 bucket versioning.

YDS deploys Storybook at paths following the pattern {url}/v0.1.0/*.

The version is extracted from package.json before deployment, and injected into the deployment path via the yml script.

- name: Extract version from package.json
  id: version
  run: echo ::set-output name=VERSION::$(node -p "require('./package.json').version")

- name: Deploy to s3
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  run: |
    aws s3 cp \
      --recursive \
      --region ap-northeast-2 \
      ./storybook-static \
      s3://yds-react-storybook/${{ steps.version.outputs.VERSION }}

3. Register Repository Secrets

4. Configure .npmrc

Publishing locally worked fine because I was already logged in, but running GitHub Actions without providing an NPM_TOKEN resulted in an authentication error.

To fix this, create an .npmrc file at the root of the project and inject the NPM_TOKEN used in the yml workflow.

//registry.npmjs.org/:_authToken=${NPM_TOKEN}

Migrating from yarn to pnpm in the GitHub Workflow

YDS was originally using yarn but was recently migrated to pnpm, which required updating the workflow commands accordingly.

# Steps that previously used yarn commands
- name: Install dependencies
  run: yarn install --immutable --immutable-cache --check-cache

- name: Build storybook
  run: yarn build-storybook --output-dir=storybook-static

Without updating these steps, errors will occur during the Install dependencies step. Unlike yarn, pnpm requires explicit setup and version specification.

Without the Set Up step

Without specifying PackageManager and Version

# Full workflow (packageManager: pnpm)
name: build and deploy storybook to s3, publish to npm

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code
        uses: actions/checkout@v3

      - name: Set up pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20

      # Unlike the previous yml script, cache is not configured separately.
      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm build

      - name: Build storybook
        run: pnpm build-storybook --output-dir=storybook-static

      - name: Extract version from package.json
        id: version
        run: echo ::set-output name=VERSION::$(node -p "require('./package.json').version")

      - name: Deploy to s3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 cp \
            --recursive \
            --region ap-northeast-2 \
            ./storybook-static \
            s3://yds-react-storybook/${{ steps.version.outputs.VERSION }}

      - name: Publish to NPM
        run: npm publish
        env:
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

To briefly summarize the workflow: when a push is made to the main branch, the steps in the job execute in order.

First, the source code is checked out, then pnpm v8 and Node.js v20 are set up. After that, pnpm install installs the dependencies, followed by build and build-storybook commands running sequentially. The version is then extracted from package.json and injected into the S3 deploy path. Finally, npm publish deploys the package.

If the Storybook URL includes the current version and the NPM package is published successfully, the workflow is complete!

Efficiency is a developer’s lifeblood. ¡¡¡( •̀ ᴗ •́ )و!!!

Reference

• https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow#create-and-check-in-a-project-specific-npmrc-file