[Glitch / vercel] json-server 배포하기

json-server 레포 생성

먼저 깃헙에서 json-server를 배포할 레포지토리를 생성한다. 

 

 

이름은 auth-json-server라고 지었다.

 

그러고 레포를 vscode로 열고 아래와 같이 셋팅을 시작한다.

 

json-server 셋팅

nodejs 프로젝트로 만들어지고, package.json 파일이 생성된다.

npm init -y

 

 

루트 경로에 server.js 파일을 생성한 후 아래의 내용을 넣는다.

// server.js
const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("db.json");
const middlewares = jsonServer.defaults();

server.use(middlewares);
server.use(router);
server.listen(3000, () => {
  console.log("JSON Server is running");
});

 

 

db.json 파일을 생성한다.

{
  "letters": []
}

 

package.json 에 아래 내용을 추가한다.

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

  "devDependencies": {
    "json-server": "^0.17.4"
  },
}

 

 

그리고 제일 중요한 건 devDependencies 이 부분이다.

이게 없어서 배포했을 때 계속 json-server가 제대로 실행되지 않았다...

 

ㅜㅜ

저게 없어서 그런지 모르고 json-server 프로젝트와 react 프로젝트에 둘 다 db.json 이 있어서 그런가 싶어서 react 프로젝트에 gitignore에 db.json도 추가해서 깃에 올라가지 않게도 해보고...

react 프로젝트에 .env 설정도 바꿔보고 했는데 해결되지 않았다... 저게 없어서 그런 것이었다....

 

 

Glitch에 배포

오른쪽 상단에 New project - Import from GitHub을 누른다.

 

 

 

깃헙에서 json-server 레포지토리의 주소를 복사해 넣어준다.

 

 

그럼 대시보드에서 추가한 프로젝트를 볼 수 있다.

상세에 들어가서 오른쪽 상단에 있는 Share 버튼 클릭 후 Live site 주소를 복사해서 vercel 환경변수에 추가한다.

 

 

vercel 환경변수 수정

Settings - Environment Variables에서 복사한 값을 넣어준다.

키는 REACT_APP으로 시작해야 react에서 적용된다.

나는 키 값으로 REACT_APP_JSON_SERVER_URL 넣었다. 

 

 

환경변수를 변경하면 재배포를 해야 반영이 된다.

Deployments에서 Redeploy를 눌러서 재배포한다.

 

 

그럼 끝!