heroku mysql와 연동해서 webpak+express 프로젝트 배포하기 (config파일 설정, 배포편)

프로젝트에서도 config 파일을 수정해줍니다

 

여기서부터 에러가 생기는 부분이라 짜증나니 해주시는게 좋아요 

보통 .gitignore파일에 config파일을 추가해서 비밀번호 등을 숨길텐데 히로쿠 배포하면 

이 config모듈이 없다고 에러나요 -_-++ 이자식..

그렇다고 아이디 비밀번호를 공개할 수는 없는일이죠

 

stackoverflow보고 해결해보았습니다 

.env파일로 환경변수를 만들어주고 가져오는 방식으로 해야합니다

 

---

.env파일을 만들고 거기에 필요한 환경변수를 넣어줘요

 

 

 

저희 프로젝트의 config파일은 이렇습니다

dotenv를 설치해줘야 가져올 수 있어요

heroku 페이지 settings 탭에도 다시 와서 config vars를 설정해줍니다

저는 해줘야한다고 읽어서 했는데 안해도 되는지 모르겠네요

 

궁금하면 해보시고 결과를 공유해주시면 안될까요 저도 궁금

 

 

저희 app.js파일입니다

아마 프로젝트 구조에 따라서 다르겠지만

** 중요한 부분

port를 그냥 3000이라고 쓰지말고 저기도 process.env.PORT || 3000 이런식으로 가져와주세요

그리고 폴더 경로를 express.static(path.join(__dirname,"dist")처럼 webpack으로 빌드한 폴더/파일의 경로를 설정해줍니다

 

참고로 저희 프로젝트는 frontend폴더와 backend폴더를 따로 만들어서 개발을 했어요

 

프론트에서 package.json에 이런 설정을 해줘서 npm run build 시  webpack으로 빌드하여

backend폴더에 dist폴더가 생기도록 했습니다

 

webpack development와 production을 따로 설정하는 방법을 찾아보세요

 

 

 

그리고  그냥 배포하면 나중에 cors에러도 나니 cors모듈도 설치해서 

allowOrigin="*" 혹은 allowOrigin="heroku 앱 주소" 로 해줘야합니다 

 

전 에러나면서 하나하나 해결해서.. ㅎ ㅠ

 

 

이젠 제발 되길 바라며.. 배포를 해봅시다

 

저희는 개발은 dev브랜치로 했는데 배포는 master브랜치로 했습니다

폴더는 프론트엔드와 백엔드가 구분이 되었는데 배포는 백엔드 폴더만 해야되니까요

package.json파일이 최상단에 있어야 heroku가 읽을 수 있습니다

 

 

제가 했던 방법은 거의 다 쓴거 같은데 혹시 놓친거 있으면 나중에 추가하겠습니다

이제 배포해봅시다

 

히로쿠 페이지 deploy탭에서 github으로 배포하는 방법이 쉬워요

repository 이름 검색해서 배포할 브랜치를 선택하면 자동 배포가 됩니다

 

이번에는 cli로 배포해봤어요 

heroku git 누르면 설치하는 링크로 cli를 설치해주세요

 

그 다음 배포할 프로젝트 위치로 갑니다

$ heroku login (로그인해준다, 저는 홈페이지가 팝업되서 자동 로그인되었어요)
$ git init
$ git add .
$ git commit -m "배포한다아아아"
$ heroku git:remote -a 앱이름적어주세요
$ git push heroku master

 

이제 heroku open 하면 프로젝트 페이지가 열립니다

안되면 $ heroku restart도 쳐보고

$ heroku ps:scale web=1 도 쳐보세요 

 

저는 에러 해결할 때 순서대로 안하고 이전에 미리 쳐놔서 이 명령어들로 에러났을 거 같지는 않네요

 

그럼 짜라~ 저는 배포가 되었습니다 

https://todo-15.herokuapp.com/

TodoList

 

무려 4시간 정도의 시행착오를 겪어서요

왜나구요?? 에러 해결한다고 이것저것해보다가 중간에 config파일을 지웠..ㅠㅠ

 

저는 stackoverflow랑 youtube참고하면서 해결했는데

누군가에게 도움이 되길 바라서 포스팅해봤습니다 

 

매번 오류없는 좋은 개발하길 바랍니다 🙌