Use relative paths instead of absolute ones in frontend - run frontend on host/subdirectory

[gf78]

I would like to make the admin frontend available from outside, but do not use a own subdomain therefore.
I'd like to run it behind my.___domain.com/nginxproxymanager/.

Because in the frontend all ressources are loaded with absolut urls this is not possible.

[danielriddell21]

Hey @gf78 , did some digging. We can use sub filters to fix this, i used the below:

proxy_set_header Accept-Encoding "";
sub_filter 'href="/' 'href="/app/nginx/';
sub_filter 'src="/' 'src="/app/nginx/';
sub_filter 'window.___location="/' 'window.___location="/app/nginx/';
sub_filter_once off;
sub_filter_types text/css text/javascript;

[chaptergy]

Is there a webpack plugin which can do this at compile-time?

[finalsolarflare]

Hey @gf78 , did some digging. We can use sub filters to fix this, i used the below:

proxy_set_header Accept-Encoding "";
sub_filter 'href="/' 'href="/app/nginx/';
sub_filter 'src="/' 'src="/app/nginx/';
sub_filter 'window.___location="/' 'window.___location="/app/nginx/';
sub_filter_once off;
sub_filter_types text/css text/javascript;

This really helped me as a starting point to figuring out how to proxy port 81 to /nginx-proxy/

So instead of http://example.com:81 I can use http://example.com/nginx-proxy

In case anyone else stumbles on this issue, this is how I got it to function:
I couldn't get a Custom Location to work, so under Proxy Host > Advanced
replace IP with your own IP, replace nginx-proxy with your desired ___location.

Disclaimer - there are probably things in there that aren't needed, and the script sub_filters will probably break when the js is minified in a future update.

location /nginx-proxy/ {
proxy_pass http://192.168.1.210:81/;
proxy_http_version 1.1;
proxy_redirect off;
proxy_set_header Upgrade $http_upgrade;
proxy_cache_bypass $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_cache_bypass $http_secret_header;

proxy_set_header Accept-Encoding "";
add_header Pragma "no-cache";
add_header Cache-Control "no-cache";
# source changes
sub_filter 'href="/' 'href="/nginx-proxy/';
sub_filter 'src="/' 'src="/nginx-proxy/';
sub_filter '/api' '/nginx-proxy/api';
sub_filter '/assets' '/nginx-proxy/assets';
# script changes
sub_filter 'r.p="/' 'r.p="/nginx-proxy/';
sub_filter 'history.start({___pushState:!0})' 'history.start({___pushState:!0,root: "/nginx-proxy/"})';
sub_filter 'i.history.navigate(e.' 'i.history.navigate(e.replace("/nginx-proxy","").';
sub_filter_types text/css text/javascript application/javascript;
sub_filter_once off;
}

[Aterfax]

Hey @gf78 , did some digging. We can use sub filters to fix this, i used the below:

proxy_set_header Accept-Encoding "";
sub_filter 'href="/' 'href="/app/nginx/';
sub_filter 'src="/' 'src="/app/nginx/';
sub_filter 'window.___location="/' 'window.___location="/app/nginx/';
sub_filter_once off;
sub_filter_types text/css text/javascript;

This really helped me as a starting point to figuring out how to proxy port 81 to /nginx-proxy/

So instead of http://example.com:81 I can use http://example.com/nginx-proxy

In case anyone else stumbles on this issue, this is how I got it to function: I couldn't get a Custom Location to work, so under Proxy Host > Advanced replace IP with your own IP, replace nginx-proxy with your desired ___location.

Disclaimer - there are probably things in there that aren't needed, and the script sub_filters will probably break when the js is minified in a future update.

location /nginx-proxy/ {
proxy_pass http://192.168.1.210:81/;
proxy_http_version 1.1;
proxy_redirect off;
proxy_set_header Upgrade $http_upgrade;
proxy_cache_bypass $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_cache_bypass $http_secret_header;

proxy_set_header Accept-Encoding "";
add_header Pragma "no-cache";
add_header Cache-Control "no-cache";
# source changes
sub_filter 'href="/' 'href="/nginx-proxy/';
sub_filter 'src="/' 'src="/nginx-proxy/';
sub_filter '/api' '/nginx-proxy/api';
sub_filter '/assets' '/nginx-proxy/assets';
# script changes
sub_filter 'r.p="/' 'r.p="/nginx-proxy/';
sub_filter 'history.start({___pushState:!0})' 'history.start({___pushState:!0,root: "/nginx-proxy/"})';
sub_filter 'i.history.navigate(e.' 'i.history.navigate(e.replace("/nginx-proxy","").';
sub_filter_types text/css text/javascript application/javascript;
sub_filter_once off;
}

