javascript - 单个 React 应用程序可以在多个不同的 URL 上提供服务吗

Question

我有一个 React 应用程序部署为 Azure Web 应用程序。我想部署一个应用程序并使其可在不同的 URL/子域中使用。例如，

customer1.mydomain.comcustomer2.mydomain.com

我想在代码中检测该 URL 以更改品牌。这可以通过 Azure Web 应用程序中的标准 React 应用程序实现吗？

Answer 1

您可以利用具有多站点监听器的 Azure 应用程序网关来在 React 应用程序中托管 2 个不同的主机名 customer1.mydomain.com customer2.mydomain.com如下所示:-

引用此MS Document创建具有多个站点监听器的应用程序网关。

现在将您的应用服务添加到后端池中，其中有 2 个后端池，一个用于 customer1.mydomain.com，另一个用于 customer2.mydomain.com，如下所示:-

为 customer1 和 customer2 添加了 2 个后端池，如下所示:-

现在，转到“配置”> 并使用 customer1 域 url 创建路由规则，如下所示:-

在后端目标中，选择我们之前创建的 customer1 后端池，如下所示:-

后端目标:-

现在单击“添加”并返回“添加路由”设置，并为 customer2 站点添加相同的设置，如下所示:-

单击“添加”，您的 2 个站点将添加到路由规则中，如下所示:-

创建应用程序网关，如下所示:-

您还可以使用下面的代码片段来检测 URL:-

const  hostname  =  window.location.hostname;

  

if (hostname  ===  'customer1.mydomain.com') {

// Change branding for customer1

} else  if (hostname  ===  'customer2.mydomain.com') {

// Change branding for customer2

} else {

// Default branding

}

您可以通过引用此 MS Document 在 Azure 应用服务中注册自定义域这里:-

您可以为 customer1 和 customer2 添加自定义域，并通过域注册商添加 CNAME 和 TXT 记录，以使用应用服务验证域，如下所示:-