How to use ProxyPass to serve static files through Express?

问题

I'm using Apache with mod_proxy to serve my Node app with Express,

ProxyPass /nodeapp http://localhost:3000/
ProxyPassReverse /nodeapp http://localhost:3000/

but the static JS and CSS are being requested from the wrong place.

For example, I want the CSS from

http://homepage/nodeapp/css

But it's being requested from

http://homepage/css

回答1:

I solved this problem in my environment by using the HTML "Base" tag in my application's index.html, and then ensured that all links within my application were relative. This will help ensure the browser requests the appropriate path.

It is worth noting that since my application is a SPA (Single Page Application) all assets work all the time since the actual navigation is always at the root.

In your case the tag (within the <head> element) might look like:

<base href="/nodeapp/">

My corresponding Apache config is simplistic:

<Location /nodeapp>
  ProxyPass http://127.0.0.1:9000
  ProxyPassReverse http://127.0.0.1:9000

  # other Apache directives here
</Location>

My application happens to use AngularJS, and I can get to the "root" of the application by using the # character. For example, if I wanted to go to /settings (which would be /nodeapp/settings in production) I would specify #settings as the href for any given link. Your mileage may vary, and it is certainly worth looking at https://docs.angularjs.org/guide/$location if you are using AngularJS and fiddle with the html5Mode setting to see what works best for your deployment.

I did not have to teach Express about its mountpoint, since the browser is requesting the appropriate resources using the <base> tag above, and the ProxyPass/ProxyPassReverse Apache directives appropriately strip /nodeapp before handing it off to Express.

Though I did not have to touch Express' router (per above) it may still be useful to understand the following. If you are using Express 4.x, "mounting" an Express application is purportedly easier than in previous versions of Express. There are a few good examples here: https://github.com/visionmedia/express/wiki/New-features-in-4.x

From that page:

Imagine an example routes/people.js in your project.
var people = express.Router();

people.use(function(req, res, next) {
});

people.get('/', function(req, res, next) {
});

module.exports.people = people;
You can mount it under the /people path so that any request to /people/* will route to the people router.
app.use('/people', require('./routes/people').people);

That page also directs you to the Express 4.x Router API: http://expressjs.com/4x/api.html#router

However, this technique should not generally be necessary if you're using Apache's ProxyPass to re-write inbound requests.

If your application is not an SPA you may find luck doing on-the-fly content rewriting using mod_proxy_html. I had limited success with this, but AngularJS ended up not liking it very much. However, I believe it might be a good fit for different applications.

If you choose to use mod_proxy_html you might check out the StackOverflow question & answer here for more information: ProxyHTML to rewrite URL

来源：https://stackoverflow.com/questions/22448243/how-to-use-proxypass-to-serve-static-files-through-express

标签

node.js

apache

express

reverse-proxy

mod-proxy