[React] Sqlite DB사용, 간단한 웹페이지 만들기[헤로쿠(heroku), vercel] 서버연동

rest란?
"Representational State Transfer" 의 약자
자원의 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든것을 의미
웹의 기존기술과 http 프로토콜을 그대로 활용하여 웹의 장점을 최대한 활용할 수 있는 스타일이다.

 

서버배포 - heroku   
react배포 - vercel

서버는 헤로쿠, 리액트는 vercel로 사용해 모두 인터넷에 올려서 사용한다.

 

헤로쿠 사용전 서버에서의 포트를 변경해준다.

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

헤로쿠에서 지정한 포트가 있다면 그 번호를 사용, 없다면 8080포트를 사용한다.

패키지에 내용을 추가해준다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  }

 

 

 

https://dashboard.heroku.com/

Heroku

회원가입 -> 로그인 후 -> create new app
deploy -> Heroku CLI 설치

명령어(cmd) 
heroku --version // 버전확인

1. heroku login (터미널에서실행)
2. git init
3. heroku git:remote -a name
4. git add . 
5. git commit -m "헤로쿠서버 배포 준비 완료"
6. git push heroku main

 

open app 들어와서 확인(홈페이지)

이까지하면 서버의 업데이트는 완료된다.

이미지나 파일경로같은경우엔 localhost라면 앞에 내용을 사이트주소로 수정해준다.

 

http://vercel.com(깃로그인)

Develop. Preview. Ship. For the best frontend teams – Vercel

client파일을 git에 올려놓고 깃으로 로그인하면 자동으로 연동되어 금방 올릴 수 있지만 본인은 차단되있다고해서.. 다른 주소로 회원가입해서 git을 연동해서 사용을했다.

 

접속해서 New Project 를 들어간 후 올릴 파일을 import한다.

 

 

 

그냥 올려서 배포가 안된다면(40초? 쯤 에러나던데..), BUILD COMMAND의 내용을 수정해주면된다.

 CI=false react-scripts build

수정하고 난 후 배포를 시작하면 어느정도 시간이 걸린후에 배포가 완료되면 꽃가루를 맞을 수 있다.

짜작 고생하셨습니다.