'Backend Api error (502 bad gateway) from React Cilent to Express Server during deployment

I am trying to deploy my app on digital ocean (react-express app). During deployment, I used to make my requests to the following endpoint "http://localhost:8000/backend/*". Now that I am deploying my app on an Nginx server my frontend seems to be working fine all my API requests are throwing errors. The following are the error scenarios, on endpoint "http://localhost:8000/backend/*" I get GET net::ERR_CONNECTION_REFUSED on changing the endpoint to "http://example.com/backend/*" I get a 502 Nginx Bad gateway error. I am not sure if it is because of my endpoint or because of some Nginx configuration error . Any help is appreciated. Thanks in advance. I am also adding my server code and Nginx config file screenshot for reference

import dotenv from 'dotenv';
import helmet from 'helmet';
dotenv.config();
import cors from 'cors';
import express from 'express';
import updates from './routes/updates.js';
import userAuth from './routes/authenticate.js';
import users from './routes/users.js';
import orders from './routes/orders.js';
import contact from './routes/contact.js';
import errorhandler from './routes/error.js';
import services from './routes/services.js';
import cookieParser from 'cookie-parser';
import { authenticateUser } from './controller/authenticate.js';
import addresses from './routes/addresses.js';
import payments from './routes/payments.js';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express();
app.use(cors({ origin: process.env.WEBSITE_URL, credentials: true }));
app.use(
    helmet({
        contentSecurityPolicy: {
            useDefaults: true,
            directives: {
                scriptSrc: [
                    "'self'",
                    'razorpay.com',
                    '*.razorpay.com',
                    'fontawesome.com',
                    '*.fontawesome.com',
                    'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
                ],
                imgSrc: ["'self'", 'data:'],
                connectSrc: ["'self'", '*.fontawesome.com'],
                manifestSrc: process.env.SERVER_URL,
            },
        },
    })
);
app.use(express.json());
app.use(
    express.urlencoded({
        extended: false,
    })
);

app.use(cookieParser());
const port = process.env.PORT || 8000;

app.use('/backend/addresses', authenticateUser, addresses);
app.use('/backend/updates', updates);
app.use('/backend/user', authenticateUser, users);
app.use('/backend/authenticate', userAuth);
app.use('/backend/orders', authenticateUser, orders);
app.use('/backend/contact', contact);
app.use('/backend/payments', payments);
app.use('/backend/services', services);
app.use(errorhandler);
app.listen(port, () => console.log('Server is running on port ' + port));

Nginx config

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source