[React] Github Pages로 정적 페이지 배포하기

 

 

 

프로그래머스로 이력서를 작성하던 중 다른 개발자 분들이 따로 정적 페이지를 만들어서 이력서를 작성하신 걸 보고 나도 그렇게 만들고 싶어졌다. 여러가지 방법이 있겠지만 Github Pages를 사용해 본 적이 없기도 하고, 이력서는 은근히 갱신할 일이 많을 것 같아 편하게 재배포 할 수 있도록 Github Pages를 이용해 보기로 했다.

 

0. 사전 준비

node.js

npm 또는 yarn (패키지 매니저)

 

나는 항상 패키지 매니저로 yarn만 사용하다가 이번에는 npm을 사용했다. 찾아보니 yarn으로 깃허브 페이지를 배포하는 것도 크게 달라 보이지는 않았다!

 

1. Repository 생성하기

레포지토리 이름은 {본인의 Github 아이디}.github.io 의 형태로 설정한다. README.md 는 옵션이라서 선택해도 되고 선택하지 않아도 된다. 어차피 main 브랜치가 아닌 다른 브랜치를 이용할 거다.

 

위와 같은 이름으로 레포지토리를 생성하고 나면 우측 하단에 보여지는 것과 같이 자동으로 Github Pages가 연동된다.

 

 

2. CRA + 원격저장소 push

npx create-react-app 프로젝트 이름
cd 프로젝트 이름
npm start

 

위의 명령어를 순서대로 실행하면 우리가 익히 아는 리액트 초기 실행 화면을 로컬 환경에서 확인할 수 있다.

 

그 후 만들어진 소스코드들을 깃허브의 원격저장소에 push한다. 만약, 레포지토리를 생성할 때 README.md도 같이 만들었다면 원격 저장소를 먼저 연동한 후 README.md 파일을 pull 해야 push할 때 에러가 발생하지 않는다.

git init
git add *
git commit -m 'first commit'
git remote add origin 원격저장소 URL
git checkout -b main
git push -u origin main

 

여기까지 완료하면 레포지토리에 main이라는 브랜치가 생성되고 CRA로 초기 설정된 소스코드들을 확인할 수 있다.

 

3. Github Pages에 배포하기

 

3-1. gh-pages 설치

npm install gh-pages --save-dev

 

3-2. package.json 설정

"homepage": "https://zubetcha.github.io/"

"scripts": {
// ..
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
},

 

3-3. 배포

npm run deploy

여기까지 마치고 레포지토리 브랜치를 확인하면 main 아래에 gh-pages 라는 브랜치가 생성되어 있을 것이다. 이 브랜치에 프로젝트를 빌드한 파일들이 올라가게 되고, 해당 빌드 파일들을 기반으로 깃허브 페이지가 정적으로 호스팅된다.

 

 

4. 404 error

배포 후 깃허브 페이지 url로 접속해보면 README.md 내용을 출력하고 있거나 404 error로 확인되는 경우도 있다. 그럴 때는 아래의 설정들을 확인해보는 것이 좋다.

 

4-1. gh-pages 브랜치 설정

 

레포지토리 - Settings 에서 Pages 라는 탭을 클릭하면 어떤 브랜치의 소스코드를 기반으로 페이지를 호스팅할 건지 설정할 수 있다. 만약, Branch가 gh-pages가 아닌 다른 브랜치로 설정되어 있다면 gh-pages로 변경한 후 우측의 Save를 클릭한다.

 

 

4-2. react-router-dom 을 사용하고 있다면

 

아래와 같이 Router 태그에 basename을 추가로 설정해야 한다. 동일하게 basename={process.env.PUBLIC_URL} 로 설정한다.

 

 

4-3. 에러 발생 시 Redirect

 

React 프로젝트를 AWS의 S3 버킷을 통해 정적 웹 사이트 호스팅을 해봤다면 아래와 같이 오류 문서에도 index.html을 입력한 경험이 있을 것이다. 아쉽게도 gh-pages에서는 S3의 오류 문서 반환 같은 기능은 제공하고 있지 않다.

 

하지만 비슷하게 처리할 수는 있다. 

build와 public 폴더에 index.html을 복제한 404.html(파일 이름은 상관 없다.) 이라는 파일을 생성한 후 package.json의 scripts에 아래의 설정을 추가한다. 다만 build/ 뒤의 파일 이름은 복제한 파일 이름과 같아야 한다.

 

 

"scripts": {
  // ..
  "postbuild": "cp build/index.html build/404.html",
},

 

etc. 프로젝트 레포지토리를 따로 만들어서 배포하고 싶다면

 

위의 과정은 동일하게 하되 package.json 의 homepage 설정만 아래와 같이 레포지토리 이름을 추가해주면 된다.

"homepage": "https://zubetcha.github.io/{프로젝트 레포지토리 이름}"

 

---

 

 

 

 

나는 이력서와 포트폴리오만 만들거라서 따로 프로젝트 레포지토리를 만들지는 않았고, react-router-dom을 이용해 페이지를 이동 시킬 생각이다. 일단 Resume.js 컴포넌트 파일만 만든 후 App.js에서 BrowserRouter를 이용하여 path를 "/resume" 로 설정해놨는데 https://zubetcha.github.io/resume에서 잘 출력되는 걸 확인했다!