ReactJS with 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 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

ReactJS with Nginx 404 Not Found when entering a specific url path

0 Answers