Configure nginx for nodejs backend and React frontend app

Hello,

You could try adding something like this to your Nginx server block:

location / {
    # This would be the directory where your React app's static files are stored at
    root /var/www/html/;
    try_files $uri /index.html;
}

Then, for the Node server you would keep what you have but put it at a different path, like so:

location /graphql {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://localhost:5000/;
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
}

With the above you would basically proxies your traffic for /graphql to your Node server on port 5000 and also you would serve your static contents of /var/www/html for your mywebsite.com.

As always make sure to backup your config before making the changes and also run a Nginx config test before restarting Nginx:

nginx -t

If you get Syntax OK then you should be OK to restart Nginx:

systemctl restart nginx

Hope that this helps! Regards, Bobby

Hello,

You could try adding something like this to your Nginx server block:

location / {
    # This would be the directory where your React app's static files are stored at
    root /var/www/html/;
    try_files $uri /index.html;
}

Then, for the Node server you would keep what you have but put it at a different path, like so:

location /graphql {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://localhost:5000/;
    proxy_ssl_session_reuse off;
    proxy_set_header Host $http_host;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
}

With the above you would basically proxies your traffic for /graphql to your Node server on port 5000 and also you would serve your static contents of /var/www/html for your mywebsite.com.

As always make sure to backup your config before making the changes and also run a Nginx config test before restarting Nginx:

nginx -t

If you get Syntax OK then you should be OK to restart Nginx:

systemctl restart nginx

Hope that this helps! Regards, Bobby

Hello, I have the issue maping my public IP:3000 to my domain name. the public-IP:port work well when I run the script “npm run dev” each backend and front-end of my react app work perfectly on the browser and I can even access via another PC. But when I run my domain name it doesn’t find the configuration on the server that should map it to the public-IP:3000, but at least it run the default index.html. Front-end running on localhost:3000 and Backend running on localhost:7000 here is the server config:

server {
         listen 80;

        server_name 64.50.0.125
        server_name appname.com;
        root /root/reactAppfolder;

        location / {
                proxy_pass http://localhost:3000;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
            }

} 

I need your expertise to solve my issue.

I have the same configuration but my /backend for my backend API calls gives CANNOT GET …if I interchange my frontend route from / to /frontend and my backend from /backend to / my backend works but my frontend gives CANNOT Get. Any idea whats wrong?

I had the same configuration. Instead of /graphql I am using /backend for my backend API calls. If I run with my IP/backend it is showing error like Cannot GET. Any idea how to solve it?