Reverse proxying from Apache to Nginx docker running ReactJS with Router

Question

Currently, I have a server running Apache that is also configured to function as a reverse proxy. On the same server, I have a Nginx docker running a ReactJS website with a ReactJS app with a router. The goal is to establish a reverse proxy from the apache server to the nginx docker, in order for people to access the React app that is running on said Nginx docker container.

This is my apache2 config:

<VirtualHost *:80>
        ServerName example.com
        ServerAlias www.example.com

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        ProxyPreserveHost On

        ProxyPass /foo http://localhost:10080
        ProxyPassReverse /foo http://localhost:10080
</VirtualHost>

This is the docker-compose.yml used to start the Nginx Docker

version: "3"
services:
  www:
    image: nginx
    container_name: react-www
    volumes:
      - ./react-app/build:/usr/share/nginx/html
    ports:
      - 10080:80
      - 10443:443
    networks:
      - www

networks:
  www:
    driver: bridge

And finally, this is the Nginx default.conf file

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Accessing the React app by going to it directly through http://example.com:10080 works just fine, but if someone were to go to http://example.com/foo , it will be proxied to http://localhost:10080/foo and causes a blank page to return, as there exists no /foo route.

Things I've tried so far that resulted in either a 404 or a blank page:

• Rewrote the URI by removing the /foo part in Apache.
• Added a foo directory in /usr/share/nginx/html.
• Rewrote the URI by removing the /foo inside Nginx, then proxied to self.
• Set the basename of the React router to /foo .

At this point, I've realized that my understanding of how URI is interacted with is limited, so I appreciate if anyone is able to point me in the right direction. Although the fact that I am using an Apache as a reverse proxy is out of my control, in case there are people who believe that I am doing something really stupid or inefficient, I am open to suggestions of alternatives.

Thanks anyone who took the time in reading this. Much appreciated if anyone can help me!

Answer 1

You should consider serving your react app with Apache so you wouldn't need to run 2 web servers side by side.

Apaches mod_rewrite can be used to rewrite URLs for React Router.

Here is a great tutorial how to configure Apache to work with JavaScript routes. https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-configure-apache-for-reactjs-and-angularjs/

And Here are Apache docs on mod_rewrite. https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html

Of course you could also serve the react with Nginx and also let Nginx do the proxying.