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

배포 과정에서 많은 에러를 마주했다...

잊지 않기 위해 기록 남기기...ㅠㅠ

 

Heroku에 db.json 배포하기

---

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

---

https://dashboard.heroku.com/

 

 

2.  src 제일 밖에 db.json으로 데이터를 저장한다.

---

원래 json 파일을 여러 개로 나눠놨었는데 여러 개일 경우를 하는 방법을 몰라 db.json파일에 하나로 묶어주었다.

 

 

3. server.ts 

---

scr 밖에 server.ts파일을 만들어준다.

여기서 중요한 건 db.json파일 경로와 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;
// const port = process.env.PORT || 3010;
console.log('process.env.PORT', process.env.PORT)
server.use(middlewares);

server.use(jsonServer.bodyParser);

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

 

3. Procfile

---

이 부분 때문에 계속 배포가 되지 않았다. 원래 server.ts였는데 

아무래도 Typescript도 컴파일 후에는 js라서 그런지 js로 해주니 배포가 잘 되었다.

web:node server.js

 

추가 사항: .env

---

만약. evn 파일이 있다면:

1. Heroku 사이트로 이동

2. 프로젝트 클릭

3. Settings안에 Config Vars에서 설정을 해주면 된다.

 

 

Deploy

---

git에 변경했던 내용 등록하는 부분이다.

git add .

git 소스 커밋

git commit -am "메모"

소스 반영 - 빌드까지 알아서 척척척해서 배포까지 됩니다

git push heroku main

 

추가 명령어 & 에러

---

배포는 되지 않고  'Application Error'이 뜰경우 확인해야 할 사항:

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

2. 서비스 로그 보는 방법이다. 오류 메시지를 디테일하게 볼 수 있게 해 준다.

heroku logs --tail

 

서비스 강제 종료

heroku ps:scale web=0

서비스 시작

heroku ps:scale web=1

서비스 재시작

heroku restart

서비스 로그 보는 방법입니다. 오류 나면 정말 자주 들어가 보게 됩니다

heroku logs --tail

 

Heroku로 배포된 링크로 들어갔을 때 데이터가 잘 뜬다면 프로젝트에서 localhost로 되어있는 부분에 

Heroku로 배포받은 링크를 넣어주면 된다.

 

 

Vercel로 배포

---

Vercel로 배포하는 과정에서 Node 버전 에러가 났다.

노드 버전을 아래와 같이 바꿔주니 에러가 해결되었다.

"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