NGINX 404 error when accessing nested React App routes

Question

Background/Objectives:

Hi everyone, first time poster here!

I am currently trying to configure NGINX so that it -

Serves a React App when specific routes are hit e.g. /auth/
Proxies all traffic on the /api route to a Node back-end
Serves a Wordpress site on all other routes

Issue: I have an /auth location block defined in my NGINX config file that points to a React App contained in the folder /home/ubuntu/app/client/build.

If I visit the /auth route, NGINX correctly serves the React App.

However, when I make a HTTP request to a nested route (e.g. /auth/login) I get a 404 error.

I have tried stripping the NGINX config file back to just contain the /auth location block but the issue still persists. Therefore, I don't think it has to do with other settings inside the file.

Specifying exact routes is not a viable solution as many of the other routes I am yet to add have dynamic nested values e.g. /users/someuniqueid.

Configuration File

Hopefully the following sheds some light on what I am doing wrong. Note, I have removed the server name for privacy reasons so please don't assume I have used that actual name :)

server {
  listen 80;
  server_name myipaddress;
  root /home/ubuntu/wordpress;
  index index.php index.html index.htm;

  location / {
    try_files $uri $uri/ /index.php?$args;
  }

  location /css {
    alias /home/ubuntu/app/client/build/css;
  }

  location /media {
    alias /home/ubuntu/app/client/build/media;
  }

  location /static {
    alias /home/ubuntu/app/client/build/static;
  }

  location /assets {
    alias /home/ubuntu/app/client/build/assets;
  }

  location /auth {
    alias /home/ubuntu/app/client/build;
  }

  location ~ \.php$ {
    fastcgi_split_path_info  ^(.+\.php)(/.+)$;
    fastcgi_index            index.php;
    fastcgi_pass             unix:/var/run/php/php7.3-fpm.sock; #Ubuntu 17.10
    include                  fastcgi_params;
    fastcgi_param   PATH_INFO       $fastcgi_path_info;
    fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
  }

  location /api {
    proxy_set_header  X-Real-IP  $remote_addr;
    proxy_set_header  Host       $http_host;
    proxy_pass        http://localhost:5000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/myurl.io/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/myurl.io/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhusername.pem; # managed by Certbot
}

is it running on using docker, ngix running on docker and node app aslo in docker ? — Moshiour, Mar 19 '20 at 12:14
I'm not using containers. It is all running on a single Ubuntu EC2 instance at the moment. — Mike P, Mar 19 '20 at 12:57

Richard Zhan · Answer 1 · 2020-03-19T16:59:36.037

0

This problem is already mentioned here.

Try replacing the location /auth configuration with this.

location /auth/ {
     alias  /home/ubuntu/app/client/build;
     index  index.html;

     try_files $uri $uri/ /index.html?$args;
}
location / {
    alias  WORD_PRESS_PATH_HERE;
    index index.php;

    location ~ \.php$ {
      fastcgi_split_path_info  ^(.+\.php)(/.+)$;
      fastcgi_index            index.php;
      fastcgi_pass             unix:/var/run/php/php7.3-fpm.sock; #Ubuntu 17.10
      include                  fastcgi_params;
      fastcgi_param   PATH_INFO       $fastcgi_path_info;
      fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

Thanks for reading.

edited Mar 19 '20 at 16:59

answered Mar 19 '20 at 14:32

Richard Zhan

460
3
10

Thanks for the reply! I tried your suggestion, unfortunately NGINX tried to serve the Wordpress site instead which is setup to run on the default '/' route. Wordpress could not find the URI and so it returned its own 404 page. – Mike P Mar 19 '20 at 14:50
try using `alias` instead of `root`, please. – Richard Zhan Mar 19 '20 at 14:55
Same issue unfortunately. – Mike P Mar 19 '20 at 15:07
could you try wrapping wordpress route configuration with `location / { }`? – Richard Zhan Mar 19 '20 at 16:56
I got excited for a moment but then realized I had implicitly specified the /auth/login route. It's still not working. Also now "/" returns 403 Forbidden – Mike P Mar 19 '20 at 17:11

NGINX 404 error when accessing nested React App routes

1 Answers1