-
git hub를 이용해 웹 사이트 배포하기React 2023. 3. 21. 09:24
1. gh-pages 란?
React로 만든 페이지의 결과물을 github pages에 업로드 할 수 있다.
npm i gh-pages
html , css , javascript를 올리면, 웹 사이트로 만들어서 전 세계에 무료로 배포해주고 도메인도 만들어준다.
package.json에 있는 build를 실행하면, 웹 사이트의 production ready code를 생성한다. ( build 파일 생성 )
production ready : 코드가 압축되고 모든 기능이 최적화 된다.
- 이후에 git push 해준다.
자동으로 gh-page 실행하는 방법
1. homepage URL 설정하기
이후에 package.json의 마지막에 , 를 찍고 URL을 입력한다.
}, "homepage": "https://깃허브아이디.github.id/깃허브저장소이름" }
깃허브 저장소 이름은
git remote -v
로 확인할 수 있다.
2. deploy 설정
- package.json에 deploy, predeply를 설정해서 build 와 최적화를 자동으로 할 수 있다.
"deploy": "gh-pages -d build", "predeploy": "npm run biuld"
predeploy는 build를 먼저 하고 deploy 해야하는 과정을 단축해준다 ( deploy 를 실행하면 predeploy가 먼저 실행되서 build명령을 수행한다)
3. deploy 실행
npm run deploy
-> predeploy 명령이 먼저 실행되서 build 파일을 생성하고, 이후에 deploy 명령이 실행되서 최적화를하고 웹 사이트를 업로드한다.
** 이후에 변경사항을 추가하고 싶다면,
npm run deploy만 실행해주면 일련의 과정들이 자동으로 실행되고 push 까지 수행한다..
'React' 카테고리의 다른 글
api response와 async 함수, await (0) 2023.03.22 React Router ( parameters ) (0) 2023.03.20 useEffect (0) 2023.03.19 React Router (ver. 6 이상) (0) 2023.03.19 OPEN API 데이터 불러오기 ( fetch ) (0) 2023.03.19