0

ok, So, I have built a React app and deployed it under Nginx. So, far everything is working i.e. Nginx serves the site over HTTPS though in my React app, I use react-router-dom with a default route to my custom 404 page.. see below. The one with /* routes unhandled requests to my custom 'Not Found' page. This whole thing works fine when I just run react app locally i.e. by running "npm run" though after I deploy the static build to my web server where I have Nginx as a reverse proxy, any attempt to access valid secured pages (post login) or invalid page routes only shows Nginx default 404 page. My Nginx config is as per below..

include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  licenses.mydomain.como;
        return 301 https://$host$request_uri;
        #root         /usr/share/nginx/html;
        root         /srv/www/licenses;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        index  index.html index.htm;
    try_files $uri $uri/ /index.html =404;
        }

        error_page 404 /404.html;
            location = /404.html {
                root /usr/share/nginx/html;
                #internal;
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

const routes = [
{
    path: "/",
    exact: true,
    isPrivate: false,
    page: () => <HomePage />,
  },
  {
    path: "/home",
    exact: true,
    isPrivate: false,
    page: () => <HomePage />,
  },
  {
    path: "/changerequest/",
    exact: true,
    isPrivate: false,
    page: () => <ChangeRequestApplication />,
  },
  {
    path: "/approvalcoderequest",
    exact: true,
    isPrivate: false,
    page: () => <ApprovalCodeRequest />,
  },
  {
    path: "/staffapp/",
    exact: true,
    isPrivate: false,
    page: () => <StaffApplication />,
  },
{
    path: "/reports/spotsallocationspersite",
    exact: true,
    isPrivate: true,
    menuid: 24,
    page: () => <SpotsAllocationPerSite />,
  },
  {
    path: "*",
    exact: true,
    isPrivate: false,
    page: () => <NotFound />,
  },
];
Dev
  • 177
  • 1
  • 5
  • 15

2 Answers2

0

Remove the following section in your nginx.conf file:

error_page 404 /404.html;
location = /404.html {
     root /usr/share/nginx/html;
     #internal;
}

Since your react app handles the 404 page already.

Replace the location block as follows:

location / {
     index  index.html index.htm;
     try_files $uri $uri/;
}
Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43
  • Thanks Amila. I have already tried it before (and re-tried just now) by commenting those line even commenting the location / {} block and still it serves the root location but when you enter a protected route, it just displays Nginx standard 404 page. – Dev May 21 '21 at 03:23
  • This is the error I see in the error.log of Nginx ... 2021/05/21 13:21:37 [error] 2018290#0: *1 open() "/srv/www/licenses/outstandingrequests" failed (2: No such file or directory), client: 117.24.21.171, server: licenses.mydomain.com, request: "GET /outstandingrequests HTTP/2.0", host: “licenses.mydomain.com” – Dev May 21 '21 at 03:27
  • I think the issue might be related to how Reactjs pages gets served as just one single page index.html. Everything else just gets rendered by JS. The URL changes in the browser throughout the app are just to show the user that they've moved from one page to the other. Behind the scene as we know react just re-renders the canvas with new HTML elements. So, in this case when I tried the base url with /outstandingrequests Nginx can't find any folder like /outstandingrequest and displays the error page. May be something needs to be added as a wildcard or regex in the location section .. – Dev May 21 '21 at 03:58
0

I found the solution in this SO post. Basically as per this post added below location segment to your ssl.conf or nginx.conf.

location / {

  if (!-e $request_filename){

    rewrite ^(.*)$ /index.html break;

  }

}
Dharman
  • 30,962
  • 25
  • 85
  • 135
Dev
  • 177
  • 1
  • 5
  • 15