깃허브 페이지 배포 관련 재정리
설치해야하는 라이브러리 : gh-pages 와 react-router-dom
- react-app 설치하기 – npm create react-app ‘이름’
- package.json 의 디버그(script) 부분에 “predeploy” : “npm run build”, “deploy” : “gh-pages -d build” 추가
- index.js 에서 BrowserRouter로 App 감싸기. BrowserRouter는 react-router-dom에서 import도 해줘야 함
- github에서 레퍼지토리 생성
- git init~git push 까지 진행
- package.json의 2번째 줄(name부분) 처럼 “homepage”:”https://github아이디.github.io/레퍼지토리이름” 추가
- npm run deploy를 해서 build 폴더가 생성되었는지 확인
- github 페이지에 branch에 gh-pages 가 생성되었는지 확인
- Setting-Pages에서 Branch가 gh-pages이고 상단에 생성되었는지 확인
- 캐시나 쿠기 같은 인터넷 기록을 지우거나 시크릿 모드로 확인
오늘 과제로 배포 관련 문제를 제출하고 나서 기억이 가물가물해서 다시 참고하는 용도로 글을 적게 되었다
4월에 해본 배포와 5월 개인 프로젝트 배포 이후로 팀프로젝트에서 팀장이 아니여서 배포 관련을 안하다 보니 까먹은듯 하다
특이한 부분 : predeploy라고 적은 부분은 npm num deploy 를 눌려 진행 할 때 predeploy가 먼저 실행한다고 한다.
https://davidyang2149.dev/front-end/github-actions%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-gh-pages-%EC%9E%90%EB%8F%99-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/
그래서 2번 부분이 필요한듯 하다. 만약 2번을 하지 않는다고 문제가 생기지는 않지만 npm run build 와 gh-pages -d build를 일일히 입력해야하는 번거로움이 있다
9번의 경우 가끔 자동으로 gh-pages로 전환은 되어 있는데 생성이 안되어 있는 경우가 있어서 master로 바꾸어서 저장하고 다시 gh-pages로 전환해줘야 한다
이미지 연결은 2가지 경우가 존재한다. 기존 방식은 <img src=”이미지위치”></img>
- public에 이미지를 추가한 경우
process.env.PUBLIC_URL+”이미지이름.확장자” 또는`${process.env.PUBLIC_URL}이미지위치` 를 쓴다 - src 안에 이미지를 추가한 경우
import를 통해 들고오거나 require(그림파일위치).default를 통해 쓴다