Azure Linux应用服务部署Angular后刷新出现404问题求助

你遇到的是Angular单页应用（SPA）的典型路由适配问题，和Linux应用服务本身无关——核心原因是前端路由仅在浏览器端生效，刷新非首页时服务器会尝试寻找对应物理文件，找不到就返回404。结合你当前用pm2部署的场景，以下是几种可行的解决办法：

方法一：确认pm2 --spa参数有效性 #

你当前的启动命令pm2 serve /home/site/wwwroot/build --no-daemon --spa中，--spa参数理论上会自动将未匹配到物理文件的请求重定向到index.html，但可能因路径指向问题未生效。先检查/home/site/wwwroot/build目录下是否存在正确的index.html文件，确保路径无拼写错误。

方法二：改用serve包的SPA模式（更可靠） #

pm2自带的--spa偶尔会有兼容性问题，换成专门的serve包托管静态文件更稳妥：

1. 在Angular项目的package.json中添加依赖："serve": "^14.2.0"（可选用最新稳定版）
2. 构建部署时确保依赖已安装（可在构建脚本中加入npm install）
3. 创建pm2配置文件ecosystem.config.js，内容如下：

module.exports = {
  apps: [{
    name: 'angular-app',
    script: 'npx',
    args: 'serve /home/site/wwwroot/build -s',
    interpreter: 'none'
  }]
};

4. 将Azure启动命令改为pm2 start ecosystem.config.js --no-daemon

serve的-s参数会自动处理SPA路由，所有404请求都会转发到index.html。

方法三：自定义nginx重写规则 #

Azure Linux应用服务默认用nginx做反向代理，可通过自定义配置实现路由转发：

1. 在/home/site/wwwroot目录下创建.nginx.conf文件，写入：

location / {
    try_files $uri $uri/ /index.html;
}

2. 保持启动命令为pm2 serve /home/site/wwwroot/build --no-daemon即可，Azure会自动加载该配置，将所有请求导向index.html。

额外检查项 #

• 确保Angular构建时baseHref配置正确：若应用部署在根路径，构建命令用ng build --base-href="/"；若为子路径，对应改为--base-href="/your-sub-path/"
• 查看Azure日志流（门户→应用服务→监控→日志流），确认404请求的具体路径，排查路由或路径配置错误

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