Nginx-Reverse-Proxy zum Übergeben der Subdomäne in der URL an das Backend

Question

Ist es mit nginx möglich, eine eingehende URL für meine React-Anwendung per Proxy zu übermitteln, damit sie diese anders „sieht“ als der Benutzer, um Datenvariablen über React Router zu verarbeiten?

Beispielsweise würde ein Benutzer zu gehen https://foo.app.live.comund meine App würde die eingehende Anfrage als sehen http://localhost:3000/foo.

Einige weitere Beispiele:

• 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

Ich habe mit diesem Block getestet, die gesamte URI wird an das Ende der Domäne angehängt:

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;
}

Was vermisse ich?

Answer 1

Sie können dies tun, indem Sie eine Umschreibedirektive mit einem Break-Flag im Standortblock verwenden. In Ihrem Fall wäre das:

rewrite (.*) /foo$1 break;

Mit dieser Konfiguration ändert sich Ihre URI, aber nur für den Upstream-Server, und der Benutzer wird es nicht bemerken. Weitere Einzelheiten finden Sie in der Nginx-Dokumentation hier:http://nginx.org/en/docs/http/ngx_http_rewrite_module.html Danke

Answer 2

Versuchen Sie, diese Version zu verwenden:

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;
}