Nginx 1.25 反向代理抛出 502 错误网关错误，为反应客户端添加第二个域

Question

在 ubuntu 20 服务器上为

reverse proxy nginx

 配置了 

currentdomain.com

 1.25。现在，第二个域 

domain2nd.com

 被添加到 nginx 来托管 

React

 客户端。当反应客户端建立连接时，以下配置会引发 502 bad gateway 错误。这是 nginx.conf：

server {. #for currentdomain.com which is working fine

  location / {
    proxy_pass http://127.0.0.1:8545;
  }

  location /api {. ###nodejs server
    #rewrite /api/(.*) $1 break;
    proxy_pass http://127.0.0.1:5000;

    proxy_set_header X-Real-IP $remote_addr;
  }

  location ~ ^/(sokt|socket.io) {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;

      proxy_pass http://127.0.0.1:5000;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
  }

  server_name currentdomain.com www.currentdomain.com;
  #

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/currentdomain.com/fullchain.pem; # managed by Ce>
    ssl_certificate_key /etc/letsencrypt/live/currentdomain.com/privkey.pem; # managed by >
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}

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


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


  listen 80;

  server_name currentdomain.com www.currentdomain.com;
    return 404; # managed by Certbot
}

#############for domain2nd.com. <<<==nginx reverse proxy throw 502 bad gateway when connecting to domain2nd.com/www.domain2nd.com from a react client

server {
   listen       80;
   server_name www.domain2nd.com domain2nd.com;

   location / { #for react client
     proxy_pass http://127.0.0.1:3000;  #proxy to port 3000 for react client
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;
   }

   location /api { #route to nodejs server for react client
     proxy_pass http://127.0.0.1:5000;
     proxy_set_header X-Real-IP $remote_addr;
   }
}

这是 nginx 错误日志：

2024/01/18 02:03:52 [error] 1058025#1058025: *40 connect() failed (111: Connection refused) while connecting to upstream, client: x.x.x.222, server: www.domain2nd.com, request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:3000/", host: "www.domain2nd.com"
2024/01/18 02:03:52 [error] 1058025#1058025: *40 connect() failed (111: Connection refused) while connecting to upstream, client: x.x.x.222, server: www.domain2nd.com, request: "GET /favicon.ico HTTP/1.1", upstream: "http://127.0.0.1:3000/favicon.ico", host: "www.domain2nd.com", referrer: "http://www.domain2nd.com/"
2024/01/18 02:04:05 [error] 1058025#1058025: *44 connect() failed (111: Connection refused) while connecting to upstream, client: x.x.x.222, server: www.domain2nd.com, request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:3000/", host: "domain2nd.com"
2024/01/18 02:04:05 [error] 1058025#1058025: *44 connect() failed (111: Connection refused) while connecting to upstream, client: x.x.x.222, server: www.domain2nd.com, request: "GET /favicon.ico HTTP/1.1", upstream: "http://127.0.0.1:3000/favicon.ico", host: "domain2nd.com", referrer: "http://domain2nd.com/"

这是 app.use(cors()) 与 Nodejs 的 CORS 配置：

const corsOptions = {
    origin: `http://localhost:3000`,  //3000 is port for reactjs app. nodejs/express is running on port 5000
    credentials: true
  };

在开发环境中，在浏览器中输入http://localhost:3000即可成功调出React页面。

更新：

这是 Nodejs 20.x 的 server.js：

require('dotenv').config({path: __dirname +'/config/.env'});
const express = require('express');
const app = express();
const httpServer = require('http').createServer(app);
const {Server} = require("socket.io");
const io = new Server(httpServer, {
  path: "/sokt",
  cors: {
    origin: ["https://currentdomain.com", "http://localhost"] //  for production
  }
});
app.set("io", io);
const helper = require("./lib/helper");
const port = process.env.PORT || 5000;  //PORT is 5000

require("./startup/routes")(app);
require("./startup/db");
require("./startup/association")();
require("./startup/accessstoragecron");
require("./models/log");
//require("./startup/testTextmsg")(); //test send text msg

//console.log("io ::: ", io);

io.on('connection', (socket) => {
    
  socket.on('disconnect', async () => {
      console.log('disconnected event');
  });

});


httpServer.listen(port, () => console.log(`Listening on port ${port}`));  //for socket.io on express

Answer 1

背景

根据您的问题和评论中的信息，您当前的设置似乎是

浏览器从 localhost:3000 加载 React 应用程序

已加载应用程序

currentdomain.com (Nginx) <-> NodeJs 后端 （本地主机：5000）<-proxy->

你会希望它是

浏览器从domain2nd.com（Nginx）加载React应用程序

本地主机：3000<-proxy->

已加载应用程序 -> currentdomain.com (Nginx)

NodeJs 后端 (localhost:5000)<-proxy->

此外，看起来您正在使用类似

yarn start

 的东西运行开发环境。它运行良好，因为它在本地计算机上的 

localhost:3000

 处启动了开发服务器。它可以与本地运行的 NodeJs 服务器配合使用，因为它已被列入白名单 

corsOptions

。

问题的可能原因

当您尝试使用

domain2nd.com

 运行它时，您正在运行 

yarn build

 而不是 

yarn start

（可能是您在运行 

yarn build

 之前按 Ctrl+C 执行的）。它不会在 

localhost:3000

 启动开发服务器。您当前的 Nginx 配置期望本地开发服务器在端口 3000 上运行，但它找不到。因此，会出现 502 错误。

选项 1：快速解决方案

如果您想继续在

localhost:3000

 使用反向代理而不更改 Nginx 配置，您所需要做的就是在 Nginx 服务器之外保持开发服务器运行，而不是执行 

yarn build

。这将开始从 

domain2nd.com

 向 

localhost:3000

 发送请求。

选项 2：最佳实践

yarn build

 生成静态优化工件，可供 Nginx 等 Web 服务器使用，并且是非开发环境的推荐方法。它也不需要单独的开发服务器来运行。为此，您的 

domain2nd.com

 的 Nginx 配置必须更新为：

server {
   listen       80;
   server_name www.domain2nd.com domain2nd.com;

   location / { #for react client
    # Indicate a root directory to Nginx
    root <your-code-directory>/build; # this is where yarn build dumps artifacts
    # Set index.html as starting point
    index index.html;
   }

   location /api { #route to nodejs server for react client
     proxy_pass http://127.0.0.1:5000;
     proxy_set_header X-Real-IP $remote_addr;
   }
}

请注意，如果您的 Nginx 服务使用非 root 用户运行，Nginx 进程可能需要对您的 build

 目录的特定访问权限

CORS 设置

对于上述两个选项，您必须将

domain2nd.com

 和 

www.domain2nd.com

 添加到 

server.js

 中的 CORS 允许域列表中，因为请求现在将开始源自 

domain2nd.com

 而不是 

localhost

。