how to make the HTML script path generic with a reverse proxy-CodePudding

I'm using Node.js with Express to make web applications which I run on a server in the cloud. Express apps typically listen on a specific port (3000 by default, but you can specify a port). So if I have multiple applications running on the server they will each listen on a unique port number, all well and good. But you don't want to reach the app with a port number in the URL, that's ugly.

I use Nginx on the server to perform a reverse-proxy. It can forward a path in a URL to a port where the appropriate application is listening.

So if "myApp" is listening on port 3010, it can be reached via the URL "https://myserver/myApp", which Nginx will route to port 3010 on the server. However on my local machine, which is where I do my development and testing, the app must be reached at "localhost:3010" because there is no proxy.

So here's the problem. When an index.html page loads up in a browser it pulls in CSS and JavaScript files from the server. The typical syntax is;

<link rel="stylesheet" href="/stylesheets/myStyle.css">

That pathname is supposed to be relative to the base directory of the app, and the appropriate prefix should get prepended to the request URL. This works when running on the local machine with "localhost:3010", the stylesheets and scripts get pulled in. But running on the remote server with the URL "https://myserver/myApp" the files won't load, I get a 404. I'm having to prepend the URL route name to the file pathnames in order for the requests to be proxy-routed properly like so;

<link rel="stylesheet" href="/myApp/stylesheets/myStyle.css"">

Unfortunately that pathname doesn't work on localhost where there is no myApp directory. This means that I don't have portable code. It has to be different when running locally or on the server, and the code has to know what the route name is on the server. That's bad.

Maybe I am configuring something incorrectly? This is what the routing clause looks like in Nginx;

        location /myApp {
                proxy_pass http://localhost:3010/;
                proxy_http_version 1.1;
                proxy_set_header Host $host;
                proxy_set_header X-NginX-Proxy true;

                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }

CodePudding user response：

First of all check your express static files configuration to garantee that you're serving your static files correctly.

About the nginx configuration, follow this discuss here. It's dealing the same problem as you: Express Nginx. Can't serve static files and I just believe that you can fix your problem following the same solution

CodePudding user response：

It turns out that the pathname prefix of the files that index.html is attempting to pull in from the remote server is very picky, and that small distinction was the problem (at least in my case).

Multiple prefixes work when running locally and being accessed in the browser by port number;

<link rel="stylesheet" href="/stylesheets/myStyle.css">

or <link rel="stylesheet" href="stylesheets/myStyle.css">

and also <link rel="stylesheet" href="./stylesheets/myStyle.css">

But the only syntax that seems to work on a remote server behind Nginx and ALSO locally is the "./" syntax; <link rel="stylesheet" href="./stylesheets/myStyle.css">