[ React ] Json server을 사용한 Heroku & Vercel로 배포

웹 애플리케이션을 개발하다 보면 간단한 백엔드가 필요할 때가 있습니다. 이때, 간단한 JSON 파일을 데이터베이스처럼 활용할 수 있는 JSON Server와 이를 Heroku 및 Vercel에 배포하는 방법을 사용했습니다.

 

Heroku에 db.json 배포하기

---

먼저, Heroku에 가입한 후 새로운 프로젝트를 생성합니다. Heroku는 무료로 제공되는 클라우드 플랫폼으로, 간단한 프로젝트를 배포하기에 적합합니다.

 

1. Heroku에 가입하고 새로운 프로젝트를 만든다.

---

https://dashboard.heroku.com/

 

 

2.  데이터 저장용 db.json 파일 생성

---

루트 디렉터리(src 밖)에 db.json 파일을 생성해 데이터를 저장합니다. 예전에는 여러 개의 JSON 파일로 데이터를 나눠 저장했지만, 하나의 db.json 파일에 모든 데이터를 통합하였습니다. 만약 여러 JSON 파일을 사용해야 할 경우에는 추가적인 설정이 필요합니다.

 

 

3. server.ts 파일 설정

---

프로젝트의 루트 디렉터리(src 밖)에 server.ts 파일을 생성합니다. 중요한 점은 db.json 파일의 경로와 사용할 포트 번호를 정확히 설정하는 것입니다. (저는 포트 번호로 3010을 사용하였습니다.)

const jsonServer = require('json-server');
const path = require('path');

const server = jsonServer.create();
const router = jsonServer.router(path.resolve(__dirname + '/db.json'));
const middlewares = jsonServer.defaults({
    static: path.resolve(__dirname + '/../build/')
});

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

server.use(middlewares);
server.use(jsonServer.bodyParser);
server.use(router);

server.listen(port, () => {
    console.log('JSON Server is running');
});

 

 

4. Procfile 설정

---

Heroku 배포 과정에서 계속 문제가 발생했는데, 그 원인은 Procfile 설정에 있었습니다. 원래는 server.ts 파일을 실행하려 했으나, Heroku는 TypeScript가 컴파일된 JavaScript 파일을 실행하기 때문에 Procfile에 다음과 같이 설정해야 배포에 성공합니다.

web:node server.js

 

 

5. 환경 변수 설정 (.env 파일)

---

환경 변수를 사용하는 경우, Heroku에서 이를 설정하는 방법은 다음과 같습니다.

 

1. Heroku 사이트로 이동

2. 프로젝트 클릭

3. Settings 탭에서 Config Vars 항목에서 환경 변수를 설정

 

 

6. Deploy: Heroku 배포하기

---

이제 Heroku에 배포할 준비가 되었습니다. 아래 명령어를 사용하여 변경된 내용을 Git에 반영하고 Heroku로 배포합니다.

git add .

git commit -am "메모"

git push heroku main

 

 

추가 명령어 & 에러

---

배포 중 Application Error가 발생하는 경우, 다음 사항을 확인해야 합니다:

 

1. Heroku에 로그인이 되어 있는지 확인

2. Heroku 서비스 로그를 확인하여 에러 원인을 파악

heroku logs --tail

 

 

Heroku 서비스 관리 명령어

---

서비스 강제 종료

heroku ps:scale web=0

서비스 시작

heroku ps:scale web=1

서비스 재시작

heroku restart

서비스 로그 확인

heroku logs --tail

 

배포된 링크로 접속해 데이터가 잘 출력되는지 확인한 후, 프로젝트에서 localhost로 설정된 API 호출 주소를 Heroku로 배포된 링크로 변경해 주면 됩니다.

 

 

Vercel로 배포

---

Vercel을 사용하여 배포하는 과정에서도 몇 가지 설정이 필요합니다. 특히 Node.js 버전 관련 에러가 발생할 수 있습니다. 이런 경우, package.json 파일의 engines 항목에서 Node.js와 npm 버전을 명시해 주면 문제가 해결됩니다.

"engines": {
    "node": "18.x",
    "npm": "8.1.2"
  },

 

 

 

 

참고 사이트

---

https://velog.io/@rmaomina/json-server-Heroku-React-app-deploy

https://redux-advanced.vlpt.us/3/09.html#3-9.%20%EC%B5%9C%EC%A0%81%ED%99%94%20%EB%B0%8F%20%ED%9E%88%EB%A1%9C%EC%BF%A0%EC%97%90%20%EB%94%94%ED%94%8C%EB%A1%9C%EC%9D%B4%ED%95%98%EA%B8%B0