Express로 만든 웹 사이트 heroku에 올리기

학교 졸업 프로젝트로 만들었던 웹 애플리케이션을 heroku 서버에 올려 배포한 과정을 적어보려고 합니다.

먼저, 제가 만든 웹 애플리케이션은 express(node.js)와 mysql로 만든 단순한 형태의 웹사이트입니다.

heroku는 다양한 언어로 작성된 웹 애플리케이션을 배포할 수 있도록 서버를 제공해주는 웹호스팅 서비스입니다.

heroku를 이용하기 위해서는 우선 회원가입을 하고 create new app을 클릭해 heroku 계정 상의 웹 애플리케이션이 저장될 공간을 생성합니다.

생성을 완료했으면 cmd 창에서 heroku 명령어를 사용할 수 있도록 heroku cli를 다운로드하고 안내되어 있는 대로 그대로 따라 하면 됩니다. 밑줄 친 부분에는 방금 전에 생성한 App name이 들어갑니다.

express 애플리케이션을 heroku에 올리기 위해서는 간단한 설정이 필요합니다.

"script" 하위에 "start": "node main으로 설정된 js파일" 을 입력해줘야 합니다. 그래야 heroku가 메인 파일을 실행시켜 서버를 항상 켜놓을 수 있습니다.

변경사항이 생기면 아래와 같은 명령어를 실행해 코드를 heroku 서버의 코드와 동기화시킬 수 있습니다.

그다음 heroku open 명령어를 입력하거나 생성한 Appname.herokuapp.com으로 접속하면 로컬에서 동작한 것과 똑같이 화면이 떠야 하는데 에러가 발생했습니다.

cmd 창에 heroku logs --tail 을 쳐서 에러 메시지를 확인해보니 database 연결이 안 되어 있어서 그런 것 같습니다. mysql 설정이 로컬로 되어있으니 당연한 결과입니다. heroku에서 mysql을 연동시키려면 ClearDB라는 add-on을 설치해야 합니다. 

Resources 탭의 Add-ons에서 밑줄 친 부분에 ClearDB를 입력하면 다음과 같은 창이 뜹니다. Provision 을 누르면 카드 등록이 되어있지 않다고 뜨는데 어차피 무료이기 때문에 카드 등록만 해주면 무료로 사용할 수 있습니다.

ClearDB를 추가해주고 나서 Settings 탭에서 Reveal Config Vars를 누르면 우리가 사용할 수 있는 heroku 서버와 연동된 mysql database 정보가 나옵니다.

밑줄 친 부분을 복사해보면 

'mysql://aaaaaaaaaaaa:bbbbbbbbbbbbb@ccccccccccc.net/dddddddddddd?reconnect=true' 이런 꼴로 나타납니다.

각각이 의미하는 것은

aaaaaaaaaaaa -> User

bbbbbbbbbbbbb -> password

ccccccccccc.net -> host

dddddddddddd -> database 이름

입니다. 

이제 database 정보를 알았으니 설정을 변경해보겠습니다. 그 전에 

mysql -u aaaaaaaaaaaa -h ccccccccccc.net -p 명령어로 해당 database에 접속하여 로컬 db와 똑같이 만들어 주었습니다.

그러고 나서 mysql과 연동시키는 부분의 정보를 아까 확인한 database 정보들로 바꿔주었습니다.

connectionLimit과 createPool은 mysql과 heroku 서버의 connection pool을 위해 사용하였습니다. 

원래는 connectLimit 부분이 없었고 createPool 대신 connect 함수를 했었는데 한 60초? 정도 아무 동작이 없으면 heroku 서버와 mysql의 연결이 저절로 끊어져 heroku open을 했을 때 계속 아까와 같은 에러가 발생했습니다. 구글링을 해서 db연결이 끊어지면 다시 연결을 하는 방식의 코드를 넣어봤는데 그래도 해결되지 않았습니다. 해결책을 계속 찾아보다가 connection pool이라는 것이 있어서 이 방식을 사용했습니다. 연결을 여러 개를 만들어 놓고 끊어지면 다른 연결을 사용하는 식인 것 같습니다.

아무튼 드디어 제가 만든 웹 사이트에 외부에서 항상 접속할 수 있게 되었습니다. 에러가 많이 나서 화도 많이 났지만 정말 뿌듯했습니다.

https://webhackers.herokuapp.com/

https://webhackers.herokuapp.com/