server-json 포함시켜 헤로쿠앱으로 리액트 프로젝트 배포하기

db처럼 사용 하는 db.json 파일을 server-json 라이브러리를 통해 작업하였다.

배포까지 하려면 이 가상의 db도 완벽하게 작동을 시킬수 있어야했다.

헤로쿠앱을 통한 배포가 이를 해결해 주었다.

 

https://devcenter.heroku.com/

Heroku Dev Center

 

첫 이용시 홈페이지에서 회원가입후, (heroku CLI도 설치도 해야함 홈페이지가서 확인)

터미널을 통해 명령어 입력후 로그인을 한다.

heroku login

 

해당 프로젝트 git repo와 헤로쿠앱과 연결을 시키려면 일단

헤로쿠앱을 생성시킨다.

명령어로도 생성시킬수 있으나 홈페이지 들어가서 new app누르고 편하게 생성가능.

배포될 도메인도 등록이된다.

 

git 아이콘 크게있는거 누르고 내 git repo랑 연동까지 해준다.

 

그다음,

settings 들어가서 빌드팩을 추가해줘야한다.

https://github.com/mars/create-react-app-buildpack 이 주소 복붙하여 넣어주면 된다.

 

https://devcenter.heroku.com/articles/git

Deploying with Git | Heroku Dev Center

헤로쿠 배포시 필요한 명령어들 참고해서 배포하면 된다..

 

그런데 여기서!! 

server-json 포함을 시키려면 약간의 소스코드 변경이 필요했다.

 

package.json에 scripts 부분에 이렇게 수정.

 "scripts": {
    "start": "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 || 5000;

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

server.use(router);

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

 

기존엔 로컬호스트/db 이렇게 사용했는데, 아시다시피 이건 로컬을 통해 작업시에 사용한 주소였다.

헤로쿠앱 주소로 다시 변경해서 여기서 db를 꺼내올수 있도록 수정.

  useEffect(() => {
    axios.get("https://💚💚💚💚💚.herokuapp.com/db").then((data) => {
      setStores(data.data.requests);
    });
  }, []);

 

 

** git push heroku master 한다음 빌드시 자꾸 오류가 나서 배포 진행이 안됐었는데,

이거는 package-lock.json yarn.lock 이 두 파일때문에 안됐었다. 얘네들 지우고 다시

푸쉬하니까 배포완료할수 있었다. **