[GitHub] 📂gh-pages로 배포하기

📂 gh-pages 설치

npm install gh-pages --save-dev

📂 package.json 수정

// 주소를 모르겠다면 배포를 먼저 하고, 그 주소를 복사해서 가져오면 됨
"homepage": "https://깃허브아이디.github.io/배포할폴더이름/" // 상단에 추가

"predeploy": "npm run build" // script에 추가
"deploy": "gh-pages -d build" // script에 추가

-----
// 스토리북일 경우
"scripts": {
  "build": "build-storybook",
  // "deploy-storybook": "gh-pages -d storybook-static",
  // 위에꺼 오류 발생함. 아래꺼로 작성해야함
  "storybook:publish": "pnpm build && touch ./storybook-static/.nojekyll && gh-pages -d ./storybook-static -t true"
},

📂 배포하기

npm run deploy

-----
# 스토리북일 경우
npm run deploy-storybook

배포가 되면 gh-pages 브랜치가 새로 생긴다.

(pages에서 브랜치를 gh-pages로 설정하고 배포하면 됨.)
잘 반영된 것 같지 않다면 캐시 제거 cmd + shift + R 해보기❁

✚ 만약 빈 화면만 나온다면?

'Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort.'

아마 라우터 기능을 사용했을 것.
path 부분에 process.env.PUBLIC_URL 를 추가하면 된다.

<Route path={process.env.PUBLIC_URL + "/"} element={<Main />} />
  
// Link의 경로도 수정해 주어야 한다.
<Link to={process.env.PUBLIC_URL + "/"}>

(또는 BrowserRouter에 basename={process.env.PUBLIC_URL}을 추가)

👉 vercel로 배포하기