✏️ json-server 배포하기(with Render)

 

 

json-server로 배포하는 방법은 여러가지 있지만

나는 Render을 사용하여 배포를 진행해보기로 했다.

 

json-server를 활용해서 배포를 하려면,

레포를 별도로 생성해야하는데 지원해주는 다른 타 사이트들은 내 레포지토리를 `Public`으로 설정해야했다🥲

json-server레포는 `Private`로 진행하고 싶었는데 Render 사이트는 레포지토리를 Private로 설정해도 접속이 가능하다!

 

 

---

 

✨ 준비할 내용

클라이언트는 `vercel`로 배포를 진행했다 (하던대로 진행)

json-server용 레포지토리가 필요하다 (✨NEW)

 

즉, 클라이언트용, 서버용 두개의 레포지토리가 필요하다.

 

 

 

 

❌ 주의사항

Render로 배포를 진행하려면 json-server서버 레포지토리를 이전 버전의 json-server을 설치해야 한다. (최신버전X)
클라이언트는 json-server을 최신버전으로 깔고 서버쪽은 이전버전으로 설치를 해서 배포를 해봤는데 안됐었다.
그래서 클라이언트쪽도 이전버전으로 다운그레이드 해서 배포를 진행했는데, 둘다 버전을 맞춰서 진행해주었지만
정확하게는 다시 테스트를 해봐야 할 것 같다🥲
어차피 서버에서 배포한 링크를 사용하는데 클라이언트에서는 상관없지 않나 라는 생각이...(?)
왜 안되는지는 정확히 알 수 없었다 (...)

 

 

 

 

 

순서

클라이언트는 이미 vercel로 배포했다고 가정했다. (이부분은 생략)

 

 

먼저 서버용 레포지토리를 생성한다. Private으로 만들어도 되고, Public으로 만들어도 된다. (장점은 Private로도 배포가 가능함)

만들고 나서 로컬에 올릴 폴더를 생성해준다.

폴더로 들어가서 터미널에 아래의 명령어를 입력해준다.

npm init -y

 

 

 

 

 

 

명령어를 입력하면 폴더안에 `package.json`이 생성된다.

 

 

 

 

index.js 파일 생성, .env파일 생성, .gitignore 생성, db.json 생성

 

같은 루트에 .env파일을 생성해주고,

.gitignore을 생성하여 modules 파일이 안올라가게 만들어준다.

또 package.json과 같은경로에 `index.js`를 생성해주었다. (이름은 상관없음)

편한대로 `server.js`라고 지정해 주어도 된다.

`db.js`에는 내가 클라이언트에서 진행했던 내용 그대로 복사해서 붙여넣는다.

 

 

 

 

 

 

index.js파일

const jsonServer = require("json-server");

const server = jsonServer.create();
const router = jsonServer.router("db.json");
const middlewares = jsonServer.defaults();

const port = process.env.PORT || 4000;

server.use(middlewares);

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

 

그대로 붙여넣고 진행한다.

 

 

 

 

 

 

db.js 예시

{
  "todos": [
    {
      "id": "9e5f4aa1-27e2-430d-97b1-fd85ef65ca68",
      "content": "할일1",
      "isDone": false
    },
    {
      "id": "40646013-49da-4a94-9ddc-3ee32ebdb39d",
      "content": "할일2",
      "isDone": true
    }
  ]
}

 

예시로 투두리스트를 가지고 왔다.

클라이언트에서 진행했던 목업 데이터를 넣어준다.

 

 

 

 

 

.env 파일

PORT = 4000

 

나는 4000포트로 열 생각이니 4000으로 지정해 주었다.

 

 

 

 

 

.gitignore 파일

node_modules/

.env

 

 

 

 

 

 

 

여기까지 했으면 이제 json-server을 설치해준다. (이전버전)

npm i json-server@^0.17.3

 

설치하면 같은경로에 node_modules 파일이 생성되는것을 알 수 있다.

 

 

 

 

npx json-server --watch db.json

 

두번째로 이 명령어도 같이 넣어준다.

 

 

 

 

 

 

 

