[React.js로 만드는 Tech Blog] #3 master 브랜치로 통합하기/github pages에 재배포하기

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기

2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용

---

 

Github Pages에 배포된 기존 portfolio를 대체하기 위해서 second 라는 이름의 브랜치를 생성하고, 작업이 어느 정도 끝나서 second 브랜치를 master 브랜치로 아예 덮어쓰기를 진행하기로 했다.

 

git checkout second
git merge -s ours master
git checkout master
git merge second

 

위 방법대로 진행하다가 두 번째 라인에서 refusing to merge unrelated histories 라는 에러 문구가 떠서, 아래처럼 해주었다.

 

git checkout second
git merge --allow-unrelated-histories -s ours master
git checkout master
git merge second

 

이후에는 readme를 수정하고 commit 해주면 master 브랜치는 아래처럼 보여진다.

기존 second 브랜치의 commit 기록을 그대로 가지고 오고 새로 더한 readme에 대한 커밋 목록이 보여진다. 그렇다고 기존 git 기록이 사라지진 않는다. 아래는 second 브랜치. master와 병합이 되어서 이전에 없었던 master 브랜치의 깃 기록을 가지고 있다.

 

 

github pages에 배포하기 / using index.html on the root folder

이렇게 진행하고 나서 hannah26hannah.github.io/ 로 배포상황을 확인하니 readme 내용만 출력되고 있었다. root에 기본으로 보여질 파일인 index.html이 부재해서, Readme가 대신 보여지고 있었다.

root에 index.html을 생성하고, 아래 코드를 한 줄 추가해서 다시 업로드했다.

 

<meta http-equiv="Refresh" content="2; url=public/index.html">

 

역시나 제대로 업로드가 안 돼서 gh-pages 패키지를 이용해서 다시 시도하기로 했다.

 

github pages에 배포하기 / using gh-pages package

만들었던 index.html 파일은 삭제하고, 아래 명령어로 gh-pages를 다운받아준다.

yarn add gh-pages --dev
# dev dependency로 인스톨 한다. npm을 쓴다면 아래 명령어를 쓴다. 

npm install gh-pages --save-dev

package.json 파일 설정을 아래처럼 수정해준다.

 

우선 homepage 프로퍼티를 추가해준다. 만일 다른 이름의 저장소를 갖는다면, <userId>.github.io/<another_repo_name> 형식을 따른다.

"homepage": "https://hannah26hannah.github.io/",

스크립트는 predeploy, deploy 라인을 추가해준다. yarn run deploy를 실행하면 predeploy도 실행된다.

 "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"
  },

실행되면 아래처럼 compile 후

 

published 라는 텍스트가 뜨면서 프로세스가 마무리된다.

 

CRA으로 리액트 앱을 생성한 경우, gh-pages 패키지 매뉴얼에 따라 빌드를 하면 build라는 폴더에 빌드 output이 담기게 되는데, 이 상태로 다시 homepage에 접속해보니 또 안 떠서, GIthub Pages 세팅에 master /docs 대로 build 폴더를 docs로 renaming 해줬다. ㅠㅠ

 

renaming을 하자 그때 제대로 디플로이가 됐다. 생성된 build 폴더의 이름을 docs로 바꾸지 않고 소스를 올리면 아래처럼 워닝이 뜨고 배포에 실패한다.

 

 

스크립트를 수정해서 Renaming 과정을 자동화하기로 해본다.

 

(기존에 이 과정을 반복해 배포했다면 docs 폴더가 있을 것이다) -> npm run build 후 build 폴더가 생성된다 -> docs 폴더를 삭제하고 -> build 폴더는 docs 폴더로 이름이 바뀌어야 한다.

 

"scripts": {
    "start": "react-scripts start",
    "prebuild": "rmdir /s docs",
    "build": "react-scripts build && rmdir /s docs && ren build docs",
    "rename": "ren build docs",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },

 

package.json의 script 부분은 이렇다. prebuild라고 이름 지어준 부분, renmae이라고 이름 지어준 부분은 나중에 각 과정만 따로 하고 싶을 때 쓰려고 만들어놨다. 빌드 후 docs 폴더 지우고, 생성된 build 폴더의 이름을 docs로 바꾼다는 시나리오가 일치하면 yarn run build만 실행하면 된다.

 

CMD 명령어이고, 리눅스를 쓴다면 “react-scripts build && rm -rf docs && mv build docs” 이렇게 해주면 될 것 같다.

 

 

 

 

---

 

 

참고한 링크

How to replace master branch in Git, entirely, from another branch?

참고한 링크 2