원격으로 협업을 하다보니 개발 중인 프로젝트를 팀원도 볼 수 있게 배포하고 싶었다.
지금까지 AWS나 Firebase, Netlify로도 배포를 해봤는데, Heroku도 간편하다고 많이 들어서 개발 중 확인하는 용으로 Personal 무료 플랜으로 배포했다.

역시 순탄한 길은 없다고..
Netlify는 GitHub으로 관리하던 개인 프로젝트라 정말 간편하게 배포했는데 이번엔 에러때문에 서칭을 열심히 해야했다.

0. 개발 중이던 환경

• Create react app으로 생성한 프로젝트
• git과 연동, bitbucket remote에 연결되어 있음
• yarn 사용
  
  

1. Heroku 가입 및 Heroku CLI 다운로드

우선 운영체제에 맞는 Heroku CLI를 다운로드 받는다.
나는 MacOS라 brew를 이용해 설치했다.

2. Heroku에 새로운 앱 생성

나는 Heroku web에서 생성했는데, 터미널에서 heroku create {app name} 으로도 가능하다.

3. 개발 중인 프로젝트 remote에 heroku 추가

$ project_root> heroku  git:remote -a {app name}

heroku에 생성해둔 앱 이름으로 heroku remote를 추가한다.

4. [!] serve 패키지 추가 및 package.json script 수정 (H10 에러)

3번 이후 바로 heroku remote에 push했더니 앱이 열리지가 않았고,
내 앱에 문제가 있으니 heroku logs --tail을 통해 로그를 확인하라고 한다.
확인하니 마지막에 다음과 같은 로그가 있었다.

heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host={app name}.herokuapp.com

찾아보니 Heroku는 start 스크립트를 쓴다고 한다.
그런데 현재 프로젝트에서 start는 로컬 테스트 빌드 스크립트로 되어있기 때문에 에러가 난 것 같다.
따라서 이를 다음과 같이 수정한다.

"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "yarn build"

기존의 start 스크립트를 dev로 새로 추가하고,
heroku-postbuild를 통해 프로덕션 빌드를 하도록 추가,
마지막으로 start 스크립트를 serve -s build로 바꾼다.

또한 serve 패키지를 추가해야 하는데,
yarn build 시 나오는대로 yarn global add serve를 하게되면, heroku에서 serve 패키지를 찾지 못한다.
따라서 yarn add serve를 다시 해서 package.json에 serve가 추가된 것까지 확인하고 커밋 한다.

5. Heroku remote에 push하여 배포

$ project_root> git push heroku master

이제 푸시하면, 정상적으로 배포가 된다.👏👏👏👏
주소로 들어가거나 heroku 웹의 open app을 통해서, 또는 heroku open을 통해 바로 접속 할 수 있다.