How to configure nginx-proxy-manager custom location for reverse proxy

README.md

The correct and robust solution is to rebuild the Nginx Proxy Manager project from https://github.com/NginxProxyManager/nginx-proxy-manager so that it includes /proxy/ in the frontend/webpack.config.js by setting module.exports = {output:{ publicPath: '/proxy/' before building the project.

• Rebuild the Project:
  • Modify the webpack.config.js to set the publicPath under output to /proxy/. This is to ensure that the frontend assets are correctly served with the /proxy/ prefix.

Nginx hack

# tell backend to handle redirects inclusing /proxy/ as prefix
proxy_redirect ~^http://[^/]+/(.+)$ /proxy/$1;

# Tell backend to not gzip things, so sub_filter can do its work!
proxy_set_header Accept-Encoding "";

sub_filter_types text/html text/css text/javascript application/javascript;
sub_filter_once off;
sub_filter 'action="/' 'action="/proxy/';
sub_filter 'href="/' 'href="/proxy/';
sub_filter 'src="/' 'src="/proxy/';
sub_filter "action='/" "action='/proxy/";
sub_filter "href='/" "href='/proxy/";
sub_filter "src='/" "src='/proxy/";
sub_filter '"/api/"' '"/proxy/api/"';

• Nginx Configuration:
  • Proxy Redirect: Adjusts redirects by prefixing /proxy/ to paths, ensuring that any redirect URLs from the backend include this prefix.
  • Disabling Gzip: proxy_set_header Accept-Encoding ""; instructs the backend not to gzip responses so that the sub_filter directives can modify the response content correctly.
  • Sub Filters: These replace certain patterns in the HTML/JavaScript/CSS responses to include the /proxy/ prefix in links and resource URLs, ensuring all URLs in the content point back through the proxy correctly.

This solution involves modifying both frontend assets and the Nginx configuration to support the /proxy/ path uniformly across all requests and content.