Nginx 404 Not Found when entering a specific url path

Question

What I am trying to do is to prepare this machine to serve my web application. It works without any problems when I serve it via npm start. I have a domain, let's say, example.com on which I installed SSL with Certbot and have successfully rerouted http to https with www.example.com and example.com.

Now what happens is when I go to www.example.com or example.com it works fine, and I can move to whatever url path I want, as long as it is directly accessed from any button on the homepage, but whenever I try to access an individual url path, let's say myexample.com/admin/login (it is hidden from the homepage) or any manually entered url path, the webserver returns error 404. This does not happen when I do the same with npm start.

I am running an EC2 machine with the following components installed:

Operating System: Ubuntu 20.04 LTS
Webserver: Nginx 1.18
Node: 10.24.1
NPM: 6.14.12
SSL Provider: Let'sEncrypt (Certbot 0.40.0)

I have the following ports open from the EC2 Management Console:

80/custom anywhere (http)
443/custom anywhere (https)
22/custom my IP (ssh)
3000/Custom my IP (npm start default port)

I have also allocated an Elastic IP to my machine, let's say it's 1.1.1.1 .

My Nginx config file is located at: /etc/nginx/sites-enabled and is called: client-config

I have set up my Nginx client-config to look like this:

server {
    server_name 1.1.1.1 example.com www.example.com; # 1.1.1.1 this is an example ip
    root /home/ubuntu/app-deploy/build;
    index index.html; # react by default generate the file in the build directory
    location / {
        try_files $uri $uri/ =404;
    }

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


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


    listen 80;
    server_name 1.1.1.1 example.com www.example.com; # 1.1.1.1 this is an example ip
    return 404; # managed by Certbot




}

Running nginx -t returns:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Any help would be appreciated as I am new to this.

score 1 · Answer 1 · answered Jul 19 '22 at 16:19

The try_files $uri $uri/ =404 tells nginx to look for physical files on the file system.

You need to route the request to your Node.JS application. One way to do it is as follows:

location / {
    try_files $uri $uri/ @application;
}

location @application {
    proxy_pass http://127.0.0.1:3000;
}

This configuration tells nginx to first search for physical files, and if no file is found, then the request is passed to your NPM server.

Nginx 404 Not Found when entering a specific url path

1 Answers1

Linked