Heroku로 react 프로젝트 배포하기 (json-server 포함)

json-server가 프로덕션 전용이 아닌 것을 알지만, 백엔드 서버가 없기 때문에.. 프로젝트 배포 시 json-server도 같이 배포하기 위해 여러 배포 서비스를 찾아봤다. 그전에 가장 쉽게 접근 가능한 gh-pages으로 배포해봤는데 역시나 json-server는 배포되지 않았다..

 

그래서 이번에는 heroku를 사용해보았다.

 

 

1. json-server가 없는 경우 / 정적사이트 배포

 

create-react-app으로 만들어진 react 프로젝트 배포 방법을 찾았다. heroku settings 탭에서 BuilPack 에 mars/create-react-app build pack을 추가해주어야 배포 후 정상 작동한다. (아래 링크 주소를 복붙 하면 된다.)

 

 

mars/create-react-app-buildpack

 

 위 주소의 빌드팩을 추가해주면 이제 정상적으로 배포가 완료된다.

 

 

 

**참고자료**

 

 

 

---

 

 

**push 하기**

- heroku는 netlify와 달리 자동으로 배포되지는 않는 듯하다. (자동 배포 방법이 있긴 함)

 

git commit -m ""
git push origin master 
git push heroku master 

 

 

---

2. json-server가 있는 경우 / json-server 포함하여 같이 배포

 

위 방법대로 진행한 후 배포가 정상적으로 된 줄 알았다. 그러나 위 방법은 json-server가 없는 정적 리액트 프로젝트일 때 정상적으로 배포가 진행되겠지만, 나는 json-server를 포함하여 배포하길 원했기 때문에 다시 수정해야 했다.

 

아래 두 링크를 참고하여 코드를 다시 수정했다. 

 

//Procfile
web: node server.js

 

//server.js

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("./db.json");
const middlewares = jsonServer.defaults({
  static: "./build",
});
const port = process.env.PORT || 4000;

server.use(middlewares);
server.use(
  jsonServer.rewriter({
    "/api/*": "/$1",
  })
);

server.use(router);

server.listen(port, () => {
  console.log("server is running");
});

 

//package.json

  "scripts": {
    "start": "node server.js",
    ...
  },

 

//api.js
export const getComments = async () => {
  const response = await axios.get(
    "https://comments-board.herokuapp.com/api/comments" //heroku주소
  );
  return response.data;
};

 

- api를 받아오는 부분에서 이전에 사용하던 localhost url 대신, 배포된 heroku url을 넣어줘야 데이터를 정상적으로 받아온다.

 

 

**참고자료**

 

 

 

jesperorb/json-server-heroku