How to configure Apache to handle two reverse proxies one one domain/server name?

Question

I've got a node-react app on port 3000, and a node/express API running on port 3001 (localhost:3001/api). I need a reverse proxy setup in Apache that will put the React app on https://example.domain.com/ and the API on https://example.domain.com/api.

Will this work?

<VirtualHost *:443>
    ServerName example.domain.com
    [SSL Configuration]

    ProxyPreserveHost On
    ProxyPass "/" "http://localhost:3000"

    ProxyPreserveHost On
    ProxyPass "/api" "http://localhost:3001/api"

</VirtualHost>

If that won't work, what will work? another <VirtualHost> listing?

Answer 1

RMaaS

The documentation https://httpd.apache.org/docs/2.4/mod/mod_proxy.html#proxypass offers two options:

---

Alternative 1:

Ordering ProxyPass Directives

The configured ProxyPass and ProxyPassMatch rules are checked in the order of configuration. The first rule that matches wins. So usually you should sort conflicting ProxyPass rules starting with the longest URLs first. Otherwise, later rules for longer URLS will be hidden by any earlier rule which uses a leading substring of the URL. Note that there is some relation with worker sharing.

In other words order matters and your ProxyPass directives should be ordered as below:

<VirtualHost *:443>
    ServerName example.domain.com

    ProxyPass "/api" "http://localhost:3001/api"
    ProxyPassReverse "/api" "http://localhost:3001/api"

    ProxyPass "/" "http://localhost:3000"
    ...

</VirtualHost>

---

Alternative 2:

Ordering ProxyPass Directives in <Location>s

Only one ProxyPass directive can be placed in a Location block, and the most specific location will take precedence.

In other words when using Location block syntax the ordering doesn't matter and the effect should be the same when you switch the two location blocks around:

<VirtualHost *:443>
    ServerName example.domain.com

    <Location "/">
       ProxyPass  "http://localhost:3000"
       ProxyPassReverse  "http://localhost:3000"
    </Location>

    <Location "/api">
       ProxyPass  "http://localhost:3001/api"
       ProxyPassReverse  "http://localhost:3001/api"
    </Location>
</VirtualHost