React 배포하기 - Travis, Github Pages

먼저 Github Repo 를 만들어주세요

그 후 Create React App 을 이용하여 프로젝트를 생성합니다.

$ npx create-react-app exam-deploy-pages
$ cd exam-deploy-pages
$ npm start 

localhost:3000

만들어 놓은 프로젝트를 Github 에 올려주세요

$ git init
$ git add .
$ git commit -m "initial commit"
$ git remote add origin <본인 repo>
$ git push -u origin master

Github Token 을 가져와야합니다. 오른쪽 프로필에서 Settings > Developer settings 에서 토큰을 발급 받습니다.

Travis CI 에 가입 후 만들어 놓은 Github Repo 를 연결해주세요

연결된 Travis 에 우리가 위에서 발급 받은 토큰을 환경변수에 넣어줘야합니다. Settings 으로 들어가주세요

프로젝트 폴더 루트 경로에 .travis.yml 파일을 만들어줍니다.

language: node_js

node_js:
- "11"

cache:
  directories:
    - node_modules

deploy:
  provider: pages
  skip-cleanup: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local_dir: public
  on:
    branch: master

install:
  - npm install

script:
  - npm run deploy

그리고 gh-pages 모듈을 설치합니다.

$ npm i -D gh-pages

package.json 의 script 에 deploy 명령어와 home page 정보를 추가합니다.

"homepage" : "http://<Github 유저 이름>.github.io/<Github Repo 이름>"

$ git add .
$ git commit -m "bulid script 를 추가합니다"
$ git push origin master