스토리북 정적 배포 시, js 파일을 찾지 못하는 현상

History

• 아래의 상황에서 ui package의 정적 배포가 필요하다.
• chromatic 사용할 수 없음
• github action 사용할 수 없음

• gh-pages를 이용해서 배포를 하기로 한 상황
• 참고한 레퍼런스

Issue

• 배포를 하였으나, 위의 사진처럼 오류가 발생한다. (파일 서빙이 제대로 안되었다.)

• 저번에도 해결을 하지 못했던 문제를 결국 레퍼런스를 찾아서 해결했다!!!ㅠㅠ
• 원인
• github pages는 기본적으로 JeKyll을 사용하여 사이트를 빌드한다.
• JeKyll은 _로 시작하는 파일과 디렉터리를 무시한다.
• 스토리북은 _로 시작하는 파일들을 사용하기 때문에 Jekyll이 이 파일들을 무시함으로써 스토리북이 제대로 동작하지 않았다.
• 해결 방안
• 정적 배포를 하는 디렉토리 혹은 브랜치에 .nojekyll 파일 생성
⇒ github pages에게 Jekyll을 사용하지 않도록 지시한다.
• github pages는 모든 파일과 디렉토리를 그대로 서빙하게 되어 _로 시작하는 파일들도 정상적으로 처리하게 되었다.
• 최종 package.json

"scripts": {
    "storybook": "storybook dev -p 6006",
    "build:storybook": "storybook build",
    "predeploy:storybook": "npm run build:storybook && touch ./storybook-static/.nojekyll",
    "deploy:storybook": "gh-pages -d storybook-static -t"
  },

• pre prefix를 이용해서 배포 전 명령어를 실행시키고 서빙될 폴더에 .nojekyll 파일을 추가하는 스크립트를 작성하여 해결!
• -t는 dotfiles를 포함하여 배포하도록 지시하는 역할을 한다.
• 기본적으로 gh-pages는 dotfiles (예: .gitignore, .nojekyll 등)를 무시하고 배포하지 않는다. -t 옵션을 사용하면 이러한 파일들도 함께 배포된다.

Reference