[React] Heroku 배포 시 이슈 정리 (경험 기록)

1. Build pack 정의

CRA(Create-React-App) 로 만든 리액트 앱은 Build Pack을 세팅해주어야 한다.

Settings > BuildPacks에서 추가해준다.

node.js를 선택해주고, 아래 링크는 직접 add 해주자.

https://github.com/mars/create-react-app-buildpack.git

2. Package.json 수정

engine으로 node, npm의 권장 버전을 명시해주고,

scripts 안에 heroku-prebuild, heroku-postbuild도 명시하였다.

"version": "0.1.0",
  "private": true,
  "engine": {
    "node": "16.x",
    "npm": "8.x"
  },

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "heroku-prebuild": "npm install",
    "heroku-postbuild": "npm run build"
  },

 

3. H13 Error heroku restart

Build 후 App을 Open했을 때 Application Error 가 떠서 logs를 살펴봤다.

heroku[router]: at=error code=H13 desc="Connection closed without response" method=GET path="/" 

라는 로그가 떠서 구글링해보니 Stack Overflow에 heroku를 Restart하면 간단히 해결된다는 답변이 많았다.

heroku restart

로 restart 후 다시 빌드 후 실행하니 에러 없이 App이 열렸다. 

 

그치만 이후로 몇 가지를 수정한 뒤 해당 에러가 떴을 땐 restart가 통하지 않았다. 

 

나의 경우에는 Procfile을 추가한 이후 다시 해당 에러가 등장했는데,

Procfile의 띄어쓰기를 잘못 작성해서였다..

 

4. Procfile 

Procfile은 root 위치에 생성해야한다.

그리고 아래 내용을 추가한다.

 

web:npm start

위와 같이 web:npm 부분을 공백없이 작성해야 한다.

 

https://devcenter.heroku.com/changelog-items/370

Procfile no longer required for Node.js apps | Heroku Dev Center

그런데 최근엔 Procfile이 없으면 자동생성된다고 한다.

 

5. env 에 저장된 환경변수 별도로 저장

보안 관계상 heroku 연동 github에는 .env 파일이 올라가지 않는다.

나는 .env에 Backend base url을 저장해놓았기 때문에 별도의 config vars를 설정해주었다.

heroku config:set REACT_APP_BACK_BASE_URL={base url 주소}

 

이때 config:set 부분과 {key}={value} 부분은 공백없이 작성해주어야 한다.

 

+ 추가로,

헤로쿠로 배포하면 기본적으로 https로 배포되는데, 내가 진행한 프로젝트에서는 백엔드 팀원이 http로 백 서버를 배포했었다. 

그래서 프론트의 https와 백의 http가 맞지 않아 콘솔창에 

Mixed Content: The page at 'https://~~.herokuapp.com/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://~~:8080/auth/signin'. This request has been blocked; the content must be served over HTTPS.

 

이러한 에러가 떴다. 

프론트는 https, 백은 http라 맞지 않는다는 에러였다.

 

그래서 http 주소로 바꾸어 접속하였더니

CORS 에러가 떴다.

그래서 바로 백엔드 팀원에게 콜..

이 부분은 백엔드 팀원이 프론트 서버의 오리진을 허가해주는 걸로 해결되었다.