github는 기본적으로 정적 페이지를 배포할 수 있다.

github repository에서 setting → pages에 들어가서 브랜치를 설정하면 해당 브랜치의 파일을 기반으로 사이트가 배포된다. github pages를 통해 배포할 때는 보통 gh-pages 브랜치에 배포하기 때문에 나도 gh-pages브랜치에 배포하도록 시도하였다.

name: Deploy Storybook and Docs

on:
  pull_request:
    branches: [develop]

jobs:
  deploy-docs:
    runs-on: ubuntu-latest
    name: Deploy Storybook and TypeDocs

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

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

      - name: Install pnpm
        run: npm install -g pnpm

      - name: Install dependencies
        run: pnpm install --no-frozen-lockfile

      - name: Build Storybook
        working-directory: apps/frontend
        run: pnpm run build-storybook

      - name: Build docs
        run: pnpm run docs

      - name: Move docs, storybook, and Jekyll config to output folder
        run: |
          mkdir -p ./static
          mv docs ./static/docs
          mv apps/frontend/storybook-static ./static/storybook

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./static

여기서 build해서 생성된 storybook-static 폴더와 docs 폴더를 ./static 파일로 옮겨주고 ./static 파일을 기본 배포 경로로 설정하여 github action을 통해 배포 하였다.

만약 github action을 통해 다른 브렌치에 배포하고 싶은 경우에는 peaceiris/actions-gh-pages@v3 에서publish_branch: main 를 추가하면 된다.

Pnpm install 오류

github action을 이용하여 pnpm install 명령어로 package.json 파일에 명시된 의존성을 설치하던 중 오류가 발생하였다.

이유를 찾아보니 pnpm-lock.yaml 파일의 의존성 버전이 package.json과 일치하지 않을 때 발생하는 문제였다.

• pnpm install : pnpm-lock.yaml 파일과 package.json의 버전이 다를 때 오류가 날 수 있음.

오류를 해결하기 위해 찾아보니 --frozen-lockfile 에 관한 옵션이 있었다.

• --no-frozen-lockfile 옵션을 사용하면 pnpm 이 pnpm-lock.yaml 파일을 고정하지 않고, package.json에 따라 필요한 의존성을 새로 설치하면서 pnpm-lock.yaml 파일을 업데이트 한다.

만약 특정 버전으로 패키지를 고정하려면, package.json의 각 의존성 버전을 명확하게 지정하면 된다.

→ pnpm-lock 버전 말고 package.json에 명시한 버전을 설치한다.

• --frozen-lockfile 은 pnpm-lock.yaml 파일이 이미 존재하고**, package.json과** 완전히 일치할 때만 설치를 진행합니다. 만약 package.json과 pnpm-lock.yaml 의 의존성 버전이 조금이라도 다르다면 설치를 멈추고 오류를 발생시킵니다.

예를 들어현재 package.json 파일의 tyscript 버전이 "typescript": "^5.x.x" 이렇게 명시되어 있지만

      typescript:
        specifier: ^5.x.x // package.json에 명시되어 있는 버전
        version: 5.6.3    // 설치된 구체적인 버전

pnpm-lock.yml 파일에서는 version: 5.6.3 으로 되어 있어 오류가 난다.