Anyone got an updated version of this?

[Aterfax]

Apparently I do.

location /nginx-proxy/ {
proxy_pass http://nginx-proxy-manager_app_1:81/;
proxy_http_version 1.1;
proxy_redirect off;
proxy_set_header Upgrade $http_upgrade;
proxy_cache_bypass $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_cache_bypass $http_secret_header;

proxy_set_header Accept-Encoding "";
add_header Pragma "no-cache";
add_header Cache-Control "no-cache";
# source changes
sub_filter 'href="/' 'href="/nginx-proxy/';
sub_filter 'src="/' 'src="/nginx-proxy/';
sub_filter '/api' '/nginx-proxy/api';
sub_filter '/assets' '/nginx-proxy/assets';
sub_filter '/js/' '/nginx-proxy/js/';
# script changes
sub_filter 'r.p="/' 'r.p="/nginx-proxy/';
sub_filter '"/login' '"/nginx-proxy/login';
sub_filter 'case"/logout"' 'case"/nginx-proxy/logout"';
sub_filter 'window.___location="/"' 'window.___location="/nginx-proxy/"';
sub_filter 'history.start({___pushState:!0})' 'history.start({___pushState:!0,root: "/nginx-proxy/"})';
sub_filter 'i.history.navigate(e.' 'i.history.navigate(e.replace("/nginx-proxy","").';
sub_filter_types text/css text/javascript application/javascript;
sub_filter_once off;
}

This appears to be functional but I give no warranty as my Javascript knowledge is paltry at best.

Disclaimer - there are probably things in there that aren't needed, and the script sub_filters will probably break when the js is minified in a future update.

This seems likely the cause. The minification also made it a total pain in the ass to find the above.

[Sphincz]

Thank you very much @Aterfax !!!! 😄

This is the ultimate solution for those who want to have Nginx Proxy Manager Admin-UI behind other nginx proxy (raw).

Finally, after 48 hours of proxy_passing and regex rules that did not work, the solution from @Aterfax worked flawless for me!!!

Thank you very much once again!!!

[chendelin1982]

I have test it, and found it need to add rewrite ^/nginxproxymanager/?(.*)$ /$1 break;

rewrite  ^/nginxproxymanager/?(.*)$ /$1 break;
proxy_http_version 1.1;
proxy_redirect off;
proxy_set_header Upgrade $http_upgrade;
proxy_cache_bypass $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_cache_bypass $http_secret_header;
proxy_set_header Accept-Encoding "";
add_header Pragma "no-cache";
add_header Cache-Control "no-cache";
# source changes
sub_filter 'href="/' 'href="/nginxproxymanager/';
sub_filter 'src="/' 'src="/nginxproxymanager/';
sub_filter '/api' '/nginxproxymanager/api';
sub_filter '/assets' '/nginxproxymanager/assets';
sub_filter '/js/' '/nginxproxymanager/js/';
# script changes
sub_filter 'r.p="/' 'r.p="/nginxproxymanager/';
sub_filter '"/login' '"/nginxproxymanager/login';
sub_filter 'case"/logout"' 'case"/nginxproxymanager/logout"';
sub_filter 'window.___location="/"' 'window.___location="/nginxproxymanager/"';
sub_filter 'history.start({___pushState:!0})' 'history.start({___pushState:!0,root: "/nginxproxymanager/"})';
sub_filter 'i.history.navigate(e.' 'i.history.navigate(e.replace("/nginxproxymanager","").';
sub_filter_types text/css text/javascript application/javascript;
sub_filter_once off;

[Aterfax]

I have test it, and found it need to add rewrite ^/nginxproxymanager/?(.*)$ /$1 break;

