Nginx reverse proxy to both nextjs and react-admin

Question

I have an existing app written in nextjs because I need SSR. Since I don't need SSR on the admin side I would like to use react-admin. I don't intent to integrate the two but instead have them run as separate processes/services on separate ports and have nginx do the proxy routing. I am having difficulty in configuring react-admin.

nextjs running on 127.0.0.1:3000
react-admin running on 127.0.0.1:3001

Configuration for nginx reverse proxy location:

server {
    server_name www.mydomainname.com;

    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;


    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
     }

    location /admin {
        proxy_pass http://127.0.0.1:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
     }

     # 301 Redirect URLs with trailing /'s
     #as per https://webmasters.googleblog.com/2010/04/to-slash-or-not-to-slash.html
     rewrite ^/(.*)/$ /$1 permanent;


     # 301 redirect from custom redirect file
     if ( $redirect_uri ) {
        return 301 $redirect_uri;
     }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mydomiainname.com/fullchain.pem # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mydomainname.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
}

I believe the nginx config to be correct. When navigating to /admin react-admin is responding with a blank "React App" page instead of the default page seen from it's root, '/', path.

I have tried setting the 'homepage': "/admin" in the react-app package.json file with no joy.

How do i configure react-app to serve pages by default to /admin instead of /?

Possible duplicate of [How to preserve request url with nginx proxy\_pass](https://stackoverflow.com/questions/5834025/how-to-preserve-request-url-with-nginx-proxy-pass) — creikey, Feb 09 '19 at 04:54

Nikolas Stevenson-Molnar · Accepted Answer · 2019-02-09T05:10:50.890

The problem is likely that the path proxied to react-admin is /admin instead of just /. To avoid this, you want to add a trailing slash / to the end of your proxy_pass URL:

location /admin {
    proxy_pass http://127.0.0.1:3001/;
    ...
}

This is explained in the proxy_pass section of the Nginx docs, though admittedly the language is a bit esoteric:

If the proxy_pass directive is specified with a URI, then when a request is passed to the server, the part of a normalized request URI matching the location is replaced by a URI specified in the directive:
location /name/ {
    proxy_pass http://127.0.0.1/remote/;
}
If proxy_pass is specified without a URI, the request URI is passed to the server in the same form as sent by a client when the original request is processed, or the full normalized request URI is passed when processing the changed URI:
location /some/path/ {
    proxy_pass http://127.0.0.1;
}

Oh, Jesus! Thank you, Nikolas! I would have never guessed what's wrong if not our answer )) — Alex, Aug 20 '21 at 13:39

Nginx reverse proxy to both nextjs and react-admin

1 Answers1

Linked