能否将单个React应用部署在Azure Web App的多个不同URL/子域名下？

完全可以实现你的需求，只需要完成Azure Web App的域名配置和路由规则设置，再在React代码中添加域名检测与样式切换逻辑即可，无需重复部署多个应用。

Azure Web App 配置步骤 #

• 绑定自定义子域名

  1. 为每个目标子域名（如customer1.mydomain.com）在域名服务商后台添加CNAME记录，指向你的Azure Web App默认域名（格式为<app-name>.azurewebsites.net）。
  2. 登录Azure门户，进入目标Web App资源，在左侧导航栏选择「自定义域名」，点击「添加自定义域名」，输入子域名并完成所有权验证，完成绑定。

• 配置单页应用路由规则
  React是单页应用，直接刷新非根路径会返回404，需要配置重写规则将所有请求导向index.html：

  • 若Web App使用Windows主机：在React项目的public目录下创建web.config文件，内容如下：

    <?xml version="1.0"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <rule name="React Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="/index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    

  • 若使用Linux主机：可通过Azure门户的「配置」>「常规设置」>「启动命令」添加nginx重写配置，或在项目中包含自定义nginx.conf文件（具体需根据部署方式调整）。

React代码实现动态品牌切换 #

1. 检测当前子域名 #

编写工具函数提取当前访问的子域名前缀：

// src/utils/brandUtils.js
export const getCurrentBrand = () => {
  const hostname = window.location.hostname;
  const domainParts = hostname.split('.');
  // 适配三级域名格式（如customer1.mydomain.com）
  if (domainParts.length >= 3) {
    return domainParts[0];
  }
  // 默认品牌标识
  return 'default';
};

2. 动态应用品牌样式 #

在根组件中获取品牌标识，切换对应的样式或内容：

// src/App.js
import { useEffect, useState } from 'react';
import { getCurrentBrand } from './utils/brandUtils';
import './App.css';

function App() {
  const [brand, setBrand] = useState('default');

  useEffect(() => {
    setBrand(getCurrentBrand());
    // 监听浏览器前进/后退导致的域名变化
    const handleLocationChange = () => {
      setBrand(getCurrentBrand());
    };
    window.addEventListener('popstate', handleLocationChange);
    return () => window.removeEventListener('popstate', handleLocationChange);
  }, []);

  return (
    <div className={`app-container ${brand}`}>
      <header className="app-header">
        <h1>{brand === 'customer1' ? '客户1专属平台' : brand === 'customer2' ? '客户2专属平台' : '默认平台'}</h1>
      </header>
      {/* 其他应用内容 */}
    </div>
  );
}

export default App;

3. 定义品牌专属样式 #

在CSS文件中为不同品牌设置差异化样式：

/* src/App.css */
.app-container {
  min-height: 100vh;
  padding: 2rem;
  transition: background-color 0.3s, color 0.3s;
}

.app-header {
  text-align: center;
  margin-bottom: 2rem;
}

/* 客户1品牌样式 */
.customer1 {
  background-color: #2563eb;
  color: white;
}

/* 客户2品牌样式 */
.customer2 {
  background-color: #16a34a;
  color: white;
}

/* 默认样式 */
.default {
  background-color: #ffffff;
  color: #1f2937;
}

总结 #

整个方案无需重复部署应用，仅需完成域名绑定和路由配置，再在React代码中添加域名检测与样式切换逻辑，即可实现单个Azure Web App支持多子域名访问并动态切换品牌样式的需求。

内容的提问来源于stack exchange，提问作者Joe W