[Github Pages]
Github Pages
Github Pages란 Github에서 제공하는 웹 페이지 무료 배포 서비스이다. 배포하게 되면 본인 아이디와 프로젝트 Repository 이름으로 github.io를 도메인 주소로 갖는 웹 페이지를 갖게 된다.
패키지 설치
잊지 말아야할 점이 있는데 아래 모든 과정은 본인이 작업한 코드 파일을 배포할 레포지토리에 모두 push 해놓은 상태에서 진행해야 한다.
npm i gh-pages터미널에 위의 명령어를 입력해줌으로써 gh-pages 패키지를 설치해준다.
설치 후 package.json 파일의 "scripts" 객체를 보면 "build"라는 속성이 존재한다. npm run build 명령어를 통해 실행하면 우리의 웹사이트에 production ready code를 생성한다. 이것은 코드가 압축되고 최적화되는 과정을 의미한다. 이어서 프로젝트 폴더 내에 build 폴더가 생겨난다. 해당 파일 내부에는 브라우저가 읽을 수 있도록 압축되고 최적화 된 코드 파일이 존재하게 된다.
다음으로 압축된 코드 파일을 Github Pages에 push 해주어야 하는데 package.json 파일의 최하단에 다음과 같은 속성을 추가해주어야 한다.
"homepage" : "https://{github username}/github.io/{repository name}"
다음으로 package.json 파일의 "deploy"와 "predeploy" 속성을 추가해줄 것이다.
- deploy 속성은 gh-pages 패키지를 실행시키면서 압축된 파일이 들어있는 폴더인 build 폴더를 가져가서 배포 작업을 처리해준다.
- predeploy 속성은 deploy가 실행되기 직전에 실행되는 속성으로 npm run build 를 속성값으로 입력해주면 deploy 하기전에 자동으로 build 작업을 진행한 후 배포가 되도록 번거로운 과정을 생략할 수 있게 해주는 특징이 있다. 다음과 같이 입력해준다.
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
과정을 정리해보면 다음과 같다.
1. 터미널에 npm run deploy를 입력
2. predeploy가 먼저 실행되며 npm run build가 입력되어 react-scripts build 실행
3. 코드 파일을 압축 및 최적화를 하여 build 폴더를 생성
4. 모두 진행되면 gh-pages -d build가 실행되며 gh-pages가 앞서 입력해주었던 배포할 주소인 "hompage"에 build 폴더를 업로드
Github Pages는 무료 배포 서비스이기 때문에 배포에 시간이 좀 걸린다는 단점이 있지만 무료인데다 간단한 과정을 통한 배포가 가능하다는 장점이 존재한다. Github Pages 말고도 Netlify, Vercel 등 배포가 가능한 방법은 여러가지가 존재하지만 가장 편리하고 쉬운 Github Pages에 대해서 알아보았다. 추후에 다른 배포 방법에 대해서도 알아볼 예정이다.