☰

NGINX 反向代理同一域上的多个 NodeJS 应用程序

tag-icon • tag-icon nginx reverse-proxy
NGINX 反向代理同一域上的多个 NodeJS 应用程序

我最近设置了一个 Ubuntu 服务器，用于在我们公司内部托管几个 NodeJS 应用程序。这些应用程序都位于同一个域 (alpha.domain.com) 中，但位于不同的端口上。这些应用程序由 ExpressJS 提供（因为它们也充当 API）。

我正在尝试设置 NGINX 来反向代理这些 ExpressJS/NodeJS 应用程序，但遇到了很大困难。我按照能找到的所有教程操作，但它们似乎无法解决我的问题，或者我显然不明白自己在做什么。我是一名前端开发人员，正在填补最近离开公司的开发运营人员的空缺。

我的服务器位于：alpha.domain.com（内部 DNS 转发到静态 IP 服务器）

我的 NGINX 配置当前是：

server {
        listen 80 default_server;
        server_name alpha.domain.com;
        return 301 https://$host$request_uri;
}

server {
        listen 443 ssl default_server;

        ssl_certificate /etc/nginx/ssl/cert.pem;
        ssl_certificate_key /etc/nginx/ssl/key.pem;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers HIGH:!aNULL:!MD5;

        server_name alpha.domain.com www.alpha.domain.com;

        location /pnl {
                proxy_pass https://localhost:5000/;
                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;
        }
}

每个应用程序都是一个 ReactJS 应用程序，将使用 ExpressJS/PM2 提供服务。我希望 NGINX仅有的以如下方式反向代理这些 URL：

  • alpha.domain.com/pnl加载到 https://localhost:5000
  • alpha.domain.com/2d加载到 https://localhost:5001
  • ETC...

如果我将上述服务器块中的位置更改为/，则应用程序https://localhost:5000可以正常工作。将其设置为 会/pnl导致我的所有静态资产（来自 Create-React-App 构建）变为404。

ExpressJS 是（修剪掉不重要的部分）：

let app = express()

const KEY = fs.readFileSync("path_to_key")
const CERT = fs.readFileSync("path_to_cert")
const PORT = 5000

app.use(express.static("build"))

// handle SPA application routing (routing done client side)
app.get("/*", function (_, res) {
  res.sendFile(path.join(__dirname, "build/index.html"), (err) => {
    if (err) res.status(500).send(err)
  })
})

const httpsServer = https.createServer({ key: KEY, cert: CERT }, app)
httpsServer.listen(PORT, () => {
  console.log(`App listening at https://alpha.domain.com:${PORT}`)
})

这是我的文件结构：

├── build
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── precache-manifest.12d9913d64add6e70d8bdc1e6f5fa0aa.js
│   ├── service-worker.js
│   └── static
│       ├── css
│       │   ├── 2.d26be9bd.chunk.css
│       │   └── main.86152b9d.chunk.css
│       ├── js
│       │   ├── 2.d769608a.chunk.js
│       │   ├── 2.d769608a.chunk.js.LICENSE.txt
│       │   ├── main.b32be59d.chunk.js
│       │   └── runtime~main.afeea630.js
│       └── media
│           └── logo.4d542fd5.svg
├── index.js
├── package-lock.json
└── package.json

关于如何解决这个问题有什么指导吗？

- 编辑 -

这是 ReactJS 生成的 index.html 的内容。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <meta name="theme-color" content="#000000"/>
        <link rel="manifest" href="/manifest.json"/>
        <title>Part Number Log</title>
        <link href="/static/css/2.d26be9bd.chunk.css" rel="stylesheet">
        <link href="/static/css/main.86152b9d.chunk.css" rel="stylesheet">
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <script src="/static/js/runtime~main.afeea630.js"></script>
        <script src="/static/js/2.d769608a.chunk.js"></script>
        <script src="/static/js/main.b32be59d.chunk.js"></script>
    </body>
</html>

答案1

使用你的配置

        location /pnl {
            proxy_pass https://localhost:5000/;

/pnl 从 URL 中删除并替换为 /。尝试

        location /pnl/static/ {
            alias /home/user/pnl-server/build/static
            try_files $uri $uri/ =404;
        }

        location /pnl {
            proxy_pass https://localhost:5000;

nginx proxy_pass 指令

相关内容