React 中的多租户应用程序答案

【问题标题】：Multi Tenant App in ReactReact 中的多租户应用程序
【发布时间】：2016-07-18 17:52:23
【问题描述】：

我正在 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 文件。

任何建议或现有设置的链接将不胜感激。

【问题讨论】：

标签： reactjs npm webpack

【解决方案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

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

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 等）中的文件命名相同，以便整个应用程序的导入可以保持静态。

这主要是因为我没有在生产中使用节点服务器，静态构建文件夹由样板生成。

希望这对某人有所帮助。

【讨论】：

谢谢。还在学习设置。任何当前的更新都会很可爱。