[heroku] nodejs로 만든 페이지 (Heroku)헤로쿠에 올리기

 

* 우선 express란 무엇인가?

Express.js는 nodejs의 핵심 모듈로 http 와 connect컴포넌트(?) 를 기반으로 하는 웹 프레임워크이다.

 

일단 큰 맥락으로 내가 하고 싶었던 건 nodejs를 이용해 heroku라는 클라우드 서비스에 배포하는 것.

(로컬 서버가 아니라 외부에 공유가 가능하다는 점에서,

단기 프로젝트에 유용하다는 점에서 좋다고 한다. 매월 550시간 가능.

히로쿠를 쓰는 용도는 좀 더 검색을 해볼 것.)

 

 

 

1. 히로쿠에 가입 http://www.heroku.com

Cloud Application Platform | Heroku

2. 깃허브에 가입

(나의 경우 이미 직장에서 쓰고 있는 깃허브 계정 ks*****@hanmail.net 에서 임의의 폴더만 추가했다)

 

 

그리고 MyProject 라는 폴더는 express.js 모듈로 이루어져있다.

 

 

 

로컬 서버에서 보면 이러함

 

 

이제 이 잘 나오는 우궁이 안녕?을 히로쿠에 연결하기 위해서는

 

3. 히로쿠에서 앱 App Name 을 생성한다.

나의 경우 mollangdashboard 라 지정해서 아래와 같은 링크명이 생성됐다.

https://mollangdashboard.herokuapp.com/

Express

 

4. heroku 와 github 계정을 연결

 

 

연동이 끝나면 아래와 같이 디플로이가 됐다며 확인하라고 view 버튼을 주는데 이걸 누르면...

 

 

이 에러에서 진짜 헤어나오질 못했다

 

우궁이 안녕? 이 안 뜨고 어플리케이션 에러가 뜬다. (아직 그 이유는 확인하지 못했음...)

 

해서 수정을 할 때는 파일 수정 후

cmd 창에서 

수정된 것 추가 : git add .

수정된 것 커밋 : git commit -m "bla bla"

커밋한 것 푸쉬(최종 반영) : git push heroku master

 

콘솔 명령어로 반영하였다.

 

 

+ 추가 업데이트

깃과 연동한 소스트리에 수정한 파일이 커밋 대기 목록에 뜨는데 이걸 push 안 해주고 

히로쿠 어플리케이션에서 바로 디플로이 버튼을 누르면 위 에러가 뜬다.

 

 

결과물

 

++ 추가 업데이트 : 리액트 모듈 기반으로 배포된 히로쿠 링크

https://mollang.herokuapp.com/

React App

원리는 같다.

 

# cd 프로젝트 위치
# git init
# git add .
# git commit -m "heroku test"

 

히로쿠 로그인 후 heroku git::remote -a (생성한 히로쿠앱 이름)

 

heroku git:remote -a app name

 

방금 만든 remote repository로 프로젝트 소스코드를 push

 

git push heroku master

 

 

 

 

 

 

참고한 사이트

https://parkdream.tistory.com/96

heroku, Github 연동

https://victorydntmd.tistory.com/112

[Node.js] Heroku로 배포( deploy )하기