如何在使用Azure App Service部署槽的CRA React应用中配置不同环境的API URL？

这个问题确实是用Azure App Service Deployment Slots部署Create React App时的典型痛点——毕竟CRA的环境变量是构建时注入的，而Slots的核心优势就是不用重新构建就能无缝切换环境，直接沿用老方法肯定会出问题。我在几个项目里都遇到过类似情况，分享几个亲测有效的解决方案，你可以根据自己的场景挑合适的：

方案1：运行时加载独立配置文件（最推荐） #

核心思路是把API URL这类环境相关的配置从构建包中剥离，改成运行时动态加载，让每个Slot可以独立配置自己的API地址，完全不需要重新构建项目。

步骤如下：

1. 在React项目的public文件夹下创建一个config.json文件，作为默认配置模板：

   {
     "apiUrl": "default-api-url"
   }
   

2. 在React应用的入口文件（比如src/index.js）中，先加载这个配置文件再渲染应用，确保全局能拿到正确的API地址：

   fetch('/config.json')
     .then(res => res.json())
     .then(config => {
       // 把配置存入全局状态或Context，供全应用调用
       window.appConfig = config;
       // 完成配置加载后再渲染应用
       ReactDOM.render(<App />, document.getElementById('root'));
     });
   

3. 在Azure App Service的每个Deployment Slot中，添加应用设置（比如命名为API_URL），并设置对应环境的真实API地址。
4. 编写一个启动脚本start.sh，在应用启动时根据当前Slot的应用设置替换config.json的内容：

   #!/bin/bash
   # 替换config.json中的默认API地址为当前Slot的应用设置值
   sed -i "s|\"apiUrl\": \"default-api-url\"|\"apiUrl\": \"$API_URL\"|" /home/site/wwwroot/public/config.json
   # 启动服务（如果是静态站点，可根据部署方式调整为nginx启动或直接用默认静态服务）
   npm start
   

5. 在Azure App Service的「配置」->「常规设置」中，把启动命令设置为./start.sh。

这样每个Slot启动时都会生成对应自身环境的config.json，React应用加载时就能拿到正确的API地址，而且Slots交换时也不会互相覆盖配置。

方案2：通过index.html注入全局变量 #

这个方案更轻量，适合配置项不多的场景，核心是把环境变量直接注入到HTML的全局变量中：

1. 在public/index.html的<head>标签里添加一个带占位符的脚本：

   <script>
     window.appEnv = {
       API_URL: '%API_URL%'
     };
   </script>
   

2. 同样在每个Slot中设置API_URL应用设置。
3. 修改启动脚本，替换index.html里的占位符：

   sed -i "s|%API_URL%|$API_URL|" /home/site/wwwroot/public/index.html
   npm start
   

4. 在React应用中直接通过window.appEnv.API_URL获取地址即可。

方案3：根据Slot域名自动判断环境 #

如果你的每个Deployment Slot都有独立的专属域名（比如your-app-dev.azurewebsites.net、your-app-testing.azurewebsites.net），可以直接通过前端的域名信息自动判断环境，省去服务器端配置：

const getApiUrl = () => {
  const hostname = window.location.hostname;
  if (hostname.includes('-dev')) {
    return 'https://dev-api.your-domain.com';
  } else if (hostname.includes('-testing')) {
    return 'https://testing-api.your-domain.com';
  } else {
    return 'https://prod-api.your-domain.com';
  }
};

这个方案最简便，但缺点是如果域名变更，需要修改代码重新构建，灵活性稍差。

额外注意事项 #

• 如果你部署的是静态站点，要确保启动脚本能正确访问到静态文件的根目录（通常是/home/site/wwwroot）。
• 对于Azure App Service的应用设置，记得把需要每个Slot独立保留的设置标记为插槽设置（在配置页面勾选对应选项），这样交换Slots时这些设置不会被覆盖。

内容的提问来源于stack exchange，提问作者Cevin Thomas