본문 바로가기

Deploy

[#. Heroku] Heroku로 Node 배포하기

반응형

 

 

 

 

 

 

Node backend, React frontend로 개발한 프로젝트에서

Node를 Heroku에서 배포해 보자

 

 

 

 

 

 

 

① Heroku 계정 생성

 

heroku.com/

 

Cloud Application Platform | Heroku

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

www.heroku.com

 

 

 

 

 

② 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 폴더가 없는지 꼭 확인하자

있으면 삭제 후 배포한다

 

 

 

 

 

 

 

 

 

반응형