Nginx 404 not found for NodeJS App Express Routes

Question

I am trying to run a React App and Node JS app on the same VPS but all api calls to the Express app (NodeJS) are giving me error 404 not found.

I am using nginx and here is my config file:

 # Default server configuration
#
server {
    listen 80 default_server;
    listen [::]:80 default_server;

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        # try_files $uri $uri/ =404;
    }

    # pass PHP scripts to FastCGI server
    #
    #location ~ \.php$ {
    #   include snippets/fastcgi-php.conf;
    #
    #   # With php-fpm (or other unix sockets):
    #   fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    #   # With php-cgi (or other tcp sockets):
    #   fastcgi_pass 127.0.0.1:9000;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#   listen 80;
#   listen [::]:80;
#
#   server_name example.com;
#
#   root /var/www/example.com;
#   index index.html;
#
#   location / {
#       try_files $uri $uri/ =404;
#   }
#}

map $http_upgrade $connection_upgrade {
    default         upgrade;
    ''              close;
}
server {
     
       server_name domain_name.org www.domain_name.org;
       
       location / {
        # Backend nodejs server
        proxy_pass         http://127.0.0.1:3000;
        proxy_http_version  1.1;
        proxy_set_header    Upgrade     $http_upgrade;
        proxy_set_header    Connection  $connection_upgrade;
    }

       location /user {
        # Backend nodejs server
        proxy_pass         http://127.0.0.1:5000;
        proxy_http_version  1.1;
        proxy_set_header    Upgrade     $http_upgrade;
        proxy_set_header    Connection  $connection_upgrade;
    }
       location /questions {
        # Backend nodejs server
        proxy_pass         http://127.0.0.1:5000;
        proxy_http_version  1.1;
        proxy_set_header    Upgrade     $http_upgrade;
        proxy_set_header    Connection  $connection_upgrade;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/domain_name.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/domain_name.org/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 {
    if ($host = www.domain_name.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = domain_name.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


     
       server_name domain_name.org www.domain_name.org;
    listen 80;
    return 404; # managed by Certbot
}

I cannot for the life of me figure out where I'm making the mistake.

It should also be noted that the program works well on my local machine so I don't THINK it's a code or logical error, though please correct me if that's a wrong assumption.

Also the / redirect works fine so I can load the main domain page, just none of the backend/API calls work.

Answer 1

You need 2 reverse proxy server, 1 for the NodeJs backend and the other for the react app.

// backend server
server {
   listen 80;
   server_name api.example.com;
   location / {
      proxy_pass http://localhost:4000;  # replace port with your backend port
   }
}

// react server
server {
   listen 80 default_server;
   server_name example.com;
   location / {
      proxy_pass http://localhost:4000;  # replace port with your react port
   }
}

In your react project use the backend domain api.example.com in your axios or fetch api request... You can configure the ssl certificate... I didn't do that to make the answer minimal and clear...

I also advice you use process manager like PM2 on your backend and react