[TIL #36] 인증이 필요한 가계부(2) -json-server 배포

배포 과정이 헷갈려서 정리해놓기
프로젝트에서 json-server를 활용했는데, 배포할때, 리액트 파일은 vercel로 배포하고 json-server는 glich로 따로 배포해야하는데 이 과정이 헷갈렸다.

---

json-server는 --watch db.json --port {{portNumber}} 로 json-server 가 실행하기에 서버 연결하고 주소를 바꿔줘야한다.

1. 원하는 위치에 파일 만들기

mkdir [폴더명]

2. 폴더 이동

cd [폴더명]

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

npm init -y

4. vscode로 넘어가서 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");
});

5. db.json 파일 만들기

{
  "사용할 json경로명": [] 
}

6. package.json 파일에 scripts 설정

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

여기까지 하고 나면 폴더 안에 db.json, package.json, server.js 파일이 있어야 한다.

그리고 이 파일을 깃허브에 연동시켜야하는데,

7. github에서 새로운 repository를 만든다. (Readme 없이 만들어도 됨)

8. 로컬에서 git init 입력

9. git add .
10. git commit -m "커밋메시지"
11. push 단계에서

git branch -M main
git remote add origin 연동할  깃허브주소
git push -u origin main

하면 내 깃허브에 파일 올라간다.

12. 그리고 glich로 가서 로그인 후,

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

13. 내가 임의로 만들어놓았던, 리액트파일에서 json/5300 링크를 배포된 서버 API_URL로 바꿔주면 끝!