Question

How to set up reverse proxy with nginx to host express js app in subpath

Posted November 20, 2021 53 views
NginxNode.jsReact

Hello.

I want to host an express js app at http://my_public_vps_ip/ecapp/.

The source code of the app is at https://github.com/kaloraat/react-node-ecommerce/tree/master/final-code-with-improvments/ecommerce-front

Here are my configs:

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.use('/*', 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}`);
});

Routes.js

const Routes = () => {
    return (
        <BrowserRouter basename='/ecapp'>
            <Switch>
                <Route path="/" exact component={Home} />
                ...
            </Switch>
        </BrowserRouter>
    );
};

I tried setting basename to /ecapp here.

nginx config:

server {
    listen       80;
    server_name  184.168.120.55;

    location /ecommerce/api/ { # node js backend
        proxy_pass      http://127.0.0.1:8000/api/;
    }

    location /ecapp/ { # this is the front-end app
        proxy_pass      http://127.0.0.1:3000/;
    }
}

My front end app loads correctly at http://my_public_vps_ip/ when location is set to root as follows:

location / { # this is the front-end app
        proxy_pass      http://127.0.0.1:3000/;
}

But if location is set to /ecapp/ and I try to access the front-end app via http://my_public_vps_ip/ecapp/ I get the following errors in console:

GET http://my_public_vps_ip/static/js/bundle.js
GET http://my_public_vps_ip/static/js/main.chunk.js
GET http://my_public_vps_ip/static/js/0.chunk.js
Loading failed for the <script> with source “http://my_public_vps_ip/static/js/bundle.js”. ecapp:30:1
Loading failed for the <script> with source “http://my_public_vps_ip/static/js/0.chunk.js”. ecapp:30:1
Loading failed for the <script> with source “http://my_public_vps_ip/static/js/main.chunk.js”. ecapp:30:1

I want to load the front-end app at http://my_public_vps_ip/ecapp/.

Thanks.

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
Submit an Answer
1 answer

Hello,

I would recommend updating your proxy rules to:

location /ecapp {
        rewrite ^/ecapp/(.*)$ /$1 break;

        proxy_http_version 1.1;
        proxy_cache_bypass $http_upgrade;

        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_pass http://localhost:3000;
}

Let me know how it goes!
Best,
Bobby