如何使用多租户上传 create-react-app 生产版本？答案

【问题标题】：How to upload create-react-app production build with multi-tenant?如何使用多租户上传 create-react-app 生产版本？
【发布时间】：2021-03-06 21:39:49
【问题描述】：

我正在构建一个多租户的应用程序，它为多个客户端提供服务，目前，我必须一个一个地构建所有实例，还必须一个一个地上传所有构建，这也很耗时。

这是我在创建构建之前所做的，

更改生产 API 网址和客户端实例（如“abc”、“cde”、“efg”）
在 package.json 中设置主页，如 "/abc","/cde","/efg"
<BrowserRouter basename={${process.env.PUBLIC_URL}}>, PUBLIC_URL 等同于 "/abc" 或 "/cde" 等

现在，我的域名类似于“example.com”或“1**.1**.2*.*”

所以我的应用程序可以通过 example.com/abc、example.com/cde 等访问，在服务器中有所有实例的目录（“abc”、“cde”等）。

现在我想从服务器中删除所有目录，并希望为所有人上传单个构建，而不是为所有实例创建单独的构建。

感谢任何 cmets/建议。

【问题讨论】：

标签： reactjs react-redux react-router create-react-app multi-tenant

【解决方案1】：

您给出的问题陈述有多种方法

选项 1

在这种情况下，我假设您的租户已经知道 URL 结构并且他们已经习惯了这种格式。

在您的情况下，您可能需要登录页面组件，该组件采用我们用来识别租户的路线段。

示例路线 <Route path="/auth/:id" component={AuthComponent} />

在 componentDidMount 方法中，您将检查租户名称并进行 API 调用以按名称获取租户信息。收到数据后，您会将值存储在 redux 存储或您选择加入的任何其他模式中。

   const tenantName=undefined;
    if (undefined !== this.props.match.params && null != this.props.match.params) {
        tenantName = this.props.match.params.id;
// make the api call to get the tenant info
} else {
 //The tenant name is not identified, ask the user to supply the tenant name in the URL
}

根据 API 调用的响应，使用租户上下文设置重定向到主页。

从现在开始，您的所有组件都可以使用来自 redux / any store 的租户上下文信息，以便页面根据设置的租户上下文显示数据。

假设您没有特定于租户的页面，这种方法就可以了

选项 2

在此选项中，允许用户从登录页面选择租户，然后执行登录，发布登录，租户上下文将可用，可以在 redux 商店中设置并在整个过程中使用，如上所述。

当你的租户知道他们的公司代码并习惯了这一点时，可以使用它。

选项 3

允许最终用户登录并发布成功登录，如果用户有权访问单个租户，您可以自动设置租户上下文，然后继续使用应用程序。

如果最终用户有权访问多个租户，请显示他们有权访问的租户列表的下拉列表。这将在登录成功后完成，以便用户选择他们想要工作的租户并且他们能够访问页面/功能。

这个选项是一个很好的选择，我会保证，因为它可以让您更好地控制，并且用户对应用程序有很好的用户体验。

【讨论】：