Json-server + React , heroku로 배포하는 법

Intro

• React 프로젝트에, json-server를 포함하여 heroku로 배포하는 법에 대해 내가 겪은 ... 좌충우돌 후기와 성공 방법에 대해 정리하고자 이 시리즈를 쓰게 되었습니다.

json-server 란?

json-server는 json 파일을 사용하여 간단하게 REST API Mock server를 구축할 수 있는 툴입니다.

heroku 란?

서버를 대체할 수 있는 클라우드 플랫폼으로, 간단하게 무료로 호스팅이 가능합니다.
카드 등록시 월 1000시간의 무료 시간을 제공해줍니다.

json-server를 포함하여 배포하는 방법

• 전체적인 참조는 https://redux-advanced.vlpt.us/3/09.html 를 바탕으로 진행했습니다. 저는 링크의 package.json 수정까지 마치고 난 뒤의 저의 추가적인 수정사항부터 설명하겠습니다.

• 위의 링크대로 잘 따라오셨다면 전체 디렉토리 구조는 다음과 같습니다. (React project 기준)

client
ㄴ bulid
public
server
ㄴ db.json
ㄴ index.js
src
ㄴ App.js
ㄴ index.css
ㄴ index.js 

• heroku CLI 로 올리기 이전, 제가 추가적으로 했던 수정사항은 본인의 코드에서 json-server를 이용해 fetch 해주는 부분이 있다면, 아래 코드블럭과 같이 url 부분을 발급받은 heroku domain 으로 수정해 주는 것 입니다!

useEffect(() => {
    fetch("http://sample.herokuapp.com/api/products")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setProducts(data);
      });
  }, []);

• 앞서 server/index.js에서 json-server의 key로의 접근을 아래와 같이 정의했습니다. 따라서 위 코드블럭과 같이 도메인/api/key의 형태로 접근해주세요!

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

다음과 같이 잘 마쳤다면, heroku CLI로의 배포 혹은 heroku 에서 제공하는 github repository로부터의 배포도 잘 작동될것 입니다! 😊