본문 바로가기
프로그래밍/React

[React] 깃허브 배포 Build, Deploy

by 정빈e 2022. 5. 10.
728x90

우선 깃허브에 배포하기 위해서는 리퍼지토리를 생성하고 코드를 업로드해두어야 한다. 

gh-pages 설치

결과물을 github pages에 업로드할 수 있게 해주는 나이스 한 패키지

npm i gh-pages // gh-pages 설치

 

package.json 파일에 다음을 추가한다.

"homepage": "https://깃허브유저네임.github.io/코드가 들어있는 리퍼지토리 이름"

 

 

 

build, deploy

그리고 scripts에 deploy, predeploy를 추가한다.

"deploy": "gh-pages -d build",
"predeploy": "npm run build"

deploy가 하는 일은 방금 설치한 gh-pages를 실행시키고 프로젝트 경로에 생성된 "build"라는 디렉터리를 가져가는 것.

predeploy를 만들어 deploy를 실행하면 Ndoe.js가 자동으로 predeploy가 먼저 실행시키고 predeploy는 "npm run build"를 실행시킨다.

 

build를 하게되면 `서버로부터 deploy 되기 위해서 compressed + optimized`된다.

predeploy를 만들지 않으면 'npm run build'후 deploy 하면 된다.

추가하면 나중에 수정사항이 생겼을 때 'npm run deploy'만 하면 알아서 빌드 후 배포까지 되니 편할 것 같다.

 


[노마드코더 ReactJS로 영화 웹서비스 만들기] 

[목표: 5월 10일까지 끝내기]

#1 [2021 UPDATE] INTRODUCTION     22.05.02

#2 [2021 UPDATE] THE BASICS OF REACT     22.05.03

#3 [2021 UPDATE] STATE     22.05.05

#4 [2021 UPDATE] PROPS    22.05.05

#5 [2021 UPDATE] CREATE REACT APP     22.05.07

#6 [2021 UPDATE] EFFECTS     22.05.08

#7 [2021 UPDATE] PRACTICE MOVIE APP    22.05.10

 

 

 

728x90

'프로그래밍 > React' 카테고리의 다른 글

[React] useNavigate()로 state 전달하기  (0) 2022.05.27
nvm으로 node.js 버전 변경하기 / 윈도우  (0) 2022.05.11
[React] Router  (0) 2022.05.09
[React] useEffect  (0) 2022.05.08
[React] props  (0) 2022.05.06

댓글