Express API backend receiving requests but not responding, Nginx - reactjs

Question

I have a front end reactjs being served by nginx. shown here:
server {
listen 80 default_server;
server_name website.* www.website.*;
root /home/developer/website/frontend/build;
location / {
try_files $uri /index.html;
}
location /api {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:4000;
}
}
Additionally, I have a second express app receiving requests at 127.0.0.1:4000. The front end calls fetch to 'api/something' and the express app receives that and handles it but does not respond, the client side errors with 504 (Gateway Time-out). Any ideas?

Answer 1

You are missing the upstream server directive. Try this
upstream api {
server 127.0.0.1:4000;
}
# remove www from the url
server {
listen 80;
server_name www.website.com;
return 301 $scheme://website.com$request_uri;
}
server {
listen 0.0.0.0:80;
server_name website.com website;
error_log /var/log/nginx/website.com-error.log error;
access_log /var/log/nginx/website.log;
# pass the request to the node.js server with the correct headers
location /api/ {
proxy_pass http://api/;
proxy_ignore_headers X-Accel-Expires Expires Cache-Control;
proxy_ignore_headers Set-Cookie;
proxy_hide_header Set-Cookie;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_set_header X-NginX-Proxy true;
}
}