Apache 代理到 reactjs 页面

Question

I have 2 websites php and reactjs

1. php site running on http://localhost
2. react site running on http://localhost:3000

I'd like to access http://localhost:3000/funds page when user visit URL http://localhost/funds. I tried with apache proxy but it is showing blank react site as images and css missing on path. Any other suggestion to achieve this, Thanks.

ProxyPass /funds http://localhost:3000/funds
ProxyPassReverse /funds http://localhost:3000/funds

Answer 1

dockerized demo on Github

Solution

1. Apache server must be configured to load ProxyPass modules.

It is unclear from the question if the LoadModule is set up accordingly.

# httpd.conf
# proxy_http_module should be loaded before use
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
# rewrite is necessary for an SPA web app. this will be explained below.
LoadModule rewrite_module modules/mod_rewrite.so

2. Apache server must be configured to redirect(rewrite) every request to index.html

A react app is a javascript app that runs on a single page(aka SPA), normally on /index.html of host. Except the case of server-side rendered react apps, any react app paths implemented via react router libraries(ig react-router-dom ) are merely virtual. The paths only exist inside javascript code and not understood by reverse proxy servers.

To make SPA paths to work, every request should be redirected to /index.html with subpaths. That's what rewrite is. Let me illustrate this in a simpler way.

✅ this request succeeds because it is redirected to index.html by default config
request to / -> /index.html
❌ automatically redirected to path/index.html and it fails because the file does not exist
request to /path -> /path/index.html

--- with rewrite setting ---

✅ this works
request to / -> /index.html
✅ this also works, because it reaches /index.html first
request to /path -> /index.html/#/path

# httpd.conf

# reverse proxying
# service name should be used for docker-compose, but it is not necessary to do the same.
# the host name can be ignored.
ProxyPass "/" "http://react-frontend:3000/"
ProxyPassReverse "/" "http://react-frontend:3000/"

# rewrite for SPA app
<IfModule mod_rewrite>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

My working demo on github works for both http://localhost:8080/funds and http://localhost:8080 . The dockerized solution here is forwarding port 80 to 8080 but it can be set up to use port 80 if needed.

Still can't figure out what's the problem!

try check Apache log files . if the basics of reverse proxying SPA apps is well understood, just reading logs can solve most problems easily.

Edit: Serving A React App and PHP(or anything else) Together.

A react app cannot be served at subpaths. The javascript code for react basically assumes that it's from the root path( / ). If it is served from other sub paths(such as /funds ), it will fail to reach other necessary resources such as .css, .js ...etc.

The failure process:

1. react bootstrap index page at /subpath/index.html
2. without modifying the setting, it'll try to get all resources from / : /bundle.js , /styles.css , /favicon.ico
3. requests fail, because they exists at /subpath/bundle.js , subpath/styles.css and so on...

This is not easily solved unless environment specific setting is used. the discrepancy between local and production environment will make things more complicated later.

Solution 2: using subdomain

The best solution in this case, is to use subdomain. Apps do not have to change at all because they are all served from the root path. However, it requires hosts file modification to run from a local machine.

let's say I want to use sample.test as domain.

• php will be served at sample.test
• react app will be served at react.sample.test

# hosts file
127.0.0.1   sample.test
127.0.0.1   react.sample.test

# httpd.conf

# Custom Reverse Proxy /w subdomains

# this setting is no more needed.
# ProxyPass "/react" "http://react-frontend:3000/"
# ProxyPassReverse "/react" "http://react-frontend:3000/"
# ProxyPass "/" "http://php-frontend:80/"
# ProxyPassReverse "/" "http://php-frontend:80/"

# resolve to different service by subdomain.
<VirtualHost *:80>
ServerName react.sample.test
RewriteEngine On
ProxyPass "/" "http://react-frontend:3000/"
ProxyPassReverse "/" "http://react-frontend:3000/"
<Directory "/">
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . /index.html [L]
</Directory>
</VirtualHost>

<VirtualHost *:80>
ServerName sample.test
ProxyPass "/" "http://php-frontend:80/"
ProxyPassReverse "/" "http://php-frontend:80/"
</VirtualHost>

I've updated Github source . Try run the dockerized demo.