[React] Heroku에 React + Express 서비스 자동 배포하기

개발 하기 전에 배포를 먼저 해서 얻을 수 있는 이점

내가 개발을 했을 때 내 로컬에서는 잘 동작하던게 실제로 배포를 하면 제대로 동작하지 않는 경우가 많음

개발을 다 하고 나서 배포를 하면 어떤 코드때문에 배포 했을 때 문제가 생기는지 늦게 알게 됨

그런데 매일매일 개발 끝나고 바로 배포를 하여 실서버에서 확인한다면 실서버에서 문제가 되는 코드를 훨씬 빨리 파악하고 수정할 수 있음

개발이 끝날때마다 매일 배포하면 너무 번거로우니까 개발 끝나면 자동으로 배포를 할수있게 만들기

 

 

 

서버만들기

 

1. 프론트엔드, 백엔드가 있어야 하므로 client, server 폴더 만들기

2. git 레파지토리 만들기 (git init) *깃으로 관리하는 저장소

3. client 폴더에 리액트 설치하기 (npx create-react-app .)

4. server 폴더에 npm install 후 npm install express

5. app.js에 express 코드 작성

경로는 bulid 폴더 안에 index.html

 

6. node app.js 로 서버 실행시키기

모듈 안깔아졌다고 오류떠서

npm install express 다시 했더니 

 

성공

 

---

Heroku

 

헤로쿠에 깃허브 연동하고 연결했는데 에러뜨는 경우

 

실수1

server의 package.json의

"start" : "node app.js" 에서 node 작성 안함

실수2

root의 package.json의

"server-build": 에서 경로 입력시 cd랑 ../ 사이에 띄어쓰기 안함 

 

수정하고 만들어진 경로 들어가면 배포완료!!

https://hong-dang-moo.herokuapp.com/