🚐 Parcel Heroku 배포 오류

Parcel 사용시 Heroku 배포 오류

React - Express - Parcel    조합

😂 저의 케이스를 공유하기 위한 글이나 구글링 해보니 비슷한 이슈가 많았습.

🧪 Issue

기존에 잘 되던 Heroku 배포가 Parcel을 붙이고 에러를 토한다.

웹로그와 Heroku Dashboard 혹은 Heroku Log에 출력되는 오류

2020-05-27T13:20:31.215293+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path=.....

Web이나 Heroku Dashboad 의 에러로그에는 정보가 없다. H10, 503, 404 등등의 에러 모두 어느 부분에서 저 ~를 하는지 알 수가 없다. 그래서, Heroku bash로 들어가 직접 npm start를 통해 bash에서 로그를 뽑아보자.

✔ Heroku-cli 설치가 되어있고 Heorku login 도 되어있는 상태 기준이다.

heroku run bash
npm start

이제 에러가 줄줄줄줄줄줄줄줄 나온다. 일단 나의 경우에는 왜인지 parcel 이 yarn에 추가되지 않아서 오류가 나왔지만 parcel을 추가해도 에러가 나온다.

2020-05-27T13:42:18.681445+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2020-05-27T13:42:18.699208+00:00 heroku[web.1]: Stopping process with SIGKILL
2020-05-27T13:42:18.785862+00:00 heroku[web.1]: Process exited with status 137
2020-05-27T13:42:18.824711+00:00 heroku[web.1]: State changed from starting to crashed

더 많이 줄줄줄 나오는데 읽다보면 뭔가 빌드가 느리게 되어서 튕기는 것 같다. 그런데 빌드가 yarn 패키지 build가 아니라 parcel 명령어로 실행한 build다. production을 위해 parcel이 빌드할 때 오래걸려서 터진다고 대충 이해하고 구글링 해보니 루트 폴더의 package.json 스크립트에 Heroku의 포스트빌드를 설정해야 된다더랑

"scripts": {
    .
    .
    .
    "heroku-postbuild": "parcel build ./client/public/index.html"
  },

index.html 은 내 프로젝트 경로 써주고.. 다시 Heorku에 푸쉬하면 제대로 돌아간다.

Maybe..

Parcel 붙이고 나온 오류 같긴한데 뭔가 초반에는 Parcel 있었어도 오류 안 나왔던 것 같기도 하고.. 빌드할 파일이 커지면서 Parcel이 Heroku 의 Deploy를 따라잡지 못해서 나왔을 수도 있을 것 같다.