React gh-pages (deploy)

react를 이용해서 만든 웹페이지를 git-hub를 통해 배포하는 간단한 방법!

1. 페이지를 다 만들고 나면 npm run build 명령어를 통해 최적화 시켜준다.
2. git에 repository를 만들어주고 로컬 작업물을 push해준다.
3. package.json파일에 들어가 "homepage"를 만들어줄껀데, 아래와 같이 작성하면 된다.

{
  {
	...
  },
  "homepage": "https://ivebeen8.github.io/react-for-beginners"
}

• git-hub user id와 프로젝트 명을 적어주면 된다.

4. package.json scripts에 deploy 명령어를 추가해준다. 여기서 deploy가 하는 일은 gh-pages를 실행시켜주고 build한 디렉토리를 들고가게끔 한다.

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

5. 그리고 build하기 귀찮다면 predeploy를 만들어서 deploy 명령어를 입력했을때 자동으로 먼저 실행시킬 수 있도록 한다.

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

이렇게 해두면 build하지 않아도 npm run deploy라고 입력했을때, 자동으로 predeploy가 실행되고, 그안에 있는 명령어 build가 되면서 앱이 최적화된다. 다음 deploy 명령어가 실행되면서 build파일이 git에 자동으로 업로드 된다.

그리고 생성된 주소로 가게된다면, 페이지가 만들어 진걸 알 수 있다! 요-!