React github page 배포 오류 해결

Vite로 생성한 리액트 프로젝트를 깃허브에서 배포(settings - page) 했는데 링크는 생성되었지만 아무것도 없는 흰 화면이 떴고, 개발자도구에는 404 오류 경고가 떴다.

그래서 이것저것 방법을 찾아봤는데 오류 해결이 안되어 결국 튜터님의 도움을 받았다.

나중에 비슷한 오류가 났을 때 참고하기 위해서 기록해보자.

---

 

yarn 으로 패키지 환경을 세팅했고 깃허브에서 배포를 하니 오류가 났다. 

yarn build 를 했더니 아래와 같이 오류가 발생했고 튜터님의 컴퓨터에서 했을 때는 오류가 발생하지 않아서 작성했던 코드엔 문제가 없는것으로 확인이 되었다.

 

시간이 많지않아서 yarn 버전을 튜터님이 사용하고 계시는 berry(yarn classic의 업그레이드 버전)로 변경해서 진행하기로 했다.

명령어를 입력해서 설치해주기

yarn set version berry
yarn install

 

그리고 yarn build 를 하니 dist 폴더와 그안의 assets폴더안에 html, css, js 파일이 하나씩 생성되었다.

* dist 폴더 (distribution : 유통시키다, 배포하다.)

배포되는 파일이 들어있는 디렉토리

프로젝트를 배포하기 전 패키지를 build 하여 dist 폴더에 생성한 후 dist 폴더 안에 있는 파일들을 배포함(depoly)

(여러 소스코드들을 축소 및 난독화 해서 dist 디렉터리에 넣어 사용자가 자체적으로 축소할 필요 없이 바로 버전을 가져올 수 있도록 한다.)

 

 

그다음 아래 명령어 실행

$git add dist -f
$git add .
git commit -m "feat : yarn berry 적용"
git subtree push --prefix dist origin gh-pages

 

이후로는 아래 블로그를 참고하여 따라해줬다.

 

■  패키지 설치하기

yarn add -D gh-pages // -D 는 --save-dev 같은 yarn 명령어

 

■  package.json 파일 수정하기

{
  "homepage": "https://[github 아이디].github.io/[저장소명]",
  // ...
  "scripts": {
    // ...
    "deploy": "gh-pages -d dist" //깃헙 페이지에 배포를 실행
  }
}

 

■  vite.config.js 파일 수정하기

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
// https://vitejs.dev/config/
export default defineConfig({
  base: '/[저장소명]/', // 예시: 저장소 이름이 my-react-app 이면 /my-react-app/
  plugins: [react()],
});

 

■  배포하기

터미널에 아래 명령어 입력

yarn deploy

 

그리고 깃헙 페이지의 Build and deployment의 branch 를 gh-pages 로 바꿔주고 페이지가 정상적으로 뜨는지 확인!

(1~2분 걸릴 수 있음)

---

 

오류없이 정상적으로 뜨는걸 확인하고 yarn 버전을 다시 classic 으로 바꿔주기

yarn set version classic
yarn install

yarn install 을 하니 위와 같이 오류가 나서, package.json 파일에 berry 로 바꿀 때 생겼던

"packageManager": "yarn@4.4.0" 부분을 삭제하고 다시 yarn install 입력하여 변경완료.

배포가 정상적으로 되었으니 원래 버전에서도 build 와 deploy 해서 배포가 잘 되는지 확인하였는데 문제없이 잘 되는 것을 확인했다.

 

 

🙂 느낀점

오류들을 마주할 때마다 거의 처음 접해보는 것들이고 구글링을 해도 나의 경우에는 어떻게 적용을 해야할지 감이 없어서 그럴때마다 막막했다. 그치만 오늘도 오류를 해결하는 과정에서 yarn 의 다른 버전이나 파일을 배포할 때 생성되는 dist 폴더 등 새로 알게된 부분들을 혼자 찾아보고 공부하는 계기가 되어서 한편으로는 좋은 기회라고 생각이 들었다.

그리고 새로 접하게된 명령어 중에 git subtree 관련해서도 좀 찾아봤는데 어려워가지고,, 좀 더 파봐야 겠다.

 

 

참고

https://recodelog.com/blog/react/react-github-deploy