Struggling with Nginx Reverse Proxy Setup for HTTPS (Port 443)

Hello, community!

I've been struggling with this issue for almost two weeks now and need some help. I'm hosting a simple app on my server to test it online. To set it up properly, I decided to use Nginx as a reverse proxy for my Node.js application.

The Goal

I want to be able to connect to my app using HTTPS (port 443) without having to specify any port in the URL. Currently, I can connect to the server on different ports (e.g., 8080 or 443), but I always need to include the port number explicitly. I would like to make this seamless and work as expected for HTTPS.

What I've Tried

1. Network Configuration:

   • I’ve opened the necessary ports on my router:

     Public 80 -> Private 80
     Public 443 -> Private 443
     Public 8080 -> Private 8080
     

     Example of the port forwarding configuration:

     Public   Private   Protocol
     80-80    80-80     TCP
     443-443  443-443   TCP
     8080-8080 8080-8080 TCP
     

2. Node.js Express Server:

   • My Express app is set up to listen on port 8080.
   • Here's my server/index.js file:

     const express = require('express');
     const routes = require('./routes');
     const path = require('path');
     const app = express();
     
     const httpPort = 8080; // Port to listen for HTTP
     
     // Middleware for processing JSON data
     app.use(express.json());
     
     // API routes
     app.use('/api', routes);
     
     // Static files served by Vue.js
     app.use(express.static(path.join(__dirname, "../client", "dist")));
     
     // Error handling for static files
     app.use((err, req, res, next) => {
         res.status(500).send('Something went wrong!');
     });
     
     // Vue.js default route
     app.get('*', (req, res) => {
         res.sendFile(path.join(__dirname, "../client", "dist", "index.html"));
     });
     
     // Start the HTTP server
     app.listen(httpPort, () => {
         console.log(`Server running on http://localhost:${httpPort}`);
     });
     

3. Nginx Configuration:

   • My Nginx is configured to:
     • Listen on port 80 for HTTP and redirect it to port 443 for HTTPS.
     • Use port 443 for SSL with a reverse proxy to my Node.js app on port 8080.
   • Here's my Nginx configuration:

     server {
         listen 80;
         server_name MY_SERVER_NAME;
     
         # Redirect HTTP to HTTPS
         return 301 https://$host$request_uri;
     }
     
     server {
         listen 443 ssl;
         server_name MY_SERVER_NAME;
     
         # SSL certificates (Let's Encrypt or your own certs)
         ssl_certificate /home/<user>/certificates/fullchain.pem;
         ssl_certificate_key /home/<user>/certificates/privkey.pem;
     
         # Configure the proxy to pass traffic to Node.js (HTTP)
         location / {
             proxy_pass http://localhost:8080;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection 'upgrade';
             proxy_set_header Host $host;
             proxy_cache_bypass $http_upgrade;
         }
     }
     

4. Firewall Rules (UFW):

   • I've ensured all relevant ports are allowed:

     To      Action    From
     443/tcp ALLOW     Anywhere
     80/tcp  ALLOW     Anywhere
     8080/tcp ALLOW    Anywhere
     

5. Checking Sockets:

   • When I start my Node.js server and check active sockets using ss -tuln, I can see:

     tcp   LISTEN   0   511    0.0.0.0:443    0.0.0.0:*
     tcp   LISTEN   0   511       *:8080       *:*
     

The Problem

Despite all this, I cannot connect to my app seamlessly on HTTPS (port 443). I still need to manually specify the port in the URL for the connection to work.

What Am I Missing?

1. Is there something wrong with my Nginx configuration or my Node.js setup?
2. Could it be an issue with how I handle SSL or the reverse proxy?
3. Am I overlooking something in my network or firewall settings?

Thanks in advance for your help! Any insights would be greatly appreciated.