React 프로젝트를 GitHub pages 사용자 페이지에 호스팅하기

create-react-app 으로 만든 React 프로젝트를 github project page에 호스팅하는 글은 많다.

하지만 User page에는 똑같은 방법으로 올려지지 않는다. 4시간이나 삽질한 후에 방법을 찾아서 공유한다!

아래는 Project page가 아닌 User page에 React 프로젝트를 호스팅하는 방법에 대한 내용이다.

우선 Project page와 User Page의 차이점은 대략 이렇다.

Project page :

username.github.io/repositoryname 과 같은 URL을 가지고, 빌드된 파일들이 gh-pages branch에 저장되어야 함

(username은 사용자 이름, repositoryname은 프로젝트 저장소 이름 ex) enan501.github.io/react-test)

User page :

username.github.io 와 같은 URL을 가지고, 빌드된 파일들이 master branch에 저장되어야 함

repository 이름이 무조건 username.github.io여야 함

React 프로젝트를 github project page에 호스팅하는 방법은 아래를 참고하면 된다.

https://www.hohyeonmoon.com/react-js-github-pages-deploy/

위의 글을 보고 잘 따라왔다면 package.json 파일에 deploy 명령어를 추가했을 것이다.

여기서 User page에 호스팅하기 위해서는 deploy 명령을 약간 수정해야 한다.

package.json 파일에서

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"deploy": "gh-pages -d build",

"predeploy": "npm run build" (혹은 yarn build)

이 스크립트에 추가한 deploy 명령어 "gh-pages -d build"를

"gh-pages -b master -d build"와 같이 수정해주면 된다.

이게 끝이긴 하지만, master branch에 build된 파일을 넣어야 하므로

따로 branch를 하나 파서 거기서 코드 작업을 해야 한다.

git checkout -b dev (branch 이름은 상관X)

적당히 branch를 하나 만들고 나서 npm run deploy 명령을 수행해 주면 master branch에 build 된 파일이 들어간다.

그러면 username.github.io 페이지에서 우리의 react project가 작동하는 모습을 볼 수 있다!ㅠㅠ

User page는 master branch에 build된 파일이 들어가야 한다는 차이점을 인지하지 못해 꽤 오래 헤맨 것 같다.

이제 포트폴리오 만들어야지!

* 참고한 글 : https://dev.to/javascripterika/deploy-a-react-app-as-a-github-user-page-with-yarn-3fka

from http://enant.tistory.com/21 by ccl(A) rewrite - 2020-03-21 18:54:13

react