reactjsexpressnginxhttp-status-code-504

Express API backend receiving requests but not responding, Nginx


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?


Solution

  • 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;
        }
    }