修改Nginx proxy_pass配置后React应用无法加载，求正确配置位置

我有React前端、Node.js后端和Nginx环境，已经通过Certbot获取并安装了SSL证书。我的应用需要发送GET和POST请求，所以需要配置proxy_pass。当前的Nginx服务器块配置如下：

server {
        root /var/www/nikolsoborsocial/html;
        index index.html index.htm index.nginx-debian.html;

        server_name nikolsoborsocial nikolsoborsocial.org
                                     www.nikolsoborsocial.org;

        location / {
                try_files $uri $uri/ =404;
                               
        }
        
        listen [::]:443 ssl ipv6only=on; # managed by Certbot
        listen 443 ssl; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/nikolsoborsocial.org/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/nikolsoborsocial.org/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.nikolsoborsocial.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

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

        listen 80;
        listen [::]:80;

        server_name nikolsoborsocial nikolsoborsocial.org
                                     www.nikolsoborsocial.org;

        return 404; # managed by Certbot
}

请问应该将以下proxy_pass配置添加到何处？

proxy_pass http://localhost:3000;
include proxy_params;

如果直接替换443服务器块location /中的try_files $uri $uri/ =404;配置，React应用会无法加载，浏览器显示"Cannot GET /"错误。

核心思路：区分静态资源与API请求 #

React是单页应用（SPA），需要Nginx优先处理前端静态文件，同时将后端API请求转发到Node.js服务。直接替换location /的配置会导致所有请求都被转发到Node，但Node并未托管React的静态资源，因此出现"Cannot GET /"错误。

修改后的Nginx配置 #

server {
    root /var/www/nikolsoborsocial/html;
    index index.html index.htm index.nginx-debian.html;

    server_name nikolsoborsocial nikolsoborsocial.org www.nikolsoborsocial.org;

    # 处理React静态资源与SPA路由
    location / {
        try_files $uri $uri/ /index.html; # 找不到文件时返回index.html，支持前端路由
    }

    # 转发API请求到Node.js后端（根据实际API前缀调整）
    location /api/ {
        proxy_pass http://localhost:3000/; # 末尾的/确保路径正确拼接
        include proxy_params;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/nikolsoborsocial.org/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/nikolsoborsocial.org/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.nikolsoborsocial.org) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

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

    listen 80;
    listen [::]:80;

    server_name nikolsoborsocial nikolsoborsocial.org www.nikolsoborsocial.org;

    return 404; # managed by Certbot
}

关键说明 #

1. location /的作用：

   • 优先加载React打包后的静态文件（如index.html、main.js等）
   • 当访问前端路由（如/about）时，Nginx找不到对应文件，会返回index.html，由React路由系统处理页面跳转

2. location /api/的作用：

   • 所有以/api/开头的请求都会被转发到运行在localhost:3000的Node.js服务
   • 确保Node后端的API接口都以/api/为前缀（如果后端没有前缀，可以调整此规则，比如根据请求方法或Content-Type区分）

3. 配置生效步骤：

   • 执行sudo nginx -t检查配置语法是否正确
   • 执行sudo systemctl reload nginx重启Nginx使配置生效

内容的提问来源于stack exchange，提问作者Dmitry Borisenko