Azure Web App部署Angular dist后显示默认页面，求解决方案

我刚接触Azure的时候也碰到过一模一样的问题，别慌，咱们一步步排查解决：

1. 告诉Web App去哪里找你的Angular文件 #

你把构建后的Angular文件部署到了/home/site/wwwroot/my-angular-app/子文件夹，但Linux版Azure Web App默认只会从/home/site/wwwroot/根目录加载内容。最简单的解决方式是配置启动命令：

• 登录Azure门户，找到你的Web App
• 进入「配置」→「常规设置」
• 在「启动命令」输入框里填：npx serve -s /home/site/wwwroot/my-angular-app
  这个命令会用Node生态里的serve工具托管你的静态文件，-s参数还能自动处理SPA路由的页面刷新 fallback 问题。

2. 确保静态文件服务器依赖可用 #

如果你的Web App还没安装serve，npx会自动临时下载使用，但更稳妥的是提前把它加入项目依赖：
在Angular项目的package.json里添加：

"dependencies": {
  // 其他已有依赖...
  "serve": "^14.2.1"
}

然后在构建流水线的构建步骤里执行npm install，这样部署时serve会被一起打包上传，避免启动时的网络依赖问题。

3. 验证部署文件是否真的传到了正确位置 #

有时候看起来部署成功，但文件可能没到位：

• 打开Web App的「高级工具」→「Go」，进入Kudu控制台
• 选择「Bash」终端，执行ls -la /home/site/wwwroot/my-angular-app/
• 确认里面有index.html、assets文件夹、main.*.js这些Angular构建后的核心文件，如果没有，就得检查发布流水线的部署路径配置是否正确。

4. 处理SPA路由的额外适配（如果你的项目用了自定义路由） #

如果你的Angular项目有自定义路由，刷新页面会出现404，serve -s已经帮你处理了基础的fallback，但如果还是有问题，可以在my-angular-app目录下创建一个staticwebapp.config.json文件，内容如下：

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

这个文件会强制Web App把所有路由请求都转发到index.html，完全适配SPA的路由逻辑。

做完这些后重启你的Web App，再访问URL应该就能看到你的Angular项目了！

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