이번 글에서는 React 작업을 터미널에서 바로 github pages를 올리고 업데이트하는 방법을 알아보겠습니다.
github pages는 github에서 제공하는 무료 서비스로 html, css, js를 업로드하면 웹사이트로 만들어서 무료 배포를 해줍니다.
🧚 GitHub Pages 설치
패키지를 설치합니다.
npm i gh-pages설치 후 package.json 파일을 보면
🧚 hompage 링크 연결
이제 package.json 파일 제일 아래에 "homepage"라고 적고, 깃헙 사용자 이름과 레포지토리 이름을 써주세요.
없다면 repository를 먼저 생성해주고, add, commit, push 같은 것들을 해준 후 아래와 같이 링크를 연결시켜줍니다.
{
"homepage": "https://{GitHub username}.github.io/{Github-repository}"
}
🧚 script 추가
deploy와 predeploy를 아래와 같이 추가해줍니다.
deploy가 하는 일은 방금 설치한 gh-pages를 실행시키고, build라는 디렉토리를 가져가는 것입니다.
그리고 predeploy는 원래 build를 하고 난 다음 deploy를 따로 해줘야하는데 이 때의 귀찮음을 덜기위해 아래와 같이 추가해줍니다.
🚨 predeploy 진행 순서 🚨
deploy를 실행시키면 predeploy가 자동으로 먼저 실행이 되고, predeploy는 npm run build를 실행됩니다.
"scripts": {
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
},🧚 Conclusion
자 이제 npm run deploy를 커멘드하면 자동으로 predeploy가 실행되고, 다음 npm run build가 실행된 후 Published가 찍히는 걸 볼 수 있습니다.
그리고 3-5분 후 위에서 작성한 homepage 링크를 타고 들어가면 배포된 홈페이지를 확인할 수 있습니다.
🚨 프로젝트의 크기마다 업데이트 속도가 상이할 수 있습니다.
