Json-server 배포 방법

기록용으로 남겨놓습니다

1. 원하는 곳에 json server 배포를 위한 파일을 만듬

mkdir [폴더명]

2. 생성한 파일로 이동

cd [폴더명]

3. node.js 프로젝트 시작(package.json 파일 생성)

npm iinit -y

4. vscoe로 프로젝트 열기

code .

5. 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");
});

6. db.json 파일 생성 후 본인의 원래 db 붙여넣기(이후 glitch에서도 가능)

{
	"posts":[]
}

7. package.json 파일에 scripts 설정을 아래 내용으로 변경

{
	"scripts": {
    "start": "node server.js"![](https://velog.velcdn.com/images/derek0k/post/22c0967a-36f1-45f9-915f-bb33e2cc24af/image.png)

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

8. Github에 json server를 위한 repository 생성 후 업로드

9. Glitch 회원 가입한다

10. 내 아이콘 옆에 New project 버튼 클릭 후 제일 밑에 위치한 Import from Github 버튼을 클릭한다
    

11. 나타나는 confirm창에 Github에서 (8)과정에서 저장한 repository의 주소를 입력 후 확인 버튼을 클릭

12. 확인을 누르면 아래와 같은 페이지 생성된다. 우측 상단의 share 버튼을 누르자
    

13. share 버튼을 눌렀을때 나타나는 창이다. 하단에 위치한 Live site에 있는 링크를 복사한다

14. vercel로 이동하여 우측에 Add New 버튼 클릭

15. 배포하고자 하는 레포지토리를 불러온 후 주황색 박스 부분의 value에 Glitch에서 복사한 Live site의 링크를 붙여 넣어주고 key 부분에는 본인 프로젝트의 .env파일에 환경변수 처리한 key(필자는 VITTE_APP_SERVER_URL로 설정해놓음)을 입력한 후 Deploy버튼을 눌러주면 배포 완료