Nginx reverse proxy to pass subdomain in URL to backend

nginxPROXY

With nginx, is it possible to proxy an incoming URL for my React application to "see" it different than the user for handling data variables via React Router?

For example, a user would go to https://foo.app.live.com and my app would see the incoming request as http://localhost:3000/foo.

Some more examples:

  • 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

I have test with this block, the entire URI is added onto the end of the domain:

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

What am I missing?

Best Answer

You can do that by using rewrite directive with break flag in location block. In your case it would be:

rewrite (.*) /foo$1 break;

With this config, your URI will change but only to upstream server and user wouldn't notice it. For more detail please look at nginx documentation in here : http://nginx.org/en/docs/http/ngx_http_rewrite_module.html Thanks

Related Topic