[nodejs/React] Nginx <> React 프론트앤드 리버스 프록시 접속시 Invalid Host 페이지 해결 방법 / DANGEROUSLY_DISABLE_HOST_CHECK=true

현상

라이트세일 우분투 서버에서 Nginx 를 통해 내가만든 리액트 앱으로 리버스프록시를 구성하고, 접속을 해보는데 아래와같은 페이지가 표시되었다.

• Invalid Host header

원인

{
  "name": "my-react-app",
  "version": "1.0.0",
  "private": true,
  "homepage": "/",
  "scripts": {
    "start": "HOST=my-domain.com react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  // ...
}

프로젝트의 package.json 내용중 start 스크립트를 보면 HOST에 내 도메인의 host 를 넣어야 정상 동작 하도록 되어있다. RCA로 만든 앱의 경우 기본적으로 HOST=my-domain.com 부분이 없기 떄문에 위처럼 HOST 검증에 실패하여 위 페이지가 출력된다.

해결방법

위처럼 start 인자에 HOST 변수를 주면 되는데. 도메인 바뀔때마다 저거 설정하기도 뭐해서 그냥 HOST 검증을 false 처리하기로 헀다.

{
  "name": "my-react-app",
  "version": "1.0.0",
  "private": true,
  "homepage": "/",
  "scripts": {
    "start": "DANGEROUSLY_DISABLE_HOST_CHECK=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  // ...
}

• DANGEROUSLY_DISABLE_HOST_CHECK=true

위 옵션을 주면 HOST 검증을 하지않는다. 해당 내용으로 저장소에 commit 후 서버쪽 소스를 동기화한뒤 재시작해보자.

테스트

그럼 HOST 검증 없이 정상적으로 리버스 프록시를 수행하는 것을 볼 수 있다.