Creat-react-app으로 리액트 애플리케이션을 만들고 push-dir이라는 npm 패키지를 사용해서 github-pages로 배포하는 방법을 알아보자.
push-dir 없이 배포하고 싶다면 이 링크를 참조하면 좋을 것 같다.
create-react-app으로 애플리케이션을 만든 상태에서 시작한다!
push-dir 설치하기
npm install -D push-dir명령어를 입력해 패키지를 설치한다.
package.json의 devDependencies 목록에 추가된 것을 볼 수 있다.
package.json에 script 추가
간편한 빌드와 배포를 위해 script를 추가한다.
"deploy": "push-dir --dir=build --branch=gh-pages --cleanup"- --cleanup 옵션을 추가해주어야 gh-pages 브랜치가 계속해서 만들어지지 않는다.
package.json에 homepage 속성 추가
다음과 같이 "homepage": "./" 속성을 추가해준다.
📌 파일 경로 문제 때문에 추가해주어야한다.
build된 index.html 파일을 보면 static 폴더에 있는 script 파일과 css 파일을 불러오는 것을 알 수 있는데, homepage 속성이 없으면 /static/js/main.c3a5a749.js, /static/css/main.424eed42.css 의 경로로 index.html 파일이 생성되어 파일을 제대로 불러올 수 가 없다.
homepage 속성을 통해 앞에 현재 디렉토리 ./에서 불러오도록 해주어야 한다!
처음에 그냥 배포했을 때 404에러가 떠서 꽤나 애먹었다.
참고 링크(https://stackoverflow.com/questions/68497926/how-can-i-fix-failing-to-load-resource-status-404-github-pages, https://stackoverflow.com/questions/46235798/relative-path-in-index-html-after-build)
react 애플리케이션 빌드
npm run build애플리케이션을 빌드하면 build 디렉토리가 생성되고 안에는 static한 배포용 파일들이 만들어진다.
git add, commit, push
git add, commit, push 명령까지 차례로 실행해 main branch를 업데이트해준다.
.gitignore 파일에 /build 가 자동으로 추가되기 때문에 이렇게해도 빌드 파일이 깃허브에 올라가지 않았을 것이다.
push-dir로 githubpages에 배포
아까 만들어두었던 deploy 스크립트를 실행시킨다.
npm run deploy
github에서 확인
remote 레포지토리에 가보면 gh-pages라는 브랜치가 자동으로 생성된 것을 볼 수 있다.
그리고 Settings - Github Pages 에 가보면 배포된 페이지 링크가 나온다.
빌드 파일의 크기에 따라 다르겠지만 작은 규모의 앱이면 보통 1-2분 안에 완료된다.
🚀 추가 개발 후 다시 build - deploy 하기
추가적으로 개발을 하고 다시 배포하려면 아래 과정을 반복하면 된다.
- git add, commit, push
- npm run build
- npm run deploy
이렇게 하면 배포 페이지가 알아서 업데이트 된다!
