Unable to display dashboard behind reverse proxy

Universal Dashboard Universal Dashboard Help
1

Hi,

I am trying to run UD behind a reverse proxy (Apache) and seems to fail.

The reverse proxy is set to listen to 443 and redirect to another PC on port 2000
It will ProxyPass /dashboard
So the address would be https:///www.mysite.com/dashboard

<VirtualHost *:443>
	ProxyPreserveHost On
	ServerName www.mysite.com
	ProxyPass /dashboard  http://1.2.3.4:2000
	ProxyPassReverse /dashboard  http://1.2.3.4:2000
</VirtualHost>

The dashboard.ps1 is simple:

Import-Module UniversalDashboard.Community;
Enable-UDLogging -Console -Level Info
Start-UdDashboard -Content {
    New-UdDashboard -Title "Server Performance Dashboard" -Color '#FF050F7F' -Content {

        New-UDCard -Title "Home"  -Content {
        "Welcome, this is my homepage (Steven Spierenburg)"
        }

    } } -Port 2000 -Wait

Running it locally or from a PC that can connect to it, it will work
As you can see, it runs on port 2000

But when running it via a reverse proxy it fails
This is what the console tells me when I try to connect to the dashboard:

Now listening on: http://0.0.0.0:2000
            Application started. Press Ctrl+C to shut down.
            23:21:51 [Info] Microsoft.AspNetCore.Hosting.Internal.WebHost Request starting HTTP/1.1 GET http://www.mysite.com/
            23:21:51 [Info] Microsoft.AspNetCore.Hosting.Internal.WebHost Request finished in 8.2584ms 200 text/html; charset=utf-8

A very quick and short response. When connecting locally the output is much larger/more lines.
But it shows that something is arriving at UD

However, I get a blank page. When I try with Developer tools to investigate I see this:

GET https://www.mysite.com/main.ec3003e4009bbf28a5cb.bundle.js net::ERR_ABORTED 404 (Not Found)

As you can see, no/dashboard is present anymore
When I change the URL to have that like so:
https://www.mysite.com/dashboard/main.ec3003e4009bbf28a5cb.bundle.js

The page/JS loads in the browser (shows the javascript code)

The page that shows blank is having this content:

<!DOCTYPE html>
<html>
<head>
<base href="[/](https://www.mysite.com/)"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PowerShell Universal Dashboard</title>
<style>
.v-wrap{
height: 100% !important;
white-space: nowrap !important;
text-align: center !important;
display: block !important;
min-height: auto !important;
flex-direction: row !important;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100vh;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
}
</style>
<link rel="shortcut icon" href="[favicon.ico](https://www.mysite.com/favicon.ico)"></head>
<body>
<div id="app" class="app"/>
<script type="text/javascript" src="[main.ec3003e4009bbf28a5cb.bundle.js](https://www.mysite.com/main.ec3003e4009bbf28a5cb.bundle.js)"></script><script type="text/javascript" src="[vendor.ec3003e4009bbf28a5cb.bundle.js](https://www.mysite.com/vendor.ec3003e4009bbf28a5cb.bundle.js)"></script></body>
</html>

Does anyone know what could be wrong here?

2

Does anyone have a suggestion on how I could proceed on this? As it stands the dashboard is only reachable on local networks and therefore limited in how I can use it.

Maybe I need to host this in IIS?

3

I think you can make this work if you use the nested IIS site configuration for your reverse proxy.

Mainly, I think you need to update index.html base tag to include your relative proxy address (e.g. /dashboard/. See here: https://docs.universaldashboard.io/running-dashboards/iis#creating-nested-iis-sites

That said, you will have issues with navigation due to a regression in 2.6.2 (or sometime before that) but you can pull the nightly build to verify that it’s working.

See: https://github.com/ironmansoftware/universal-dashboard/blob/master/tools/install-nightly.ps1

4

Hi Adam

Thanks for the reply.

Is it fair to say then that if you want to run UD behind a reverse proxy you would need to run UD inside IIS?

I always run UD by starting a PS shell end start the dashboard code/script, listening to a port and access it from then on.

Or is there a way to have UD not only listen to a port but have a base href when starting UD within a PS shell?

5

I’ve run UD behind nginx as a proxy. I wrote about it.

6

Hi Nate,

Thanks for that! Very interesting and nice writeup. Awesome.

We are running Apache as reverse proxy and the UD is running on another server, so a bit different but perhaps I can learn from your setup and apply.

And if need be, I can mimic your solution completely, I just need to justify running a small extra server with Ubuntu. I might get away with that
:slight_smile:

Really appreciate the help Nate, thanks again!

Met vriendelijke groet / Warm regards,

Steven Spierenburg

E steven@jikade.com

M +31 (0) 6 303 38 087

7

I stumbled upon this post when trying to set up a self-signed certificate for my local Docker environment

I have deployed PowerShell Universal and Nginx via Compose script and used the following Nginx config to get this working with PSU 4.0:

server {
    listen 443 ssl;  # Use port 443 for HTTPS traffic

    server_name localhost;  # Set the server name to localhost

    ssl_certificate /etc/nginx/nginx.crt;  # Path to your SSL certificate
    ssl_certificate_key /etc/nginx/nginx.key;  # Path to your SSL certificate key

    location / {
        proxy_pass http://psu:5000;  # Forward requests to port 5000 on localhost
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

The name of my PowerShell Universal 4.0 container is psu. This may need changing on the proxy_pass line.

At 1st I could only get Nginx to navigate to the admin gui, but the final 3 lines in the location section allowed me to navigate multiple apps.

8

I’ve also got mine running behind a reverse proxy but a much more hands off approach to the config.
I’m running it in docker on my synology nas. using the built in reverse proxy in DSM (nginx under the hood), I’ve bought a custom domain name & configured DDNS with changeIP (synology also supports keeping this updated but there’s a range of supported DDNS providers) and lastly used zeroSSL to create a certificate.
The basic config I’ve made is, router 443 port passes to syno 443, syno picks up and routes domain specific requests to the back end docker port.
I’ve used OIDC with google auth.
I didnt need to add any custom headers for websockets for it to work, but added those in anyway just in case later on.

1 Like
9

I would love to see more of your config

10

No prob man, drop me a message and I’ll give you more detail, just let me know what specific areas you’re interested in!

1 Like