rewrite  ^/nginxproxymanager/?(.*)$ /$1 break;
proxy_http_version 1.1;
proxy_redirect off;
proxy_set_header Upgrade $http_upgrade;
proxy_cache_bypass $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_cache_bypass $http_secret_header;
proxy_set_header Accept-Encoding "";
add_header Pragma "no-cache";
add_header Cache-Control "no-cache";
# source changes
sub_filter 'href="/' 'href="/nginxproxymanager/';
sub_filter 'src="/' 'src="/nginxproxymanager/';
sub_filter '/api' '/nginxproxymanager/api';
sub_filter '/assets' '/nginxproxymanager/assets';
sub_filter '/js/' '/nginxproxymanager/js/';
# script changes
sub_filter 'r.p="/' 'r.p="/nginxproxymanager/';
sub_filter '"/login' '"/nginxproxymanager/login';
sub_filter 'case"/logout"' 'case"/nginxproxymanager/logout"';
sub_filter 'window.___location="/"' 'window.___location="/nginxproxymanager/"';
sub_filter 'history.start({___pushState:!0})' 'history.start({___pushState:!0,root: "/nginxproxymanager/"})';
sub_filter 'i.history.navigate(e.' 'i.history.navigate(e.replace("/nginxproxymanager","").';
sub_filter_types text/css text/javascript application/javascript;
sub_filter_once off;

Yep, that is to be expected as you have chosen the path /nginxproxymanager rather than /nginx-proxy

It may be worth "slugifying" this at some point but not right now for me as I am about to have a nap!

[bestK]

我测试了一下，发现需要添加rewrite ^/nginxproxymanager/?(.*)$ /$1 break;

rewrite  ^/nginxproxymanager/?(.*)$ /$1 break;
proxy_http_version 1.1;
proxy_redirect off;
proxy_set_header Upgrade $http_upgrade;
proxy_cache_bypass $http_upgrade;
proxy_set_header Connection $http_connection;
proxy_cache_bypass $http_secret_header;
proxy_set_header Accept-Encoding "";
add_header Pragma "no-cache";
add_header Cache-Control "no-cache";
# source changes
sub_filter 'href="/' 'href="/nginxproxymanager/';
sub_filter 'src="/' 'src="/nginxproxymanager/';
sub_filter '/api' '/nginxproxymanager/api';
sub_filter '/assets' '/nginxproxymanager/assets';
sub_filter '/js/' '/nginxproxymanager/js/';
# script changes
sub_filter 'r.p="/' 'r.p="/nginxproxymanager/';
sub_filter '"/login' '"/nginxproxymanager/login';
sub_filter 'case"/logout"' 'case"/nginxproxymanager/logout"';
sub_filter 'window.___location="/"' 'window.___location="/nginxproxymanager/"';
sub_filter 'history.start({___pushState:!0})' 'history.start({___pushState:!0,root: "/nginxproxymanager/"})';
sub_filter 'i.history.navigate(e.' 'i.history.navigate(e.replace("/nginxproxymanager","").';
sub_filter_types text/css text/javascript application/javascript;
sub_filter_once off;

location /npm/ {
	proxy_pass http://npm/;
	proxy_http_version 1.1;
	proxy_redirect off;
	proxy_set_header Upgrade $http_upgrade;
	proxy_cache_bypass $http_upgrade;
	proxy_set_header Connection $http_connection;
	proxy_cache_bypass $http_secret_header;
	proxy_set_header Accept-Encoding "";
	add_header Pragma "no-cache";
	add_header Cache-Control "no-cache";
	# source changes
	sub_filter 'content="/' 'content="/npm/';
	# fix href 
	sub_filter 'href="/logout' 'href="/npm/logout';
	sub_filter 'href="/css' 'href="/npm/css';
	sub_filter 'href="/image' 'href="/npm/image';
	
	sub_filter 'src="/' 'src="/npm/';
	sub_filter '/api' '/npm/api';
	sub_filter '/assets' '/npm/assets';
	sub_filter '/js/' '/npm/js/';
	# script changes
	sub_filter 'i.p+"js/"' 'i.p+"npm/js/"';
	sub_filter 'r.p="/' 'r.p="/npm/';
	sub_filter '"/login' '"/npm/login';
	sub_filter 'case"/logout"' 'case"/npm/logout"';
	sub_filter 'window.___location="/"' 'window.___location="/npm/"';
	sub_filter 'history.start({___pushState:!0})' 'history.start({___pushState:!0,root: "/npm/"})';
	sub_filter 'i.history.navigate(e.' 'i.history.navigate(e.replace("/npm","").';
	sub_filter_types text/css text/javascript application/javascript;
	 
	sub_filter_once off;

}

[github-actions]

Issue is now considered stale. If you want to keep it open, please comment 👍

[github-actions]

Issue was closed due to inactivity.