Nginx reverse proxy for port 3001

Question

I have an express server running on port 3001 which serves a React app.

Lets say that my domain name is example.com; What I am trying to achieve is:

1. The possibility to call https://example.net/api/getUsers

2. Redirecting from http://1.2.3.4:3001/ with port to https://example.net/

3. Basically redirecting all HTTP calls (whether as IP or domain) to https://example.net/

Could anyone help with setting up that Nginx config? This is what I currently have under /etc/nginx/sites-available:

server {
        server_name 1.2.3.4:3001;
        return 301 https://example.net;
}

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        listen 443 default_server ssl;
        listen [::]:443 default_server ssl;
        server_name example.net www.example.net;

        return 301 https://example.net$request_uri;
}

server {
  listen 80;

  server_name example.net www.example.net;

  location / {
    proxy_pass http://localhost:3001;
    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;
  }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.net/fullchain.pem; # managed by Certbot
   ssl_certificate_key /etc/letsencrypt/live/example.net/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

Answer 1

Looks like your app is returning redirect with Location: http://1.2.3.4:3001/ You can rewrite it with proxy_redirect and reduce redundant stuff.

 server { listen 80 default_server; return 301 https://example.net$request_uri; } server { listen 443 ssl; # managed by Certbot ssl_certificate /etc/letsencrypt/live/example.net/fullchain.pem; # managed by Certbot ssl_certificate_key /etc/letsencrypt/live/example.net/privkey.pem; # managed by Certbot include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot server_name example.net www.example.net; location / { proxy_pass http://localhost:3001; 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; proxy_redirect http://1.2.3.4:3001/ $scheme://$host/; } }

Yes, you can add the following redirect:

server {
        listen 1.2.3.4:3001;
        return 301 https://example.net;
}

But note your react app. locally listens on localhost:3001

proxy_pass http://localhost:3001;

so ensure react app. is not listening on 1.2.3.4:3001 socket too. Otherwise, you will get Address already in use error and nginx will fail to start.