Reverse proxy deployment of React apps

I’m trying to deploy multiple containerised SPAs using a reverse proxy to handle routing to each. In the current setup, each container has a production build create-react-app served by an express app which essentially just consists of:

app.use(express.static(path.join(__dirname, '..', 'build')));

app.use('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
});)

I’ve configured an nginx server with the following:

server {
    listen 8081;
    server_name example.domain.com;
    location /app1 {
        rewrite ^/(.*) /$1 break;
        proxy_ignore_client_abort on;
        proxy_pass http://localhost:3100;
        proxy_redirect http://localhost:3100 https://example.domain.com/app1;
        proxy_set_header  X-Real-IP  $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header  Host $http_host;
    }
}

The proxying appears to work as when I navigate to http://localhost:8081/app1 the index.html of the built React app loads but all of the bundled js files are 404. I have tried setting "homepage": "/app1" in the React app’s package.json but this hasn’t appeared to make any difference. It is still looking for the bundled js files at the server’s root: Request URL: http://localhost:8081/static/js/bundle.js

I’m at a loose end as to what to try next, any help would be much appreciated.

Best,

P

Source: StackOverflow