[React] React 프로젝트 GitHub Pages로 배포하기

React 프로젝트 생성

React를 이용해서 개발하는 방법에는 여러가지가 있다.

프로젝트 구성을 직접해도 되지만, React에서 추천하는 Create React App 툴체인이 있다.

Create React App은 React를 배우기 간편한 환경으로 싱글 페이지 애플리케이션 앱을 만들기 적합하다.

이것은 개발 환경을 설정하고, 최신 JavaScript를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해준다.

Create React App을 사용하기 위해서는 Node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위 버전이 필요하다. 

새로운 프로젝트를 만들기 위해서 아래의 명령어를 실행한다.

(npx : npm 5.2+ 버전의 패키지 실행 도구)

npx create-react-app test-app

또는,

npm init react-app test-app

정상적으로 프로젝트 생성이 완료되면 아래와 같이 표시된다.

프로젝트 구성 : 

test-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

아래의 명령어를 사용해서 로컬 서버에서 react를 실행시킬 수 있다.

cd test-app

npm start

npm start 시 자동으로 http://localhost:3000/ 페이지를 띄워준다.

http://localhost:3000 접근 시의 기본 화면은 아래와 같다.

Create React App은 백 앤드 로직이나 데이터베이스를 제어할 수는 없다.

Create React App은 프런트 앤드 빌드 파이프라인만 생성하기 때문에 백 앤드 종류를 원하는 대로 선정해서 사용할 수 있다. (즉, 프런트 앤드 : React, 백 앤드 : 사용자가 원하는 백앤드)

또한, 프로덕션을 배포할 준비가 되었을 때, npm run build를 실행하면 build 폴더 안에 제작한 앱의 최적화된 Build를 생성한다.

이 게시물에서는, 별도의 서버없이 Github 페이지를 이용해서 React App 배포하는 법을 다뤄본다.

Github Pages로 배포하기

Github Setting

우선 react 프로젝트 배포를 위해서 github Repository를 하나 생성한다.

배포를 위해서는 우선 해당 repository에 React 프로젝트를 올려야한다.

React 프로젝트의 위치(ex. ../../test_app)로 이동하여 아래의 명령어를 이용해서 프로젝트 소스를 배포한다.

git add . // 변경된 전체 소스코드를 적용한다.

git commit -m "commit message"  // 커밋 메세지 추가

git branch -M main  // main branch 생성

git remote add origin [본인 github repository 주소] // 저장소 연결

git push -u origin main // git push

그 다음 github repository의 Settings 탭으로 이동하여 GitHub Pages 설정을 다음과 같이 변경해준다.

Branch는 본인이 React 프로젝트를 push한 branch로 선택하며 , root와 docs를 선택한다.

아래의 테마 선택과 Custom Domain은 현재 단계에서는 다루지 않고 넘어간다.

publish 됐다는 https://[githubname].github.io/react_test_app/으로 이동하면 React 프로젝트를 배포하기 전이기 때문에 기본값으로 readme 페이지가 나온다.

React Project Setting

Github Page로 프로젝트 배포를 위해서는 gh-pages라는 모듈 설치가 필요하다.

아래의 명령어를 통해서 패키지를 설치해준다.

npm install -save gh-pages

React 프로젝트의 package.json 파일을 아래와 같이 수정한다.

homepage에는 github page setting을 통해 만들었던 본인의 repository io 페이지 주소를, scripts에는 배포를 위한 script를 다음과 같이 추가한다.

아래 명령어를 통해 react 프로젝트 deploy한다.

npm run deploy

github Setting의 GitHub Pages로 다시 이동하여 Branch를 gh-pages로 변경한다.

만약 gh-pages branch가 없다면, 위의 push 방법을 사용해서 변경된 pakage.json을 git에 한번 더 push한다.

그리고 해당 io 페이지로 이동하면 끝

(만일 변동이 안되면 캐시를 날려보자[크롬 ctrl-R])

참고 : https://ko.reactjs.org/docs/create-a-new-react-app.html