728x90
github page 배포하는 방법
이미 프로젝트를 깃허브 저장소에 올려놓은 상태 여서 앞부분은 생략했지만 간단하게 순서를 짚어보자면,
- 깃허브에 프로젝트 저장소를 만든다
- 프로젝트에 깃을 설치하고 프로젝트를 깃허브에 push 해준다
- 그리고 아래의 순서대로 프로젝트를 배포해준다
1. 프로젝트에 gh-pages 패키지 설치
// 터미널에 아래의 코드를 입력해 gh-pages 패키지를 설치 해준다
npm install --save gh-pages
2. 설치가 완료되면 프로젝트에 있는 package.json 파일을 열어 "homepage" 주소를 추가해준다.
"homepage": "http://깃허브주소.github.io/프로젝트저장소명",3. package.json 파일의 scripts 요소에 아래 코드를 추가해준다 [위 사진 참고]
"predeploy": "npm run build",
"deploy": "gh-pages -d build"- 어떤 스크립트 이전에 pre가 붙으면 해당 부분이 먼저 시작되기 때문에 deploy가 시작되기 전에 predeploy가 먼저 시작된다.
- 그래서 predeploy인 "npm run build"가 먼저 실행이 되고 deploy는 -d(directory) build를 gh-pages에 넘기게 된다.
- npm run deploy를 다시 실행하면 deploy가 시작되기 전 predeploy->deploy순으로 실행된다.
4. 저장하고 터미널을 열어 npm run deploy를 실행해준다
- 오른쪽 사진처럼 뜨면 배포가 완료된 것인데, npx npm run deploy 실행 후 터미널에 "Published" 출력되면 성공이다
5. 깃허브 해당 프로젝트 레퍼 지토리 > settings > pages에서 gh-pages로 source 설정 후 저장(Save) 해준다.
6. 배포된 페이지 확인
- 아래의 사진처럼 초록빛의 배포가 완료되었다는 표시가 나왔으면, 파란색 링크를 클릭하면 된다 그러면 배포된 페이지로 이동한다
※ 추후 유지 관리
- 추후 관리를 위해서 코드를 수정해서 다시 배포할 때에는 위 과정을 다시 거칠 필요는 없다
- 해당 코드를 수정하고 'npm run deploy'를 수행하면 재배포된다.
참고 블로그
https://velog.io/@byjihye/react-github-pages
https://allonsyit.tistory.com/92
728x90