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

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

您缺少上游服务器指令。尝试这个

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