React / heroku 에 json-server 배포하기 React deploy

저번에 AWS EC2에서 react 와 express 로만든  프로젝트를 배포해보았다.

그리고 이번에는  json-server로 api를 만들어 프로젝트를 베포해봤다.

물론 React는 CRA로 만들었다. webpack이니 뭐니 아직 초보라 잘모르겠다..공부할것이 많다.

 

1. json-server 셋팅

프로젝트 최상위 루트에 서버폴더를 만든 후 api와 index.js를 만들어 서버를 만들것이다.

리엑트 빌드까지 할 것이다.

 

2.헤로쿠 프로젝트올리기

회원가입 후 프로젝트를 git으로 push할 것이다. 물론 처음해본거지만 깃헙과 비슷한것 같다.

깃헙과 연동도 되어 깃헙에 푸쉬하면 자동으로 업데이트된다 ㅋㅋ

 

 

1. json-server 셋팅

 

json-server 설치

npm i json-server

 

server/data.json

{
    "carList": [
      {
        "id": 1,
        "name": "올 뉴 투싼",
        "price": "78000",
        "manufacture": "17년식",
        "imageURL": "/images/car-tucson.png",
        "discount":"20%"
      },
      {
        "id": 2,
        "name": "코나",
        "price": "65000",
        "manufacture": "19년식",
        "imageURL": "/images/car-kona.png",
        "discount":"20%"
      },
      {
        "id": 3,
        "name": "셀토스",
        "price": "69000",
        "manufacture": "18년식",
        "imageURL": "/images/car-seltos.png",
        "discount":"30%"
      },
      {
        "id": 4,
        "name": "쏘렌토",
        "price": "83000",
        "manufacture": "16년식",
        "imageURL": "/images/car-sorento.png",
        "discount":"22%"
      },
      {
        "id": 5,
        "name": "스포티지",
        "price": "74000",
        "manufacture": "21년식",
        "imageURL": "/images/car-spotage.png",
        "discount":"13%"
      },
      {
        "id": 6,
        "name": "쏘렌토",
        "price": "83000",
        "manufacture": "16년식",
        "imageURL": "/images/car-sorento.png",
        "discount":"24%"
      },
      {
        "id": 7,
        "name": "스포티지",
        "price": "74000",
        "manufacture": "21년식",
        "imageURL": "/images/car-spotage.png",
        "discount":"24%"
      }
    ]
  }

 

server/index.js  (express랑 비슷한것같다.)

const jsonServer = require('json-server');
const path = require('path');

const server = jsonServer.create();
const router = jsonServer.router(path.resolve(__dirname + '/data.json'));
const middlewares = jsonServer.defaults({
    static: path.resolve(__dirname + '/../build/')
});

const port = process.env.PORT || 4000;

server.use(middlewares);

server.use(jsonServer.bodyParser);

server.use(router);
server.listen(port, () => {
    console.log('JSON Server is running');
});

react도 빌드해준다.

 

package.json 참고한 블로그에서는 "cross-env NODE_PATH=src" 넣어줘야 빌드가 제대로 된다했는데 나는 그냥 했다.

"build": "cross-env NODE_PATH=src react-scripts build",

react 빌드명령어, 서버실행명령어

npm run build
node server

react를 실행하고 서버도 잘 실행된다면 1차 성공.

 

start 명령어에는 노드서버를 실행하는 명령어를 넣어준다.

로컬에서 start할 명령어는 다른 명령어로 하나 만들어준다.

나는 "cross-env NODE_PATH=src" 이건 하나도 안붙혔다..ㅋㅋ 청개구리

"scripts": {
    "start": "node server",
    "start:dev": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "cross-env NODE_PATH=src npm run build"
  },

start명령어에 서버실행 명령어를 넣은 이유는 헤로쿠에 프로젝트를 올리면 자동으로 npm start 명령어가 실행된다.

옵션인 것 같다. 옵션별로 나중에 돈도 받는것 같은데 일단 무료이다.

그럼 헤로쿠에 프로젝트를 올리면 빌드된 리엑트는 프론트에 출력되고 서버는 실행된다.

 

2.헤로쿠에 프로젝트올리기

아래 공식홈에 가서 설치하고 온다. 나는 MAC이다.

아참 회원가입도 하고온다 ㅋㅋ

https://devcenter.heroku.com/articles/heroku-cli

The Heroku CLI | Heroku Dev Center

 

설치되었으면 버전체크해서 설치되었는지 확인

heroku -v

설치되었다면 로그인한다. 명령어 입력후 아무키나 누르면 브라우저열리면서 로그인된다.

heroku login

git commit을 해준다. 나는 이프로젝트로 깃헙페이지에 먼저 올렸어서 remote가 깃헙에도 연결되어있었다.

확인 한번 하면 좋을듯 하다.

git init
git add .
git commit -am'initial commit'

git remote -v

저장소를 만들고 마스터로 푸쉬한다.

heroku create <프로젝트명> # 프로젝트명을 공백으로 하시면 이름이 자동으로 랜덤설정 됩니다.
heroku config:set NPM_CONFIG_PRODUCTION=false # devDependency 도 설치하게 설정합니다
git push heroku master

헤로쿠는 .env파일을 따로 홈페이지 저장소에서 설정해주어야 한다고한다.

난 중요한 내용은 없어서 그냥 넘어갔다.

 

프로젝트가 잘올라갔다면 헤로쿠에서 깃헙처럼 확인가능하다.

푸쉬하면 빌드하는것도 깃헙액션처럼 나온다.

오른쪽상단에 오픈앱을 누르면 홈페이지가 열린다.

난 올리고나서 이거저거 수정을 많이했다 ㅋㅋㅋ 한번 푸쉬할때마다 버전이 1씩올라간다..ㅋㅋ..

서버가 잘열리는지 확인하려면 주소/라우팅으로 확인해보자.

나는 처음에 gh-pages로 배포했어서 고쳐줄게 은근 많았다.