如何在三级域名下通过Nginx同时运行React应用与Node.js服务

解决步骤 #

1. 修正React启动脚本

你当前用的set PORT=3006是Windows系统的环境变量配置语法，Linux服务器无法识别，导致React开发服务器默认启动在3000端口，引发端口冲突。将客户端package.json里的start配置修改为：

"start": "PORT=3006 DANGEROUSLY_DISABLE_HOST_CHECK=true react-scripts start"

其中DANGEROUSLY_DISABLE_HOST_CHECK=true用于关闭create-react-app默认的Host头校验，解决Invalid Host header报错。

2. 调整三级域名Nginx配置

直接通过Nginx区分前端和后端请求，稳定性高于React自带的开发代理，调整后的配置如下：

server {
    listen 80;
    listen [::]:80;

    root /var/www/criptoarbitr.178.20.42.150.sslip.io/html;
    index index.html index.htm index.nginx-debian.html;

    server_name criptoarbitr.178.20.42.150.sslip.io www.criptoarbitr.178.20.42.150.sslip.io;

    # 后端接口转发，匹配所有/api前缀的请求到3010端口的Node服务
    location ^~ /api/ {
        proxy_pass http://localhost:3010;
        client_max_body_size 100m;
        client_body_timeout 600s;
        proxy_connect_timeout 70;
        proxy_send_timeout 90;
        proxy_read_timeout 90;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 前端页面请求转发到3006端口的React开发服务
    location / {
        proxy_pass http://localhost:3006;
        client_max_body_size 100m;
        client_body_timeout 600s;
        proxy_connect_timeout 70;
        proxy_send_timeout 90;
        proxy_read_timeout 90;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

如果你的Node接口没有统一/api前缀，也可以根据实际路径调整匹配规则，或者直接把需要转发的接口路径都配置到对应的location块中；如果需要去掉转发时的/api前缀，把proxy_pass改为http://localhost:3010/即可。

3. 调整前端请求规则&移除冗余配置

• 删除客户端package.json中的proxy配置，所有接口请求改为相对路径，比如原来请求http://localhost:3010/test改为/api/test（和Nginx的前缀匹配规则对应）。

4. 重启服务生效

1. 重启Node服务，确保运行在3010端口
2. 重新启动React开发服务，确认运行在3006端口
3. 执行nginx -t验证配置无误后，执行nginx -s reload重载Nginx配置

配置完成后直接访问三级域名即可同时加载前端页面、正常调用后端接口。

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