[React] 개인프로젝트 - MBTI 테스트 만들기(2) json-server 배포

json-server를 사용 시, vercel로 배포하게 되면 리액트 앱이 json-server도 함께 배포되는 것이 아니다.
json-server는 별도로 배포 후에 해당 링크를 프로젝트 내부에 기존에 적혀있던 http://localhost:3000를 바꿔주면 된다.

json-server 배포방법

: Glitch를 사용하여 배포

그 전에,
1) 바탕화면에서 터미널을 실행시키고 json-server 배포를 위한 폴더 생성

mkdir [폴더명]

2) 폴더안으로 이동

cd [폴더명]

3) nodejs 프로젝트 시작합니다. (package.json 파일 생성)

npm init -y

4) vscode 로 프로젝트 열기

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 파일 만들기

{
  "testResults": []
}

7) package.json 파일에 scripts 설정

{
	"scripts": {
    "start": "node server.js"
  },
	"devDependencies": {
    "json-server": "^0.17.4"
  }
}

8) 1-7까지 완료하면 총 3개의 파일이 있어야 함(db.json, package.json, server.js)
9) json server 배포를 위한 새로운 github repository 를 만들고 1~8단계에서 완성한 코드를 push
10) Glitch 회원가입 및 프로젝트 import 진행

• 홈화면 우측상단헤더에 New Project → import from Github
• 상세화면 우측상단헤더 Share → Live site 주소 (배포된 서버 API_URL)

---

결과

기존 코드

바꾼 코드

API_URL에서 /testResults 앞부분을 json-server 배포링크로 바꿔주었다.