깃블로그(18) 지킬블로그에 리액트구축

개요

참고블로그
https://donghyuna.github.io/react/jyikil,-reactsetup/

STEP1. 지킬블로그 공간에 react 프로젝트 생성

리액트 프로젝트 생성 관련한 상세한 내용은 생략한다.

cd ~/blangs.github.io 
npx create-react-app dev-blang-react-pages  # 개발전용 프로젝트

STEP2. 배포 전용 폴더 생성

생성 및 작업한 리액트 프로젝트를 블로그에 복사

cd ~/blangs.github.io 
mkidr ~/blangs.github.io/blang-react-pages  # 배포전용 프로젝트 (빈 디렉토리)

STEP3. 개발전용 파일을 배포하지 않도록 하기

/.gitignore

깃허브에 커밋할때 node_modules 그리고 build 배포를 제외처리 한다.

# CTH ADD
dev-blang-react-pages/node_modules/
dev-blang-react-pages/build/

_config.yml

지킬 블로그 관점에서 react 개발에 필요한 프로젝트 폴더를 알 필요는 없으므로 이를 제외하도록 한다. 아래 구문을 새롭게 추가한다. (exclude가 존재할텐데 가장 마지막에 작성하면 된다.)

exclude:
  (중략)
  - node_modules
  - dev-react-pages

STEP4. react페이지가 표시될 주소 정하기

본인은 리액트 페이지가 [나의깃블로주소]/blang-react-pages 의 주소에서 표시 되도록 작성해보았다.
위에서 생성한 개발 react 프로젝트 폴더 내부에 package.json파일을 열어 아래와 같은 내용을 추가한다.

package.json

"homepage": "/blang-react-pages/"

STEP5. 빌드 및 배포 스크립트 작성

react 페이지를 배포하기 위해서는 우선 빌드를 하고 빌드된 결과를 배포전용 폴더에 옮겨준 뒤 커밋하면 배포가 완료된다. 위의 내용을 편하게 하기 위해 package.json 파일에 스크립트 내용을 추가해주었다.

운영체제가 window인 경우(yarn 의 경우) 스크립트

"scripts": {
    "purge": "rmdir /s /q ..\\react-pages\\static && xcopy .\\build\\* ..\\react-pages\\ /E /y",
    "deploy": "npm run purge"
}

운영체제가 리눅스인 경우(yarn 의 경우) 스크립트

"scripts": {
  "purge": "rm -rf ../blang-react-pages/static && cp -fR ./build/* ../blang-react-pages/",
  "deploy": "npm run purge"
}

실행

cd ~/blangs.github.io/dev-blang-react-pages # 개발전용 프로젝트
npm run build  # 빌드
npm run deploy # 빌드 후 배포로직 수행

git add . 
git commit -m '헤헤'
git push

1. 개발전용 리액트 프로젝트를 빌드 동작 수행.
2. 결과를 배포 폴더에 옮기는 동작 수행.
3. 모두 마치면 내용들을 git add, commit, push 하여 반영.

심볼릭링크 하나 걸어줬다.
ln -s /blangs.github.io/dev-blang-react-pages/ reactSymbolic

최종 결과

https://git.blang.co.kr/blang-react-pages/

내 블로그도메인에 접속하면 정상적으로 리액트 앱이 실행됨을 알 수 있다.

지킬 블로그에서 리액트앱 띄우기 완료.