외장_하드
외장하드
외장_하드
전체 방문자
오늘
어제
  • 분류 전체보기 (419)
    • 국내 여행 (197)
      • 수도권 (20)
      • 충청도 (17)
      • 강원도 (32)
      • 전라도 (21)
      • 경상도 (50)
      • 제주도 (57)
      • 나들이 (0)
    • 일상 (40)
      • 휴식 (15)
      • 취업 준비 (19)
      • 월간일상 (3)
      • 군생활 (3)
    • 국외 여행 (40)
      • 일주 준비 (4)
      • 중국 (11)
      • 대만 (5)
      • 태국 (20)
    • 취미 (19)
      • 제품 후기 (11)
      • 지식 (8)
    • 자동차 (21)
      • 뉴 그랜저 XG (15)
      • 올 뉴 K3 (5)
    • IT (102)
      • Spring (18)
      • DataBase (11)
      • AWS (22)
      • GIT | github (9)
      • 기타 (23)
      • 머신러닝 | 딥러닝 (8)
      • Tech | Eng (3)
      • Python (2)
      • nodejs (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 뚜벅이
  • EC2
  • 스쿠터
  • 설치
  • 부산
  • 전라도
  • 카페
  • 제주도
  • 코스
  • 방법
  • 가성비
  • 여행
  • 후기
  • 강원도
  • 혼자여행
  • 스프링
  • 추천
  • 푸켓
  • aws
  • 주차장

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
외장_하드

외장하드

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

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

2023. 7. 29. 23:55
반응형

현상

라이트세일 우분투 서버에서 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 검증 없이 정상적으로 리버스 프록시를 수행하는 것을 볼 수 있다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'IT > nodejs' 카테고리의 다른 글

[React] EC2/라이트세일 서버에서 리액트 npm start 배포/빌드/구동시 서버 멈춤 해결하기 / 메모리 부족 / 스왑 메모리 설정 / Swap Memory  (0) 2023.07.29
[React] 리액트 실행시 FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory 에러 발생 / 힙메모리 부족  (0) 2023.07.29
[라이트세일/EC2] 우분투 리눅스 서버에 nodejs express / react 배포하기 / 프론트앤드, 백앤드 API 프로젝트/ git 배포방법  (0) 2023.07.23
[nodejs] express 프로젝트 실행시 MODULE_NOT_FOUND 에러 해결 방법 / Error: Cannot find module 'package'  (0) 2023.07.23
[Mac 환경설정] 라이트세일/EC2 우분투 리눅스 서버에 nodejs, npm 설치방법  (0) 2023.07.18
    'IT/nodejs' 카테고리의 다른 글
    • [React] EC2/라이트세일 서버에서 리액트 npm start 배포/빌드/구동시 서버 멈춤 해결하기 / 메모리 부족 / 스왑 메모리 설정 / Swap Memory
    • [React] 리액트 실행시 FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory 에러 발생 / 힙메모리 부족
    • [라이트세일/EC2] 우분투 리눅스 서버에 nodejs express / react 배포하기 / 프론트앤드, 백앤드 API 프로젝트/ git 배포방법
    • [nodejs] express 프로젝트 실행시 MODULE_NOT_FOUND 에러 해결 방법 / Error: Cannot find module 'package'
    외장_하드
    외장_하드
    자동차 / 여행 / 취업 / 일상 / IT / 코딩

    티스토리툴바