My react app works if nginx reverse-proxy is set as follows:
server {
listen 80;
server_name my_public_vps_addr;
location / {
proxy_pass http://127.0.0.1:3000/;
}
}
I can load the page correctly at http://my_public_vps_addr/.
But I want to access the site via http://my_public_vps_addr/ecapp/.
So I configured nginx:
server {
listen 80;
server_name my_public_vps_addr;
location /ecapp/ {
proxy_pass http://127.0.0.1:3000/;
}
}
Now if I load the page at http://my_public_vps_addr/ecapp/ and inspect the console I get:
GET http://my_public_vps_addr/static/js/bundle.js
[HTTP/1.1 404 Not Found 147ms]
GET http://my_public_vps_addr/static/js/0.chunk.js
[HTTP/1.1 404 Not Found 433ms]
GET http://my_public_vps_addr/static/js/main.chunk.js
[HTTP/1.1 404 Not Found 424ms]
I've identified a possible cause. The assets should be fetched from http://my_public_vps_addr/ecapp/static/js/bundle.js etc instead of http://my_public_vps_addr/static/js/bundle.js.
To fix this error, I will list relevant source code:
server.js
const express = require('express');
const compression = require('compression');
const path = require('path');
const app = express();
app.use(compression());
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`App is running on port ${PORT}`);
});
I've tried app.use('/ecapp/static', express.static(path.join(__dirname, 'build'))); but no luck.
Routes.js
const Routes = () => {
return (
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
...
</Switch>
</BrowserRouter>
);
};
I've tried <BrowserRouter basename='/ecapp'></BrowserRouter> but no luck.
I think the app will load correctly at http://my_public_vps_addr/ecapp/ if I can configure the page to look for assets at http://my_public_vps_addr/ecapp/static/*. I need help in doing this.
