如何通过VS Code Azure插件部署React到Azure Web App并解决访问报错

可能的配置错误及对应解决方法 #

1. 运行环境不匹配（最高概率）

如果你创建的Azure Web App是Linux运行环境，web.config文件完全不会生效，因为Linux环境下没有IIS服务，该配置文件是IIS专属的。
解决方法：

• 直接删除web.config文件
• 如果是普通Linux Web App，添加nginx重写规则适配React单页应用的路由；如果是静态站点场景，建议改用Azure Static Web Apps服务，自动适配单页应用路由规则，无需额外配置。

2. Windows环境下配置错误

如果使用的是Windows运行环境的Web App，按以下顺序排查：

• 部署路径配置错误：进入Azure门户Web App管理页，打开配置→路径映射，确认虚拟路径/对应的物理路径是site/wwwroot/build，而非默认的site/wwwroot。很多用户直接将整个项目源码部署上去，IIS找不到入口文件就会抛出500错误。
• URL重写模块缺失：默认的Windows Web App可能未安装URL Rewrite模块，导致web.config中的重写规则无法识别。可以进入Web App的扩展页面，搜索安装URL Rewrite模块后重启应用即可。
• 配置文件格式错误：检查web.config文件是否存在编码异常、多余不可见字符，XML标签是否完全闭合。你当前提供的配置内容本身语法是正确的，大概率是部署过程中文件被篡改或者缺失。

3. 快速验证方法

可以在本地打包后的build目录中新建一个纯静态的test.html文件，部署后直接访问你的域名/test.html：

• 如果可以正常访问，说明问题出在路由重写规则相关配置
• 如果仍然报500错误，说明是基础运行环境或者部署路径配置错误

内容的提问来源于stack exchange，提问作者Bill Software Engineer