如何在Azure中无需部署启用/禁用React应用的维护页面？

为什么你之前的方法没用 #

React是静态单页应用，构建阶段会把REACT_APP_*前缀的环境变量直接打包进静态资源里。之后你在Azure应用服务里改这个变量，静态文件里的旧值不会更新，自然读不到新的设置。

可行的解决办法 #

方案1：Azure应用设置 + 服务器端/静态配置（推荐） #

这个办法不用大改代码，直接通过Azure控制台就能切换：

如果你的React用Node.js（比如Express）托管

1. 在Azure应用服务的「配置」→「应用程序设置」里加一个键MAINTENANCE_MODE，值设On（启用维护）或Off（关闭）
2. 修改你的Node.js服务器代码，在托管静态文件之前先判断维护状态：

   const express = require('express');
   const app = express();
   
   // 先检查维护模式
   app.use((req, res, next) => {
     if (process.env.MAINTENANCE_MODE === 'On') {
       // 返回提前做好的维护页面
       return res.sendFile('maintenance.html', { root: __dirname + '/public' });
     }
     next();
   });
   
   // 托管React构建后的静态文件
   app.use(express.static('build'));
   
   // 处理SPA路由（原有逻辑保留）
   app.get('*', (req, res) => {
     res.sendFile('index.html', { root: __dirname + '/build' });
   });
   
   app.listen(process.env.PORT || 3000);
   

3. 把maintenance.html放在项目的public目录下，构建后一起部署到Azure。之后只要在Azure控制台改MAINTENANCE_MODE的值，Azure会自动重启应用服务，维护状态就切换了。

如果是纯静态托管（没有Node.js）

可以用Azure应用服务的配置文件来做跳转：

• Windows环境：在build目录下创建web.config文件，内容如下：

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <!-- 维护模式跳转规则 -->
          <rule name="Maintenance Mode" stopProcessing="true">
            <match url="^(.*)$" />
            <conditions>
              <add input="%MAINTENANCE_MODE%" pattern="On" />
              <add input="{REQUEST_URI}" pattern="^/maintenance.html$" negate="true" />
            </conditions>
            <action type="Redirect" url="/maintenance.html" />
          </rule>
          <!-- 原有SPA路由规则 -->
          <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环境：创建.htaccess文件，用类似的Rewrite规则判断环境变量跳转
  同样在Azure设置里加MAINTENANCE_MODE，改值后自动生效，不用重新部署。

方案2：Blob存储 + CDN切换源 #

适合完全静态的场景，全程在Azure控制台操作：

1. 把React应用的静态文件传到一个Blob容器（比如app-container），把维护页面传到另一个容器（比如maintenance-container）
2. 配置Azure CDN，默认源指向app-container
3. 要开维护模式时，直接在CDN控制台把默认源改成maintenance-container；恢复时改回去就行
4. 注意：CDN有缓存，改完源可能需要手动清除缓存才能立刻生效

方案3：通过后端接口获取维护状态 #

如果你的应用有后端API，这种方式更灵活：

1. 后端加一个接口（比如/api/get-maintenance-status），从Azure应用设置里读取维护状态并返回
2. React应用在启动时调用这个接口：

   import { useEffect, useState } from 'react';
   
   function App() {
     const [showMaintenance, setShowMaintenance] = useState(false);
   
     useEffect(() => {
       fetch('/api/get-maintenance-status')
         .then(res => res.json())
         .then(data => {
           if (data.enabled) {
             setShowMaintenance(true);
           }
         })
         .catch(err => console.log(err));
     }, []);
   
     if (showMaintenance) {
       return <div className="maintenance-page">网站维护中，请稍后再访问</div>;
     }
   
     // 原有应用内容
     return <div>正常应用页面</div>;
   }
   
   export default App;
   

3. 之后只要在Azure控制台改后端的应用设置，前端刷新就能读到新状态，不用重新部署。

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