React로 짠 프로젝트를 github에 배포하는 방법
- npm i(nstall) gh-pages 설치 – package.json에서 설치되었나 확인
- package.json에서 2번째 줄 name 처럼 해당 줄에
"homepage":"https://githubID.github.io/레퍼지토리이름"
추가. 이 때 미리 github에 레퍼지토리를 만들어도 상관없다. - 28번째 줄 디버그(scripts{}) 안에
"predeploy":"npm run build",
"deploy":"gh-pages -d build"0
를 추가한다. - npm run deploy를 하면 node_modules 폴더 위에 build폴더가 생기는 것을 확인 할 수 있다.
- github에 올려보면 branch가 2개 생성되는 것을 확인 할 수 있다.[master와 gh-pages]
- setting-pages에서 branch를 master로
접속은 2번의 주소로 들어가면 된다.
만약 수정,추가,제거를 했다면 git add – git commit – git push 를 하고 npm run deploy를 해서 다시 build를 해주고 시간이 조금 지나고 난 뒤에 확인해야한다. 덤으로 쿠키파일때문에 새로고침을 반복해도 안고쳐 질 수 있기 때문에 2가지 방법이 있다.
- 쿠키를 수시로 삭제해주면서 확인
- Microsoft Edge의 경우 InPrivate 브라우징, chrome의 경우 시크릿 모드 [둘 다 단축키 Ctrl+Shift+N]로 접속
새롭게 알게 된 것들
a 태그를 쓰면 서버에 직접 연결하는 거기 때문에 react-router-dom 에 있는 Link 태그를 써야 한다. 태그 안에 href도 to로 바꾸어준다.
img 태그의 src의 경우 만약 public 폴더에 이미지를 저장했다면
src="/image/image2.png"로 되어 있는데 배포한 페이지를 열어서 확인해보면 연결이 안되어 있다. 그래서
src={process.env.PUBLIC_URL+"/image/image2.png"}나
src={`${process.env.PUBLIC_URL}/image/image2.png`}로 바꾸어 주면 된다.
build 하지 않은 폴더에서 2의 homepage를 추가하고 npm start를 하면 이미지가 보이지 않고 관리자 모드의 네트워크로 가서 이미지 부분을 클릭해서 Genereal을 보면 304 Not Modifed가 나온다. 이유는 process.env.PUBLIC_URL이 homepage의 주소로 가기 때문인걸로 보인다.