[React] Vercel(react) / Glitch(json-server) 배포하기

프로젝트 배포하기

지난 번 react 프로젝트할 때 배포에 끝내 실패했던 게 자꾸 생각나서 다경님과 어제 배포에 도전했고 성공했다!

도움을 주신 정익님...압도적 감사....진짜 많이 배웠습니다...ㅎㅎ

덕분에 왜 배포에 실패했었는지도 알게 되고, 어떤 식으로 배포해야 했는지 깨달았다.

성공적으로 배포하고 글도 잘 써지는 것까지 확인하고 리드미에도 업데이트했다. 이제서야 프로젝트가 끝인 기분...!!

 

 

 

 

 

Glitch 에서 json-server 배포하기

1. json-server repository 생성

https://github.com/jesperorb/json-server-heroku#deploy-to-glitch

GitHub - jesperorb/json-server-heroku: Deploy json-server to Heroku & Glitch & Azure

 

이 깃허브 레퍼지토리에 들어가면 json-server를 배포하는 방법이 여러 개 나와있다. 이 중 우리는 glitch를 이용할 건데,

우선은 json-server를 배포하기 위한 repository를 만들어야 한다.

 

빨간 색 표시된 부분을 눌러 새롭게 repository를 만든다.

우리는 organization을 이용해 프로젝트를 했기 때문에 organization에 새로 만들었다

 

 

2. db.json 변경

굉장히 간단한 방법이다.

생성된 repository에서 db.json 파일만 우리가 만든 프로젝트의 db.json으로 변경하면 된다.

 

3. glitch 사이트 방문 (https://glitch.com/)

로그인을 하고 new project - import from github를 누르면 깃허브 repository 링크를 입력하는 alert 창이 나온다.

그 곳에 이전에 만들었던 링크를 붙여넣기 하면 배포 끝!

 

4. 배포된 json-server 링크 체크하기

Shared Project 버튼 클릭시 사오는 Live site 링크를 복사해서 사용하면 된다.

 

 

 

 

 

 

프로젝트 설정하기

1. env-cmd 설치

• 환경에 따라 다른 변수 혹은 API 주소를 적용해야 하는 경우가 있는데, 이 때 이 패키지를 통해 각 환경에 맞게 자동으로 환경변수를 불러와 적용할 수 있다
• 설치 방법

$ yarn add env-cmd
$ npm install env-cmd --save

 

2. package.json 의 "script" 변경

이런 식으로 변경하면 env-cmd 패키지에서 .env 파일을 찾아서 먼저 실행한 뒤에 react-scripts가 실행된다.

 

3. .env 파일 생성

// .env 파일

RAECT_APP_API = [json-server link]

 

4. 실제로 DB가 통신하는 부분 (우리 프로젝트에서는 redux/modules 부분) 의 localhost를 배포 링크로 변경

 

5. 바뀐 내용까지 최종적으로 commit 하고 push 하면 끝

 

 

 

 

 

 

Vercel 에서 React 프로젝트 배포하기

1. Vercel 로그인 후 new Project 만들기 (https://vercel.com)

2. 배포하려는 repository import 클릭

3. Envrioment Variables 설정

Team Name = .env에서 작성한 상수명 (REACT_APP_API)

Team Slug = 배포한 json-server 링크

 

4. Create 누르면 배포 완료

 

 

 

 

 

 

드디어 배포된 우리 팀 프로젝트

배포된 페이지 바로가기

 

 

 

 

 

 

 

---

드디어 정말 진짜 마지막으로 프로젝트가 마무리되었다.

너무 급해서 env, 그리고 배포 관련 공부를 하나도 못하고 진행했었는데 그 아쉬움을 어제 완전히 풀었다.

 

제대로 배포된걸 다시 보니까 프로젝트를 성공적으로 마무리한 기분 ㅋㅋㅋㅋㅋ

어제 저녁에 했는데 이제서야 정리한다. 혹시 나중에 혼자 프로젝트할 때는 이렇게 헤매지 말고 이걸 보고 다시 해야겠다!