告诉S3 / CloudFront上托管的React前端根据子域与不同的API通信的最佳方法是什么？

如何解决告诉S3 / CloudFront上托管的React前端根据子域与不同的API通信的最佳方法是什么？

对不起，如果标题不太清楚，我会在这里尽力解释。

我正在开发一个在线系统，希望可以为几个不同的组织托管。系统将API（REST）服务器与与之通信的React前端串联使用。 React使用react-router并根据URL将不同的调用发送到API。

我目前正在为一个组织开发该系统，但希望尽快将其作为服务提供给其他类似组织。

到目前为止，我所做的是将API托管在一个服务器上，该服务器与该组织的数据库进行通信，详细信息保存在环境变量中，因此代码可以保持不变。然后，我为React前端制作了一个环境变量，用于指定API URL。效果很好。

我想让用户访问 theirorganisation.mydomain.com （甚至是 something.theirdomain.com ），它将为他们提供登录信息与他们的API实例通信的页面。

最近，我一直在研究如何最好地进行托管，这是当我发现您可以在S3和CloudFront上托管React站点时。如果我可以托管一个前端副本，并且不需要为每个组织使用单独的前端实例，那么这对我来说使事情变得更容易并且可能更便宜，那么我可以利用CDN。但是，这阻止了我为前端设置环境变量，因此我无法将它们自动定向到正确的API（我有一个后备表单，可让您手动输入URL并将其保存到本地存储中。）

我想知道什么是最好的方法：

• 只需为每个组织创建单独的实例，而不使用S3
• 在前端代码中添加一些内容，这些内容需要window.location并将子域拼接起来，然后对该字符串进行某种查找

然后，我将不得不在公共托管的子域列表-> api服务器上查找子域。我不太喜欢这个主意，因为这意味着将名单公开。

或者设置一个基本的独立API服务器，React可以将子域字符串发送到该服务器并获取API URL。但这将需要一个API密钥，该API密钥将某种程度上需要隐藏（或再次将其公开），这也意味着每个组织都依赖于始终保持运行且不会中断的查找服务器。

我的最后一个选择是开发系统，以便每个组织都使用一个API服务器而不是单独的API服务器，然后在每个请求中发送子域，然后查询组织表并将正确的数据发送回给他们。

我真的不太喜欢这些选项，所以我想知道是否有一种我没有想到的更好的方法？毕竟，单独的前端实例是唯一的好方法吗？

非常感谢。