URL의 하위 도메인을 백엔드로 전달하는 nginx 역방향 프록시

Question

nginx를 사용하면 React Router를 통해 데이터 변수를 처리하기 위해 사용자와 다르게 "확인"하기 위해 내 React 애플리케이션에 대한 수신 URL을 프록시하는 것이 가능합니까?

예를 들어 사용자가 로 이동 https://foo.app.live.com하면 내 앱에서는 들어오는 요청을 로 표시합니다 http://localhost:3000/foo.

몇 가지 추가 예:

• https://foo.app.live.com===http://localhost:3000/foo
• https://foo.app.live.com/login===http://localhost:3000/foo/login
• https://foo.app.live.com/event/1===http://localhost:3000/foo/event/1

이 블록으로 테스트했는데 전체 URI가 도메인 끝에 추가되었습니다.

location /(.*)$ {
  proxy_pass http://localhost:3000/$1;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "";
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

내가 무엇을 놓치고 있나요?

Answer 1

위치 블록에서 중단 플래그와 함께 다시 쓰기 지시문을 사용하면 이를 수행할 수 있습니다. 귀하의 경우에는 다음과 같습니다:

rewrite (.*) /foo$1 break;

이 구성을 사용하면 URI가 변경되지만 업스트림 서버로만 변경되며 사용자는 이를 알 수 없습니다. 자세한 내용은 여기에 있는 nginx 문서를 참조하세요.http://nginx.org/en/docs/http/ngx_http_rewrite_module.html 감사해요

Answer 2

이 버전을 사용해 보세요:

location / {
    proxy_pass http://localhost:3000/foo$uri;
    proxy_http_version 1.1;      
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "";
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}