通过反向代理为基于两个节点服务器的前端提供服务时出错答案

【问题标题】：Error while serving two node server based frontend via reverse proxy通过反向代理为基于两个节点服务器的前端提供服务时出错
【发布时间】：2019-10-21 20:26:32
【问题描述】：

我有一个域，因此需要通过 nginx 反向代理为在两个不同节点服务器上运行的两个不同的 react 应用程序提供服务。这是我的 nginx.conf 文件

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

  client_max_body_size 128g; # allows larger files (like videos) to be uploaded.

  location / {
      proxy_pass http://192.168.0.105:8081;
  }

  location /admin {
      proxy_pass http://192.168.0.105:8080;
  }

}

我在这里想要实现的是，如果用户登陆 abc.com，那么他将从 http://192.168.0.105:8081 获得响应应用程序，而如果用户访问 abc.com/admin，他将获得 http://192.168.0.105:8080。

两个应用程序都有不同的节点服务器为由 create-react-app 创建的 react 包提供服务。对于两个应用程序，节点的 server.js 看起来都是这样的

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const cors = require("cors");
const app = express();
const qs = require("querystring");

const axios = require("axios");

const PORT = process.env.PORT || 8080;

const serverEnvironment = process.env.serverEnv || "dev";

app.use(cors());
app.use(express.static(path.join(__dirname, "build")));

app.use(bodyParser.json());

app.get("*", function(req, res) {
  console.log("Requesting Admin UI");
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

app.listen(PORT, () => {
  console.log(
    `\nServer is being served in ${serverEnvironment} environment at port ${PORT}`
  );     
});

当我访问 localhost:4000（4000 是运行 nginx 的端口）时，一切正常，它为我提供了预期的门户。但是当我访问 localhost:4000/admin 而不是提供管理应用程序时，它最终会给出以下错误

Uncaught SyntaxError: Unexpected token '<' 2.0f3deea8.chunk.js:1 
Uncaught SyntaxError: Unexpected token '<' main.a2e30dbb.chunk.js:1

当我检查网络选项卡时，所有 js 和 css 块都返回 HTML 而不是相关的 js 或 css。

我也试过添加

location ~ .(static)/(js|css|media)/(.+)$ {
        try_files $uri $uri/ /$1/$2/$3;
    }

到 nginx.conf 但没有用。我在这里遗漏了什么，或者它不是反向代理 2 应用程序的正确方法吗？

【问题讨论】：

标签： node.js reactjs nginx create-react-app nginx-reverse-proxy

【解决方案1】：

您是否在网络选项卡中看到了 js/css 的 index.html 内容？如果是，则通常是由于 index.html 中的 base href 错误造成的。

尝试将其更改为 root。

<base href="/">

其他可能的解决方案可能只是将此行添加到您的 nginx 配置中。

include /etc/nginx/mime.types;

【讨论】：

【解决方案2】：

如果您在节点应用程序中也有基本 url /admin 那么 proxy_pass 应该是 http://192.168.0.105:8080/admin; 而不是 http://192.168.0.105:8080;
理想情况下，您可以通过将压缩的 React 资源复制到 html 或任何所需的文件夹以及代理到不同路由的不同节点应用程序，在端口 80 处从 nginx 提供压缩的 react 资源。

【讨论】：

【解决方案3】：

我会简单地在您的代理位置使用重写，例如：

server {
  listen 80;
  location / {
    proxy_pass http://192.168.0.105:8081;
  }

  location /admin {
    rewrite /admin/(.*) /$1 break;
    proxy_redirect  off;
    proxy_pass http://192.168.0.105:8080;
  }

}

使用此配置，访问 /admin 的用户将被发送到您的管理员 ReactJS 应用程序。 NGINX 会在提交给上游服务器之前重写 uri。

【讨论】：