MERN 기본파일 만들기 - 8) heroku이용해서 웹 배포하기

여태까지 server 파트를 구현했는데, 

client파트와 구분하기 위해서 만들었던 내용들을 모두 

server안으로 이동시켜준다.

 

 

 

client폴더를 생성해주고 그 안에 react를 실행해 줄 것이다.

 

우선 다음의 사이트에 가서 헤로쿠를 다운받는다.

 

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

The Heroku CLI | Heroku Dev Center

그 다음 terminal 창에 heroku login을 치고 로그인 해준다. 

그 다음 heroku create를 해준다.

 

 

 

헤로쿠는 git을 기반으로 하므로 

생성된 주소에 remote add를 한다. 

 

 

 

그 다음 index.js 로 가서 

기존에 app.listen(5000)포트로 설정해 놓은 것을 

production모드라면 heroku한테 받으면 그 포트로 나가고, 아니라면 5000으로 나가게끔 설정한다. 

 

 

//헤로쿠한테 받으면 이 포트로 아니면 5000포트로 나간다.
const port = process.env.PORT||5000
app.listen(port, ()=>{
    console.log(`Server Running at ${port}`)
});

 

package.json으로 가서 engine파트에 우리가 지금 사용하고 있는 node -v 과 npm -v을 입력해준다.

 

 

 

헤로쿠한테 가서  우리가 prod 모드일 때 사용하는 mongoURI가 무엇인지 알려주어야한다. 

(prod.js)

module.exports = {
    mongoURI :process.env.MONGO_URI
}

 

 

헤로쿠 웹사이트에가서 로그인 한 후, 

우리가 생성한 저장소의 설정에 reveal config vars를 클릭한다. 

 

 

여기에 우리가 설정한 key 와 값(mongo_URI와 mongodb 링크)를 넣어준다.

 

 

 

깃을 커밋하고 푸시한 후에 git push heroku master를 추가로 실행해준다. 

 

http://~heroku.app의 형식이 나와서 클릭해서 이동한다면 성공한 것이다. 

 

 

 

index.js에 app.get("/", ~)의 형식으로 제일먼저 나오는 홈페이지를 나타내주고

git add .

git commit ~

git push origin master

git push heroku master

를 실행한 후에 

헤로쿠앱사이트에 들어갔을때 우리가 원하는 홈페이지가 나타날 것이다.