Storybook netlify 배포 & 오류 해결하기 (MAC ,Window 둘다)

우아한 테크 코스 미션중 스토리북 배포해서 상호작용 확인하는 미션이 있었는데

아무리 해도 netlify에서 배포 오류가 뜨는 것이에요. 

결국ㅋㅋ.. 결론만 말하자면  window여서 억까당한거였답니다..

덕분에 내가 얻은것?

 

4시간동안 헛짓하기 + 크로마틱으로 배포한다고 설치하다가 yarn npm 꼬이기

(이게 뭔 소리냐면 저도 몰라요. 환경문제인지 모르고 이것저것 건들다가 yarn으로 설치했는데 이 이후로 해당 프로젝트에서는 npm으로 뭐 설치하면 오류뜨더라구요)

 

암튼 미래의 내가 또 헛수고 할까봐 글씁니당ㅅㄱ~

 

1. netlify 로 배포하기(mac, window)

netlify 는 간단하게 말해서 서버를 빌리는 거에요. localHost에서 개발하다가 나중에 git page로 배포하는게 대부분인데

git page와 같은 기능을 제공합니다. 해당 레포에 새로운 커밋이 올라오면 자동으로 반영해요 (git actions와 비슷)

 

세 가지 사전 작업이 필요함

1. github에 프로젝트를 올려야 해요

2. 지금은 스토리북을 배포할거니까 프로젝트에 스토리북이 있어야 합니다.

3. 당연하지만 netlify 가입하세요

 

~배포 준비하기~

netlify에 들어가서 로그인 합니다. 잘 찾아서 사이트 추가하는 것을 누르세요. 나는 이미 몇개 있어서 이렇게 뜨는데 

신규가입하면 좀 다르게 나왔던 것으로 기억...

-> 어쨋든 import an existing project 누르면 됩니다.

 

-> 깃헙 누르세요

 

-> 여기 나온 레포중에 스토리북 배포할 레포가 있으면 누르고 없으면 밑에 있는

Can't see your reop here? 거기있는거 눌러서 가져 오면 돼요.

그리고 해당 레포 이름 누르세요

 

Netlify  Build Command 설정하기

이제 이런 화면이 뜰텐데, 스토리북 혹은 프로젝트 빌드해줄 명령어와

빌드 후 만들어지는 static 폴더 이름을 넣어주면 끄읕!

아마 뭐 따로 건든거 없으면 이대로 해도 될겁니다. 혹시 모르니 참고로 알려드리면 저는 스토리북 7.0.x입니다.

자 그리고 Deploy site를 누르면 2~3분 뒤 사이트가 짜잔 하고 나올겁니다. 

이제 MAC 여러분은 끝났어요~~

 

하지만 우리 Windows 친구들은 아직이에요. 이러면 오류나와요

 

2. window 환경에서 스토리북 배포하기

netlify 설정은 이게 맞아요. 우리 잘못한거 없어,

아마 높은 확률로 window친구들은 Deploy해보면 이런 에러를 만날 거에요

어이없죠?ㅋㅋ 근데 또 로컬에서는 빌드가 아주 잘돼. 아 로컬에서 안되면 다른 문제에요.

그런 분은 혹시 모르니까 밑에 작성한 시도했는데 실패한 방법 읽어보세요

저도 로컬에서는 잘 돌아갔거든요. ㅋ

아무튼 우리 착한 크루가 제 문제를 해결해주려 노력해주었어요..

2-1 시도했는데 실패한 방법

1.  CI 환경 변수 바꾸기: netlify의 build command를 바꾸는 겁니다,

`CI='' npm run build` 이거로 바꾸는것.

크루의 설명에 따르자면 github actions에선 CI 환경변수가 설정되어 있어 빌드 시 eslint warning이 하나라도 있으면 빌드 자체가 안되거든요. 아마 netlify도 비슷하지 않을까 싶습니다! 라고 했어요

 

2. 폴더명 다시 확인하기

윈도우는 폴더명 대소문자 구분을 하지않는다고 하네요

 

3. 그래서 결국 답은?

결국 코치 공원이 도움을 주었어요! 덕분에 저는 해결했답니다.(눈물)

일단 netlify에서 build 커맨드 실행 단계에서 에러가 난거니까 우리는 프로젝트를 켜야합니다. 

다들 프로젝트 가보시면 .storybook 폴더안에 main.ts 혹은 main.js 있으시죠?

다들 뭐 안건들였으면 이렇게 되어있을거에요

//.storybook/main.ts

import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-interactions",
    "storybook-addon-react-router-v6",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["..\\public"],
};

export default config;

우리를 괴롭히는 친구는 staticDirs 요친구랍니다.

우리는  윈도우 환경이라 staticDirs에 백슬래시가 있어요.. 진짜 최악! (맥 살까 진지하게 고민중입니다)

 

해당 파일에 path를 import 하고 staticDirs경로를 아래처럼 바꾸면 돌아갈거에요

// .storybook/main.ts
import path from 'path'; 

//...

staticDirs: [path.join(__dirname, "..", "public")]

 

4. 그깟 경로가 뭐라고,, 왜 저러는거야

으응 고생했습니다 여러분..  이게 왜 저런지는 node쪽에 관련이 있네요? 그래서 저도 잘 이해는 못했어요

암튼 path.join는 경로 지정을 하는 방법 중 하나라고 해요

The path.join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.
Zero-length path segments are ignored. If the joined path string is a zero-length string then '.' will be returned, representing the current working directory.

path.join의 공식문서에 있는 설명 부분입니다.

또한 _dirname은 node.js에서 제공하는 node 파일의 경로를 담고 있는 변수라고 하네요.

 

백슬래쉬는 윈도우에서만 있는 파일 경로 나타내는 시스템이에요.. 그니까 맥이나 리눅스에서는 작동하지 않죠!

하지만 path.join을 사용하면 운영체제에 상관없이 경로를 지정해주기 때문에 이런 문제를 해결할 수 있는 아주 좋은 방법입니다.

 

const path = require("path");
const fs = require("fs");

const dir1 = __dirname + "\\" + "..\\public"; // 윈도우에서만 된다!
const dir2 = path.join(__dirname, "..", "public");

console.log(fs.readdirSync(dir1));
console.log(fs.readdirSync(dir2));

dir1와 dir2가 나타내는 경로는 똑같아요 하지만 dir1는 윈도우에서만 실행되는거죠. 따라서 해당 경로와 동일한 경로를 나타내도록 path.join을 사용해서 우리의 문제도 해결했다고 할 수 있겠습니다!!

 

아주아주 힘든 시간이었어요... 진짜 못된 윈도우