Question

我在React中构建一个多租户应用程序（通过base，dev和prod配置文件设置Webpack），我想知道创建和访问每个租户变量的最佳方法。

当我用：

运行我的应用时

npm run start tenant1

我可以使用以下方法访问Webpack中的tenant1：

const tenant1 = process.argv[process.argv.length -1];

但是，现在我想知道什么是使该变量可全局访问的最佳方法。我希望使用该变量来创建应用程序中的文件夹结构：

/app/${tenant}/img/ /app/${tenant}/css/ /app/${tenant}/components/

理想情况下，无需将变量导入每个javascript文件。

非常感谢任何有关现有设置的建议或链接。

Answer 1

2019年1月更新：

我找到了一种用Create-react-app实现这一目标的方法，但并不完美，但它可以实现并实现以下目标：

在端口3000上运行React应用程序，该应用程序同时适用于多个域。
将React未处理的所有请求转发到后端。
可选择在开发中使用SSL。

Create-react-app有一个非常容易设置的代理选项。只需将以下行添加到package.json文件中：

"proxy": "http://localhost:5000"

但是，这不适用于多个域。还有一个advanced proxy configuration available。

执行这些步骤后，您将能够控制发送不同请求的位置，但它并不能完全提供代理多个域的功能 - 实现此目的：

在create-react-app项目的根目录中创建文件.env。
将以下内容添加到其中：

NODE_PATH=src/
DANGEROUSLY_DISABLE_HOST_CHECK=true

# optionally add this line for SSL in development

HTTPS=true

从上面的高级代理说明中，您应该在setupProxy.js文件夹的根目录中找到名为/src的文件 - 更改为以下内容：

const proxy = require('http-proxy-middleware')

const options = { target: 'https://[::1]:8000', secure: false }

module.exports = function(app) {
  app.use(proxy('/api', options))
  app.use(proxy('/graphql', options))
}

神奇的部分是https://[::1]: 8000，它会将所有域从根请求转发到同一个后端。这似乎没有在任何地方得到很好的记录，但我相信它是127.0.0.1的IPv6等价物。

在此之后，您可以向主机文件添加条目（例如：127.0.0.1 some-domain.example.com），在您的React应用中只使用路径（/api或/graphql）和请求被代理到运行浏览器的同一个域。

原始回答：

我最终采取了相当手动的方法。

我正在使用react/redux boilerplate，但我修改了npm脚本，如下所示：

"start:tenant1": "cp -r ./tenants/tenant1 ./app/tenant && cross-env NODE_ENV=development node server",
"start:tenant2": "cp -r ./tenants/tenant2 ./app/tenant && cross-env NODE_ENV=development node server",

当使用相关命令运行开发服务器时，每个租户文件夹都会复制到应用程序，并且每个租户文件夹（masthead.svg，vars.js等）中的文件名称相同，以便整个应用程序中的导入都可以是静止的。

大多数情况下这是有效的，因为我没有在生产中使用节点服务器，样板文件会生成静态构建文件夹。

希望这有助于某人。

React中的多租户应用

1 个答案: