기존에 다른 방식으로 페이지 배포를 했었다. (Netlify 이용)
맨 처음 배포 시에 github 배포를 먼저 시도했었는데, 그 때 무슨 오류가 계속 나는 와중에 기한 내 배포는 해야하는 상황이라 일단 netlify를 이용했었다.
그런데 이번에 React portfolio는 github으로 배포해보고 싶어서 시도했는데, 몇가지 에러가 나긴 했지만 배포를 무사히 끝내서 뿌듯했다. (별거없지만 역시나 한큐에 되지는 않았음 ㅎㅎ..)
나중을 위해 정리해보고자 한다.
1. github repository 생성
사실 이부분은 이미 프로젝트를 하면서 생성을 했을 거라 pass~~
프로젝트 커밋 푸쉬 날리면서 이미 이 레포랑 내 프로젝트랑 연결이 되어있는 상태였다. 다 완료했다는 가정하에 다음 단계로 진행 👉
2. 로컬에 gh-pages 설치하기
하단의 코드를 입력해서 gh-pages 패키지 설치해준다.
npm install gh-pages --save-dev
3. package.json 파일 수정하기
package.json 파일에 들어가서 아래 코드를 추가하여 수정해준다.
"homepage": "호스팅 될 웹사이트 주소"
//여기서 호스팅 될 웹사이트 주소는 https://아이디.github.io/레포이름
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"⚠️ 아래 사진 참고
보면 홈페이지 주소는 상위 입력 부분임 (보통 맨 위에 넣는 것 같음)
4. 배포하기
하단의 명령어 입력해서 배포 실행하기
npm run deploy
원활히 진행되면 코드 쭉 뜨면서 Published가 뜸
이렇게 되면 완성!!이어야 하는데,,,다른 블로그는 거의 여기까지 설명이 되어있음, 이후 github settings - pages 에서 branch를 gh-pages로 변경해주는 것까지 설명이 되어있음. 여기까지 한 후에 나는 배포 페이지에 들어간 결과, 보인 건 흰 화면이었다..
❌ 에러 발생
뭐가 문제 였을까,, 일단 내가 흰 화면일 때 개발자 도구에서 확인한 오류 메세지는 404 메세지였다. 구글 검색해보니 여러가지가 나왔는데, 그 중에 하나가
router 쪽 문제였다. 즉 경로를 잘못 인식해서 인데, 이건 github.io/레포 주소 방식으로 이루어져 있어서 문제였던 것이다.
즉 라우터가 가리키는 경로는 / 인데 내 페이지의 정보는 /레포명/ 에 있어서 문제가 됐던 것이었음.
해결 방법이 몇가지 있었는데 나는 router에 basename을 넣어 수정하는 것으로 해결했다.
기본 url을 제공하여 레포명 주소로 찾아가라고 알려주는 것.
return (
<BrowserRouter basename={process.env.PUBLIC_URL}>위와 같이 BrowserRouter 안에 코드를 추가해주면 된다.
즉 BrowserRouter를 사용하는 파일에 들어가서 수정해주면 됨, 나는 App.jsx였다.
이렇게 해서 페이지 배포를 완료했다!!
☝️ 아 그리고 하나 더 , 원래 html로 페이지 배포할 때는 그냥
push 할 때 마다 몇 초 텀을 두고 배포 페이지에 push 한 수정 사항이 잘 업데이트 되었는데 react 프로젝트는 아니었다...
왜인가 하니 저 위의 코드 npm run deploy 명령어를 입력해서 build시켜야 하는 것 같았다. 왜 안되지 하다가 문뜩 아 이 명령어를 다시 실행해야하는구나 깨달음 ㅎㅎ 여튼 해결!!
이렇게 해서 github으로 배포 완료!!
