使用Nginx托管根目录及子目录两个Angular项目出现404错误

核心问题原因 #

你遇到的问题主要来自两个常见的配置错误：

1. Nginx 中 alias 指令与 try_files 配合存在解析逻辑缺陷，会导致路径拼接错误，找不到对应文件
2. 子 Angular 项目未配置正确的 base href，静态资源会默认从根路径加载，触发404

解决步骤 #

• 第一步：修正子项目打包配置
  子项目打包时必须指定路径前缀，否则静态资源请求路径会出错。打包时执行以下命令：

  ng build --base-href /project1/
  

  也可以手动修改子项目打包后index.html中的base标签为：

  <base href="/project1/">
  

• 第二步：替换正确的Nginx配置
  前缀与目录名一致时，直接用root替代alias可避免路径解析坑，推荐配置如下：

  # 优先匹配/project1前缀的所有请求
  location ^~ /project1 {
      root /var/www/html;
      # 所有请求找不到对应静态资源时，回退到子项目的index.html，交给前端路由处理
      try_files $uri $uri/ /project1/index.html;
  }
  
  # 父项目原有配置保持不变
  location / {                
      error_page 404  =200    /index.html;
  }
  

  配置修改后执行校验和重载命令生效：

  # 校验配置语法是否正确
  nginx -t
  # 重载Nginx配置
  nginx -s reload
  

• 第三步：排查目录权限问题
  确认Nginx运行用户对项目目录有可读权限，可执行以下命令修正（部分环境Nginx运行用户为www-data，可根据实际情况调整）：

  chown -R nginx:nginx /var/www/html
  chmod -R 755 /var/www/html
  

• 第四步：错误日志定位
  若以上配置修改后仍出现404，查看Nginx错误日志定位具体问题：

  tail -f /var/log/nginx/error.log
  

  根据日志中打印的实际查找文件路径，可判断是路径映射错误还是文件不存在的问题。

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