Configuring nginx for React and Node

Question

I am trying to configure nginx for my application setup. I have a React app, and it talks to a Node backend, running at localhost:3000.

In nginx.conf:

server { listen 80; server_name localhost; location / { root D:\....\build; index index.html; try_files $uri $uri/ /index.html; # Proxy to the Node backend proxy_pass http://localhost: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; } } 

But this doesn't serve React app, just shows a page with message 'Node Authentication'.

What am I missing in my config?

Answer 1

A single location can have only one content handler - either the static one, for static content serving, or provided by some nginx module (such as ngx_http_proxy_module by using the proxy_pass directive). You need to split your config in two locations, distinguishing your requests by the request URI prefix. A typical configuration should look somewhat like the following:

location / { # implicit static content handler root D:\....\build; index index.html; try_files $uri $uri/ /index.html; } location /api/ { # explicit ngx_http_proxy_module content handler proxy_pass http://localhost: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; } 

The /api/ URI prefix is given as an example only; the actual prefix depends on your backend application. You do need to distinguish requests to the frontend and backend somehow, and a URI prefix is the most common way to do it.