[배포] Github pages 이용해여 React 배포하기

리액트를 이용해서 웹 페이지를 만들었으니 배포도 해보자.



여러가지 배포 방법중
github pages를 이용한 배포 방법을 알아보자.
 
 
 
 
1. 배포하고자 하는 프로젝트에 gh-pages 의존성을 추가해준다.
 
 
배포하고자 하는 React 프로젝트에 npm 명령어를 사용해서 gh-pages 를 설치해줬다.
 
 
 

npm install --save gh-pages

 
 
 
 
 
2. 그다음 package.json scripts 부분에 deploy 명령어를 추가한다.

 

 

 
 
 

배포 명령어 추가

 
 
 
 
 
 

3. package.json 에 hompage 키도 추가해준다.
 
 

 

 

 

homepage의 값은
https://계정명.github.io/레포지토리이름 또는 
https://조직명.github.io/레포지토리이름
으로 입력해 주면 된다.
 
 
 

 

 

homepage 키를 추가한 package.json 파일

 
 
 

 

 
4. 배포 명령어 실행하기

 

 

 

 

 
아래 배포 명령을 실행하면 predeploy 가 먼저 실행되어 빌드가 이루어진 다음에 github.io 로 배포가 된다.

 

 

 

 

 

npm run deploy

 
 

 

 

5. Github 레포지토링 settings 메뉴에서 배포 브랜치를 선택해 준다. 

 

 

 

 

 

github 레포지토리  settings > pages 화면

 

 

 

 

6. 배포명령 실행이 완료되면 이제 인터넷에서 내가 만든 페이지를 볼 수 있다!
 
 

 

 

 

 

 

 
 

https://leessony.github.io/diablo4

 
 
 
 
 
참고문서
- https://create-react-app.dev/docs/deployment#github-pages