[react]react-Heroku 서버 배포하기/vercel 웹 배포하기

반응형

HEROKU에 가서 회원가입하기

https://www.heroku.com/home

Cloud Application Platform | Heroku

 

로그인 후 create new app 클릭

 

 

나는 movie-server라고 app을 만들었다

Deploy 클릭 

 

 

 

Heroku CL. 클릭해서 다운로드 (설치)

https://devcenter.heroku.com/articles/heroku-cli

The Heroku CLI | Heroku Dev Center

 

 

서버 파일 명을 index.js로 이름 변경/수정해주기

//헤로쿠에서 지정하는게 있다면그걸쓰고 없다면 8080을써라
const port = process.env.PORT || 8080;

 

package.json열어서 script부분 수정하기

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

중요!!!! .gitignore 파일 있는지 확인할것 Heroku에 push하기전에 파일이 있어야함

 

배포하기

 

cmd명령창 열기

heroku --version  입력 하고 설치된지 확인하기

 

올리기전에 자신의 깃허브에 자료들 올려줄것!!!!!

깃허브에 올리고 .git 숨긴폴더 지워주기!!!!!

cmd 창에 입력

$ cd 프로젝트 위치
$ git init
$ git add .
$ git commit -m "heroku deploy"
$ heroku git:remote -a app name
 --> 예시 $ heroku git:remote -a zzang9ha

$ git push heroku main

Heroku 홈페이지 Deploy 에도 입력해야할 명령어들 있음

 

Heroku에 올리는 중~~~~~~~~~

 

완료 후 open app 클릭

 

밑에 이미지 처럼 cannot Get 라고 뜨면 제대로 올린거다

그리고 서버 파일에 get요청으로 조회한 path값 주소창 뒤에 입력해주면 데이터가 출력된다

내가 만든 서버

 

조회된 데이터가 출력된다

여기까지 react-Heroku 서버배포 끝났고

 

웹 배포하기

vercel 가입하기

https://vercel.com/

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

 

 

깃허브로 로그인 가능하면 깃허브 로그인 진행해주시고

나는 깃허브 로그인 시도 해보았지만 서버에서 block상태여서 

바로 밑 이메일로 가입해서 로그인후 내 깃허브와 연동시켰다

 

가입 후 자신의 github연동시킨 후   add new project 클릭해준다

그리고 아까 Heroku 배포한 주소를 자신의 클라이언트에 사용된 URL에 적용 시킨다

 

주소 복사

내 클라이언트에 사용된 서버주소 변경

클라이언트에 오류없는지 npm start해보자!!!!!!!

그리고 다시 vercel홈페이지 열어서  자신의 클라이언트 import 클릭 

 

다음 Deploy 클릭

완료될때까지 기다리자!!!!

웹 배포 완료!!!!!!!!!!!!! 정말 ㅜㅜ  눙물이 ㅜㅜ

클라이언트 수정할거 있으면 수정하고 다시 자신의 깃허브에 올려주면 vercel에서 자동으로 업데이트 시켜서 배포해준다

구구구굿우우우우웅ㅅㅅ!!!!!!!!!