Unable to setup Express server on HTTPS

Question

Trying to set up my Express server on HTTPS but unable to access my api. Here is my code:

// server.js
const express = require('express');
const { readFileSync } = require('fs');
const https = require('https');
const app = express();

const key = readFileSync(
  '/etc/letsencrypt/live/mydomain.com/privkey.pem',
  'utf8'
);
const cert = readFileSync(
  '/etc/letsencrypt/live/mydomain.com/fullchain.pem',
  'utf8'
);
const ca = readFileSync(
  '/etc/letsencrypt/live/mydomain.com/chain.pem',
  'utf8'
);
const credentials = { key, cert, ca };

const port = 443

const server = https.createServer(credentials, app);

server.listen(port, () => console.log(`Server is running on port ${port}`));

The error I am receiving is a 502 Bad gateway on all calls to the server.

Everything worked perfectly before when I was running on HTTP like this:

const server = app.listen(8000, () => {});

Beside the URL on my site I can see the padlock icon and it says my site is secure so I believe my certifcate is valid.

Have seen a lot of similar questions posted on here and followed what I've seen in responses. I've even asked chatGPT to check my code and it doesn't see any errors. I've also tried reading my SSL keys as .env variables so I don't think the issue is an incorrect file path.

Can anybody please help me find the solution?

EDIT

Here is an example of a get request I am making to my backend using axios:

const fetchMembers = async () => {
    await axios
      .get(`/api/total-users`)
};

This invokes a function totalUsers with express.Router from a users file in my routes folder on the backend:

// routes/users.js
const express = require('express');
const router = express.Router();

router.get('/total-users', totalUsers);

const totalUsers = async (req, res) => {
  try {
    const total = await User.find().estimatedDocumentCount();
    res.json(total);
  } catch (err) {
    console.log(err);
  }
};

I am using a middleware app.use with a prefix /api and importing the users file to make a connection to my endpoints:

// server.js
const userRoutes = require('./routes/users')

app.use('/api', userRoutes)

While editing this question I tried modifying the middleware prefix to `:443/api' however this still hasn't helped.

Answer 1

Where is User defined inside of routes/users.js? You need to import your DB models before accessing them like this:

const total = await User.find().estimatedDocumentCount();

Otherwise, generally when running fetch('/api...), React will try to access localhost:3000/api instead of localhost:443/api.

React needs to know where to proxy requests to the backend. One way is using the http-proxy-middleware library and by defining a setupProxy.js file.

client/src/setupProxy.js

/**
 * Proxy most calls to the server
 * @type {Array}
 */
/* eslint-disable @typescript-eslint/no-var-requires */
const { createProxyMiddleware } = require('http-proxy-middleware');

const proxy_urls = ['/api/*';

const target = 'https://localhost:443';

module.exports = function (app) {
  proxy_urls.forEach((url) => {
    app.use(url, createProxyMiddleware({ target }));
  });
};