reactjs - 通过代理在 dev 上提供 React 项目

Question

我将我的 React 应用程序分成了 3 个不同的项目，对所有项目使用 CRA、auth、X 和 Y。用户首先被发送到 auth，然后我根据一些信息将他重定向到 X 或 Y。

它在生产环境中完美运行(因为它们在同一域上运行)，但在开发环境中，X和Y无法对用户进行身份验证，因为它们在不同端口(不同域)上运行，本地存储中的数据不共享auth、X 和 Y 之间。

我试图找到一种使用反向代理(http-proxy)在同一域上托管React开发服务器的方法，但也失败了，因为服务找不到assets/static文件夹，导致404. 还尝试了 http-proxy-middleware，正如 CRA 文档页面上推荐的那样，但失败了。有没有我没有看到的更简单的方法？

编辑:发现了一些新东西，但也失败了。使用react-rewired覆盖CRA脚本，在DEV上使用PUBLIC_PATH，但现在我的bundle.js返回一个index.html文件。

以下代码确实重定向到相应的react项目，但资源被请求到错误的路径。

const apiProxy = httpProxy.createProxyServer();


app.all("/login/*", function(req, res) {
    console.log('redirecting to Login');
    apiProxy.web(req, res, {target: servers.login});
});

app.all("/implementacao/*", function(req, res) {
    console.log('redirecting to Implementation');
    apiProxy.web(req, res, {target: servers.implementation});
});

所以我使用react-rewired来更改公共(public)路径

const {
  override,
} = require('customize-cra');

module.exports = {
  webpack: override(
      (config) => {
        config.output.publicPath = '/login/';
        return config;
      },
  ),

  jest: config => {
    return config;
  },

  devServer: configFunction => (proxy, allowedHost) => {
    return configFunction(proxy, allowedHost);
  },

  paths: (paths, env) => {
    return paths;
  }
};

现在， Assets 请求已正确发送到/login/，但开发服务器始终不会返回 index.html 文件。

Answer 1

即使使用react-app-rewired来覆盖配置并在开发上使用publicPath， Assets 也不会从publicPath提供服务。

已经有一个 pull request在 CRA 上在开发模式下使用 PUBLIC_URL。