Node backend, React frontend로 개발한 프로젝트에서
Node를 Heroku에서 배포해 보자
① Heroku 계정 생성
② Node package.json 파일 수정
...
"scripts": {
"start": "node index.js" // 추가
},
...
③ Heroku에서 create new app
⑴ 터미널에서 앱 생성
heroku create [app 이름]
⑵ Heroku 사이트에서 앱 생성
④ Heroku 로그인
heroku login
프로젝트 폴더 위치에서 login 명렁어를 치면 브라우저가 뜬다
계정 입력 후 로그인을 하고 아래처럼 logged in이 뜨면 로그인 완료
⑤ app 연결
git init
heroku git:remote -a [app 이름]
⑥ git add, commit, push, 배포하기
git add .
git commit -am "first commit"
git push heroku master
⑦ 배포 확인
https://[app 이름].herokuapp.com/
위 주소로 들어가면 배포가 잘 된 것을 확인할 수 있다
그리고 React에서 배포한 Node에서 데이터를 가져오기 위해서는
[React 프로젝트 폴더]/package.json 파일에서 proxy를 수정하면 된다
"proxy": "https://[app 이름].herokuapp.com/",
axios로 잘 가져오는 것을 console에 찍어서 확인할 수 있다
@ 에러 해결하기
⑴ Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
프로젝트명/index.js 수정
기존 코드
app.listen(5000, () => {
console.log("Server is running on port 5000.");
});
수정한 코드
app.listen(process.env.PORT || 5000);
⑵ invalid ELF header
프로젝트에서 node_modules 폴더 삭제 ⭐️
rm -rf node_modules/
배포할 때 node_modules 폴더가 없는지 꼭 확인하자
있으면 삭제 후 배포한다
'Deploy' 카테고리의 다른 글
[#. SpringBoot] IntelliJ에서 SpringBoot 실행 시, finished with non-zero exit value 에러 해결 (0) | 2021.04.29 |
---|---|
[#. Netlify] Netlify로 정적인 static frontend 코드 웹에 배포하기 (0) | 2020.12.18 |