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