Allow UI to mount at arbitrary proxied urls ie https://example.com/adminio/
disarticulate opened this issue · comments
I'd like to not expose adminio on a subdomain but as a route through a nginx proxy. In nginx, I can do:
upstream adminio {
server adminio:80;
}
location /adminio {
return 302 $uri/;
}
location /adminio/ {
client_max_body_size 1M;
rewrite ^/adminio/(.*)$ /$1 break;
proxy_pass http://adminio/;
add_header Set-Cookie X-APP-NAME=adminio;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
#include /app/conf.d/basic.auth;
}
Which proxies adminio inside Docker from a server to the UI.
But when we do this, the UI wants to find the files at the root:
Loading module from “https://example.com/runtime-es2015.js” was blocked because of a disallowed MIME type (“text/html”).
The minor HTML fix is to use the base attribute in head:
<head>
<base href="/adminio/">
</head>
Then make sure every link in the UI uses relative urls
https://www.w3schools.com/tags/tag_base.asp
for angular, it looks like:
https://stackoverflow.com/questions/55705637/how-to-set-base-url-for-angular-application
You'd probably just need an environment variable like:
APP_UI_BASE="/"
hi,
since this is Angular - all paths is already relative, and depends on baseHref parameter at build stage. So actually on Angular 9 you need to pass --baseHref="/adminio"
you can rebuild docker image to achieve this right now by
just replacing npm run build with a ng build --baseHref='/adminio' --output-path dist at Dockerfile
but thank you for idea, on the next release i add APP_UI_BASE="/" kind of parameter, so you no longer need to rebuild docker image to achieve this behaviour.
oh yes, and i forgot, if you will try this right now on last tagget release - you also need to change default nginx config at nginx/default.conf by replacing root to alias
- root /usr/share/nginx/html;
+ alias /usr/share/nginx/html;