React TS应用部署至Azure App Service后访问端点显示默认页问题

• 使用Visual Studio Code的Azure扩展部署React+TS应用到Azure App Service，扩展提示部署成功
• 访问公网端点时始终显示App Service初始默认界面，未加载部署的应用内容
  
  部署成功提示截图：
  
• 通过Kudu端点访问wwwroot路径时，已部署的ReactTS应用展示完全正常
  

Kudu能正常访问静态文件，说明文件已经成功上传到服务端，不存在部署失败的问题，不需要反复执行部署操作，问题出在App Service的默认请求路由规则上。

按优先级从高到低操作，每步做完可以直接开浏览器无痕窗口访问验证：

1. 清理默认欢迎页，调整默认文档优先级
   Azure App Service初始化时会在site/wwwroot根目录自动生成hostingstart.html作为默认首页，默认配置下这个文件的加载优先级高于你部署的index.html，就会一直显示默认页。
   • 进入对应App Service的Azure门户页，左侧菜单选「配置」-「默认文档」，把index.html移动到列表最顶部，确保优先级最高
   • 通过Kudu调试控制台或者VS Code Azure扩展的文件浏览器，直接删掉wwwroot下的hostingstart.html文件
2. 检查静态文件部署路径
   大部分部署后不生效的问题都是路径选错导致的：
   • 确认部署时选择的源文件夹是React项目执行npm run build生成的build目录（Vite创建的项目是dist目录），不是整个项目根目录
   • 检查wwwroot根目录下是否直接存在index.html和assets静态资源文件夹，如果文件都在wwwroot/build/或者wwwroot/dist/子目录里，把所有文件移动到wwwroot根目录即可
3. 配置路由规则适配单页应用
   如果是Windows运行时栈的App Service，在wwwroot根目录新建web.config文件，写入以下配置，同时解决默认首页加载和前端路由刷新404的问题：

   <?xml version="1.0"?>
   <configuration>
     <system.webServer>
       <defaultDocument enabled="true">
         <files>
           <clear/>
           <add value="index.html"/>
         </files>
       </defaultDocument>
       <rewrite>
         <rules>
           <rule name="SPA Route" 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运行时栈，在wwwroot根目录新建.htaccess文件，配置对应的重写规则把所有请求回退到index.html即可。
4. 重启清缓存
   所有配置修改完成后，在App Service概览页点击「重启」，等待1-2分钟后用浏览器无痕模式访问公网地址，避免本地缓存或者CDN边缘节点缓存旧页面。

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