React Application을 Heroku에 Deploy하며 겪은 오류(Error H10)

블로그 커버

  헤로쿠(Heroku)는 다양한 프로그래밍 언어를 지원하는 PaaS(Platform as a Service)이다. 2007년 처음 개발되었을 때는 루비 언어만 지원했지만 현재는 Java, Node, Scala, Python, Go 등의 다양한 언어를 지원하고 있다. 헤로쿠는 어플리케이션 배포를 무료로 진행할 수 있고, 빠르게 배포를 진행할 수 있다는 점에서 MVP테스트, 발표용, 포트폴리오용 등의 간단한 작업을 진행할 때 있어 유용하게 사용할 수 있다.

 

  해당 블로그에서는 React와 Server를 동시에 올리는 것이 아닌, React Application만 배포하는 방법과 경험에 대해 다루기 때문에  참고 바란다. 또한, Heroku Blog에서는 Deploying React with Zero Configuration이라는 글 제목으로 CRA를 통해 제작한 어플리케이션에 대해 Heroku로 배포하는 과정에 대해 설명하고 있으니, 여기도 참고할 수 있다.

 

나는 이것을 배포하는 과정에서 H10 에러를 맞닥뜨렸고, 여러 방법을 시도한 이후에 해결방법을 찾아낼 수 있었다.

 

아참, 헤로쿠는 H로 시작하는 에러 코드를 제공하고 있다. 만약에 배포하는 과정에서 문제가 발생한다면 해당 url으로 들어갔을 때 다음과 비슷한 화면을 마주칠 것이다. heroku logs --tail 으로 로그를 뜯어 보면 에러 코드를 발견할 수 있다. 에러 코드에 대한 설명은 여기를 참고해라. 에러 코드별로 에러를 살펴볼 수 있다. 헤로쿠 배포에 있어 처음 오류를 발견하면 너무나도 막막할 것이다. Error Code를 잘 참고해서 검색하면 좋은 결과를 가질 수 있을 것이다.

흔히 보는 에러 페이지

 

발견된 문제

상단의 로그 출력 커맨드를 통해 찾아낸 에러의 일부는 다음과 같다.

at=error code=H10 desc="App crashed" method=GET path="/" 

 

 

다음은 인터넷에서 발견한 

시도 1 : package.json scripts에 heroku-postbuild 를 추가한다. (실패)

package.json의 script 부분에 "heroku-postbuild": "npm run build" (혹은 yarn build) 를 추가하라.

 "scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"heroku-postbuild": "npm run build"}

 

시도 2 : package.json 에 engines를 추가하라. (실패)

package.json의 engines 부분을 추가하고, 다음과 같이 추가해라. node의 버전과 npm의 버전은 "node --v" 와 "npm --v" 커맨드를 입력하여 찾아내라.

"private": true,
"engines": {
    "node": "12.7.0",
    "npm": "6.14.4"
},
"dependencies": {
    "@apollo/react-hooks": "^3.1.5",
    "@material-ui/core": "^4.9.13",

 

시도 3 : 헤로쿠 빌드팩을 변경해서 create-react-app 빌드팩을 설정하라 (성공)

  heroku buildpacks:set mars/create-react-app  

위 커맨드를 입력해서 heroku의 기본 빌드팩을 변경해라. 그 후 git push heroku master을 이용하여 배포하였더니 나의 경우에 성공했다.