将React应用部署至Azure App Service时遇到的问题

问题根源 #

部署源码时Azure未自动执行构建流程，导致默认页面未被替换；直接部署dist文件夹时，缺少静态文件托管的配置，无法正确识别文件路径。

具体修复步骤 #

方式一：部署源码并自动构建（推荐） #

1. 确认项目package.json的scripts包含build命令：

   "scripts": {
     "build": "react-scripts build"
   }
   

2. 在Azure App Service中配置启动命令：
   • Linux环境：npm install && npm run build && npx serve -s build
   • Windows环境：npm install && npm run build && npx serve -s build
3. 验证部署中心设置：
   进入App Service → 部署中心 → 配置，确保勾选运行生成脚本，让Azure在部署后自动执行依赖安装和构建。

方式二：直接部署预构建的dist文件夹 #

1. Linux环境：
   在App Service的「配置 → 常规设置」中，设置启动命令为npx serve -s .（指定当前dist目录为静态文件根路径）
2. Windows环境：
   在dist文件夹根目录创建web.config文件，添加以下内容让IIS正确托管静态文件并处理React路由：

   <?xml version="1.0" encoding="UTF-8"?>
   <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>
       <staticContent>
         <mimeMap fileExtension=".json" mimeType="application/json" />
         <mimeMap fileExtension=".js" mimeType="application/javascript" />
         <mimeMap fileExtension=".css" mimeType="text/css" />
         <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
       </staticContent>
     </system.webServer>
   </configuration>
   

额外检查项 #

• 确认App Service「配置 → 常规设置」中的运行时堆栈为Node 18.x
• 部署后可通过App Service的「日志流」查看启动日志，排查命令执行或文件路径问题

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