UI behind reverse proxy

[fleed]

I'm trying to publish the ui behind Nginx creating a specific subpath for the BeatPulse web application, but all the ui related resources cannot be loaded.
I'm trying to redirect from https://myserver.com/monitor to http://localhost:{app-specific-port}.

In the file BeatPulse/src/BeatPulse.UI/Assets/index.html I see some absolute paths:

• /ui/resources/bootstrap-min.css
• /ui/resources/beatpulse.css
• /ui/resources/vendors-dll.js
• /ui/resources/beatpulse-bundle.js

Are they somehow replaced if the UI is not placed at the root of the website? Maybe an option to be specified in the setup methods?

[CarlosLanderas]

@fleed you are right, all the resources are served in /ui/resources segment.

Appart from the redirection of /monitor to the beatpulse url, could you add a redirection to the resources segment?

https://myserver.com/monitor/ui/resources
to
http://localhost:{app-specific-port}/ui/resources

[unaizorrilla]

Hi

@fleed can I close this issue?

[GustavoFonsecaDeAlmeida]

You can use the Last fature at version 3.0.2. Use apiOptions properties to change.

[fleed]

@GustavoFonsecaDeAlmeida is 3.0.2 released?

[CarlosLanderas]

We are having trouble deploying NuGets with AppVeyor:

NuGet/Home#6082

Im working on it. If we can't fix it we will deploy UI 3.0.2 manually.

[CarlosLanderas]

BeatPulse UI 3.0.2 has been published to Nuget @fleed @GustavoFonsecaDeAlmeida. If you can check it works properly I close the issue. Thanks

[camiteca]

Could this also be related with #77?

[CarlosLanderas]

In this case the issue was with the UI resources (js, css and static files). You have no problem using an empty path to register this kind of assets as you have when binding the middleware. People using a reverse proxy might need to register the UI resources on the same path de the UI is served.

[fleed]

@CarlosLanderas I tested, but it didn't actually solve my use case.
I think that the problem is Core/UIResourceMapper.cs @ line 26.

I'm observing the following:

I'm browsing http://localhost/monitor/beatpulse-ui that it is translated by nginx to http://localhost:19081/BeatPulseServiceFabricApp/BeatPulseApp/beatpulse-ui.
So far so good, I can get the expected html page.

Inspecting the source code I can find the expected links (e.g. <link rel="stylesheet" href="/monitor/ui/resources/bootstrap-min.css">).

The problem is that the /monitor segment is removed by nginx.
nginx forwards the request to http://localhost:19081/BeatPulseServiceFabricApp/BeatPulseApp/ui/resources/bootstrap-min.css (correct behaviour IMHO), but the path is not found (404).
I can see that the following path is correctly returning the resource:
http://localhost:19081/BeatPulseServiceFabricApp/BeatPulseApp/monitor/ui/resources/bootstrap-min.css

Additionally, testing the following link http://localhost/monitor/monitor/ui/resources/beatpulse.css returns the resource as well.

[CarlosLanderas]

@fleed Are you configuring UseBeatPulseUI with the resources path set to /monitor?. That should not work behind nginx. Try configuring it to empty string so the resources are served from the root where you are served the html page.

By the way, I think you need to have into account the final url were resources are served by nginx when configuring your paths on UseBeatPulseUI api options as resources and middlewares are resolved on runtime so try mapping it to /BeatPulseApp/ui/resources/ or the path that is going to be final

[GustavoFonsecaDeAlmeida]

I use a nginx. The nginx provide a "apiName/v1" for all projects. I configure to using apiOption propertie BeatPulseResourcePath to "/apiName/v1/ui/resources" thats work successfully.

[CarlosLanderas]

@GustavoFonsecaDeAlmeida that's exactly what I mean. Thanks for another sample. @fleed try doing what Gustavo and I are explaining and it should work as all resource paths are full configurable now.

[fleed]

@CarlosLanderas it is successfully working, but I need the following nginx configuration entries:

location /beatpulse/ui/ {
            proxy_pass http://localhost:19081/BeatPulseServiceFabricApp/BeatPulseApp/beatpulse/ui/;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header Referer $http_referer;
            proxy_set_header X-Forwarded-For $remote_addr;
            add_header X-Upstream $upstream_addr;
        }
        location /beatpulse-api {
            proxy_pass http://localhost:19081/BeatPulseServiceFabricApp/BeatPulseApp/beatpulse-api;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header Referer $http_referer;
            proxy_set_header X-Forwarded-For $remote_addr;
            add_header X-Upstream $upstream_addr;
        }
        location /monitor/ {
            proxy_pass http://localhost:19081/BeatPulseServiceFabricApp/BeatPulseApp/;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header Referer $http_referer;
            proxy_set_header X-Forwarded-For $remote_addr;
            add_header X-Upstream $upstream_addr;
        }

My BeatPulseUI is configured like this:

            app.UseBeatPulseUI(options => options.BeatPulseResourcePath = "/beatpulse/ui/resources");

avoiding any conflicts with other /ui assets.

Maybe I'm misconfiguring the system and someone can suggest a simpler configuration, but if that's the way to make it work in this context (nginx -> ServiceFabric -> BeatPulse), I consider it a little bit ugly. If there is a virtual path serving the BeatPulse website, it should be IMHO totally transparent to the application (or at least configurable).

I can close this issue as I find a workaround for the original problem and you can reopen if you consider additional work.

Thank you for support and for the work on this great project.

[CarlosLanderas]

Thanks for the feedback @fleed :)