위에 두개의 명령어를 입력하면 터미널에는 이렇게 잘 나와야 성공이다.

 

 

 

 

 

 

 

 

 

다시 정리해보면 폴더 안에는 이렇게 구성되어있다.

 

 

 

 

 

 

 

 

 

준비는 다 됐다! package.json를 고쳐보자

 

그리고 다시 package.json을 클릭해준다.

 

 

 

 

 

 

package.json

{
  "name": "json-server",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "json-server": "^0.17.4"
  }
}

 

내가 추가한 내용들인데, 여기서 바꿔야 할 내용은

 

 

 

 "main": "index.js"

 

내가 index.js로 목업 데이터 넣은 파일명을 넣어준다.

만약, server.js로 했으면 index.js대신 server.js로 바꿔줘야 한다.

 

 

 

 

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

 

스크립트 안에 있는 `start`의 내용도 바꿔줘야한다.

내가 index.js로 파일을 생성했으니, start부분도 node index.js 로 바꿔주었다.

 

 

 

 

 

그리고 터미널에 node index.js 명령어를 입력해서 아래와 같은 내용이 잘 뜨는지 확인 해야한다.

 

잘 작동되는 것을 확인하고 json-server을 열어주었으니

나는 4000포트로 지정한 localhost:4000으로 들어가서 확인해준다.

 

 

 

 

 

http://localhost:4000포트로 들어가서 잘 나오는지 확인

 

이렇게 페이지가 뜨면 제대로 된 내용이다.

그리고 json-server용 깃 레포지토리에 현재 내용을 올려준다.

 

 

 

 

 

Render에 배포하기

Render 사이트에 들어가서 배포를 진행해주자

Render를 배포하는법은 이전 포스팅에 작성해서 생략했다.

 

 

 

이전 포스팅 링크

✏️ Render로 배포하기(Client, Server)

 

 

 

 

 

 

 

Render에 배포를 진행해줬고, 왼쪽위에 배포한 링크를 타고 들어가본다.

 

 

 

 

 

 

배포 url 결과

 

 

아까 봤던 같은 내용이 떠야 제대로 배포가 된것이다.

 

 

 

 

 

 

잘못된 실패 예시

 

정상적으로 `Deployed`가 되었어도, 현재 이렇게 뜨면 제대로 배포가 안 된 상황이다.

위에 있는 이미지처럼 저렇게 떠야 정상적으로 배포가 된 것이다.

다시 위로 올려서 내가 경로를 제대로 입력했는지, 제대로 빠진것이 없는지 확인해준다.

 

 

 

 

 

 

서버 배포 끝! 클라이언트 배포한 링크로 바꿔주기

클라이언트에서 json-server 링크를 배포한 링크로 바꿔준다.

나는 따로 .env파일에 경로를 넣어줬기 때문에 현재 .env파일에 들어가서 경로를 바꿔주었다.

 

VITE_REACT_APP_SERVER_URL = "배포한 링크"

 

그리고나서 로컬환경에서 켜봐도 이상이 없으면 정상적으로 배포가 된 것이다.

 

 

 

그리고 마찬가지로 환경변수를 `vercel` 배포 사이트에 가서 추가해준다.

이미 배포를 진행해뒀으면, 코드는 따로 건드릴 일이 없다.

vercel에서 환경변수를 넣어주고, 다시 `Deploy` 해준다.

 

 

 

 

다시 내가 vercel에서 배포한 링크를 타고 들어가면, 잘 작동되는 것을 볼 수 있다.

단점은 무료서버라 오래 걸려서 조금 기다려야 한다.. 😂

 

 

 

간단하게 만든 투두리스트 React 버전도 json-server로 배포 완료! 👍

생각보다 로딩시간이 오래걸려서, 로딩창을 조금 개선해서 다시 올려야겠다...ㅎ

 

 

 

---

 

 

마치며

최대한 글로 풀어서 작성해 보았는데, 이 내용마저 어렵다면 유튜브를 참고해도 좋을 것 같다.

 

 

 

 

 

 

이전 버전으로 설치해야하는 오류내용..

Again "json-server module not found" · Issue #1500 · typicode/json-server