시작하기에 앞서 배포 결과부터 확인해보자.
위 사진은 Github pages로 직접 배포한 react 웹 앱이다.
주소는 https://donggoolosori.github.io/tinder-clone 으로, 성공적으로 배포 된 것을 확인 할 수 있다.
(gh-pages로 배포 하기 위해서는 프로젝트가 Github repository와 연결 돼 있어야 한다.)
1. npm으로 gh-pages 설치
배포하고자 하는 react 앱의 root 에서 terminal을 통해 gh-pages를 설치해준다.
1
$ npm i gh-pages
다음과 같이 package.json 파일의 dependencies에 gh-pages가 있다면 성공적으로 설치 된 것이다.
2. homepage url 설정
이제 package.json 파일의 가장 밑에 homepage url을 추가해준다. 이 url은 배포 된 사이트의 url이 된다.
“https://donggoolosori.github.io/tinder-clone” 부분을 자신의 url로 바꾸면 된다.
형식은 “https://(github 닉네임).github.io/(github project 이름) 이다.
3. 배포 하기
다시 package.json 파일로 가서 다음과 같이 scripts 안에 predeploy와 deploy를 추가해준다.
-
“deploy” : gh-pages -d build
npm run deploy 명령을 수행했을 때 build directory를 배포 -
“predeploy” : “npm run build”
npm run deploy 명령어를 입력했을 때 deploy 가 수행되기 전에 build를 한다. predeploy는 deploy 전에 먼저 실행한다는 뜻이다. 이를 통해 build와 deploy를 한번에 실행할 수 있다.
이제 npm run deploy 명령어를 입력한다.
1
$ npm run deploy
다음과 같이 Published가 뜨면 성공적으로 배포가 완료 된 것이다.
