Github page 로 React 프로젝트 배포하기

안녕하세요 오늘은 간단하게 github page로 React 프로젝트를 배포하는 법에 대하여 포스팅 해보겠습니다.

먼저 리액트 프로젝트는 간단하게 CRA (Create-React-App) 로 만들어보겠습니다.

CRA 로 프로젝트 만드는 방법은 워낙 다양한 포스팅에 있으니 생략하겠습니다.

CRA 프로젝트 생성

[React] create-react-app으로 프로젝트 시작하기

 

1. 일단 github에 프로젝트를 만들고 저의 프로젝트를 올려 놓아야 합니다.

2. package.json 에 "homepage" 필드를 추가하고 주소를 "https://${저장소}.github.io/${프로젝트 이름}" 으로 해줍니다.

{
  "name": "react-playground",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://eomttt.github.io/react-playground/"
}

 

3. $ npm run build 를 해주어 빌드파일을 만들어 줍니다.

4. $ npm i gh-pages를 해주어 gh-pages 모듈을 설치해줍니다.

5. pacakge.json 에 deploy 를 추가해줍니다.

 

6. $ npm run deoply만 해주면 끝입니다. 그러고 난 다음 위에 정했던 homepage 주소로 들어가면 잘 뜨는지 확인 할 수 있습니다.

7. 만약 뜨지 않는다면 코드를 push 했는지 확인해보세요~