如何将 static 资产 (html) 提供给运行 nginx 的节点服务器？

Question

I have a server running with pm2 that is being served up by nginx. I would like to point my react app to the domain, and have the server only respond to requests that the client sends.

currently if you go to jwcuisine.io it gives you a "CANNOT GET /" message, I tried something like this:

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

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

However, the above ^^^ led to a 500 error from nginx.

Below is the code I currently have, that is giving the /GET response. Any direction would be appreciated, I can't find a ton of relevant information pertaining to this.

server {
    server_name jwcuisine.io www.jwcuisine.io;

    location / {
        proxy_pass http://localhost:4000; #whatever port your app runs on
        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;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/jwcuisine.io/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/jwcuisine.io/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = www.jwcuisine.io) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = jwcuisine.io) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80 default_server;
    listen [::]:80 default_server;

    server_name jwcuisine.io www.jwcuisine.io;
    return 404; # managed by Certbot
}

Answer 1

I am also using similar architecture to host my website front-end and back-end via nginx reverse proxy server. There is an update in your nginx conf after which it will work as expected. That is you need to add first all subroutes(Ex. /api , graphql ) and then you need to add the location for index route / . In your current conf website will never be able to go to server as /server route gets matched to index route / first and it will try to find it in the static folder and never reach the proxy_pass you have provided in below location.

Update nginx.conf:

server{
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name jwcuisine.io www.jwcuisine.io;

    location /graphql {
        proxy_pass "http://127.0.0.1:5000";
        proxy_read_timeout 5400s;
        proxy_send_timeout 5400s;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
    }


    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
    }
}