Ошибка при обслуживании двухузлового серверного интерфейса через обратный прокси

Question

У меня один домен и, следовательно, необходимо обслуживать два разных реагирующих приложения, работающих на двух разных серверах узлов через обратный прокси-сервер nginx. Вот мой файл 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-реагировать-приложение. Для обоих приложений узел 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 Portal");
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

app.listen(PORT, () => {
  console.log(
    `\nPortal is being served in ${serverEnvironment} environment at port ${PORT}`
  );
  console.log(
    "\x1b[33m%s\x1b[0m",
    "\nThe environment logged above is the environment of node server which is " +
      "\ndifferent from your react app's environment. That should be passed during the build of react application as REACT_APP_ENV\n"
  );
});

Все работает нормально, когда я захожу на 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 приложения?

Answer 1

Видите ли вы содержимое файла index.html для вашего js / css на вкладке вашей сети? Если да, то это, как правило, вызвано неправильной базовой ссылкой в ​​вашем index.html.

Попробуйте изменить его на root.

<base href="/">

Другим возможным решением может быть добавление этой строки в конфигурацию nginx.

include /etc/nginx/mime.types;