Github에서 react 프로젝트 호스팅하기 (feat. gh-pages)

Prerequisites

---

1. github account

2. install git (later than Window 2.16)

3. install node.js(later than Node 8.10.0)

4. install npm

 

1. React project 생성

npx create-react-app mypage

mypage라는 이름의 react app 생성

 

 

2. gh-pages 패키지 다운로드

cd mypage
npm install gh-pages --save-dev

현재 폴더 위치를 mypage로 옮긴 후

gh-pages package 설치 (as a "dev-dependency" of the app)

 

 

3. package.json file 에 properties 추가

 

homepage property 추가

"homepage " : "http://<github_username>.github.io/<repository_name>/"

scripts property에도 ''predeploy''와 "deploy"를 아래와 같이 추가

"predeploy" : "npm run build",
"deploy" : "gh-pages -d build"

모든 properties를 추가하면 package.json의 내용은 다음과 같다.

{
"homepage" : "http://<github_username>.github.io/mypage",
"name": "mypage",
"version": "0.1.0",
"private": true,
"dependencies": {
// ...
},

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},

// ...
}

 

4. github repository 생성

github 사이트에서 직접 만들어 주고 아래와 같은 repo path 얻었다.

https://github.com/<github_username>/mypage.git

 

5. Local 프로젝트 폴더와 github repo 연결

git remote add origin https://github.com/<github_username>/mypage.git
git push -u origin master

 

6. Deploy

npm run deploy

 

이전에 package.json에서 설정 해줬던

"predeploy" : "npm run build" 가 먼저 실행되고

그 다음에 "deploy" : "gh-pages -d build" 실행됨

 

 

deploy 성공 화면 야호

성공

 

# 나중에 코드 업데이트 하고나서 npm run deploy 해주면 배포 끝.

 

오류

---

# 1

> gh-pages -d build
fatal: HttpRequestException encountered.
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': No error

git update 해줘야함 Window 2.16부터 사용 가능

 

# 2

> gh-pages -d build
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': No such file or directory

bash의 에러메세지가 살짝 다르다

이거 때문에 하루동안 머리를 쥐어 싸맸고.. 

 

해결 방법은 remote url을 http방식에서 ssh방식으로 바꾸는 것!

 

[ ssh키를 이미 만들었다고 가정하고 아래를 수행한다]

 

  (1) 먼저 확인차 현재 remote url이 어떤 식으로 되어있는지 확인

git remote -v

origin  https://github.com/<username>/<dir-name>.git (fetch)
origin  https://github.com/<username>/<dir-name>.git (push)

지금은 요로코롬 https:// ~  되어있다

 

 (2) 해당 깃 디렉토리에서 ssh url을 복사한 뒤

 (3) 다시 cmd 창으로 돌아가 url을 다시 셋해주는 명령어를 입력한다(origin 뒤에는 아까 복사해주었던 ssh url을 붙여넣는다)

git remote set-url origin git@github.com:<username>/<dir-name>.git

 (4) 그럼 쨔안 ssh url로 바뀌어있당

git remote -v

origin  git@github.com:<username>/<dir-name>.git (fetch)
origin  git@github.com:<username>/<dir-name>.git (push)

 (5) 다시 deploy 파트만 수행해주면...! 매우 성공적.. 광광 울뻔해따 저 문구 보고

> gh-pages -d build
Published

정확한 원인은 모르지만 gh-pages -d build를 실행할 때 인증문제가 생기는 것같다😫 예전에는 아니었는데 오랜만에 업데이트 해주려했더니 이런 문제가 허허..

# 3

> gh-pages -d build
fatal: A branch named 'gh-pages' already exists.

 

1. Manually delete (직접 해당 폴더로 가서 삭제하는 방법)

  ※ /node_modules/.cache/gh-pages 아래에 있는 폴더 삭제

 

2. bash에서 삭제하기

 ※ Windows 기준

 npm install -g rimraf
 rimraf node_modules/gh-pages/.cache 

출처 : https://github.com/transitive-bullshit/react-modern-library-boilerplate/issues/15

 

 

 

---

정말 많은 도움이 되었던 사이트  https://github.com/gitname/react-gh-pages

나머지 참고 사이트  https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f