Configure nginx for nodejs backend and React frontend app

August 16, 2019 245 views
Nginx Node.js React Ubuntu 18.04

I want to configure nginx to serve static React files, and listen for requests on “mywebsite.com/graphql”, but I am not exactly sure how to do that. Any help is appreciated!

1 Answer

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

Have another answer? Share your knowledge.