[FIXED] How to forward requests between docker containers from nginx reverse proxy to react routes in nginx?

Issue

I used the GitHub repo in the source below for setting up Dockerfiles and docker-compose and built on it.

How it works is that there is an Nginx reverse proxy that sends requests to the client(react) or backend(node js) depending on the URL.

This works fine for single-page React pages. I went and added multiple pages in a single react via react-routes-dom. I set it up like below and it works when I npm start the react code and access at localhost:3000/path.

function Main() {
    return (
        <Switch>
            <Route path='/' exact component={ComponentA} />
            <Route path='/path' exact component={ComponentB} />
        </Switch>
    );
}

The problem happens when I try to access it via the reverse proxy. The configuration is almost identical to the one here from the repo default.conf

The problem happens when I try to access the other routes. If I try to access the base path localhost. It works. If I try to access the path localhost/path, it does not work.

Logs for accessing base /

client | 172.18.0.5 - - [06/Apr/2021:11:51:15 +0000] "GET / HTTP/1.0" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36" "-"

nginx | 172.18.0.1 - - [06/Apr/2021:11:51:15 +0000] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36" "-"

Logs for accessing custom /path

nginx | 172.18.0.1 - - [06/Apr/2021:11:52:43 +0000] "GET /path HTTP/1.1" 404 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36" "-"

client | 2021/04/06 11:52:43 [error] 31#31: *7 open() "/usr/share/nginx/html/path " failed (2: No such file or directory), client: 172.18.0.5, server: , request: "GET /path HTTP/1.0", host: "client"

client | 172.18.0.5 - - [06/Apr/2021:11:52:43 +0000] "GET /path HTTP/1.0" 404 555 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36" "-"

I tried to modify the conf file following React-router and nginx , https://gkedge.gitbooks.io/react-router-in-the-real/content/nginx.html , Nginx proxy_pass then try_file . They all don't work.

I tried to redirect all traffic to / to maybe help with the path, but I get an empty page.

location / {
    rewrite /(.*) / break;
    proxy_pass http://client;
  }

Source: https://github.com/LukeMwila/multi-container-nginx-react-node-mongo

Solution

After re-thinking it through and reading this solution here https://stackoverflow.com/a/36623117/8293176, I realized that I misunderstood the concept of routing in React.

What I did before was that I tried to apply the static re-routing within the reverse proxy conf file to the Nginx hosting react which was incorrect! It just brought me to another page.

I had to apply it to the Nginx hosting the React build itself. This way, the redirects are client-side.

I applied the Catch-all method proposed in the link referenced above and the links in the Question, and it worked nicely!

I hope this post can provide clarity to future readers.

Answered By - NanoBit

Answer Checked By - David Goodson (PHPFixing Volunteer)