Angular 13应用部署至Ubuntu Apache刷新页面报404错误

按以下顺序排查，99%的场景可以解决问题：

• 第一步：启用Apache重写模块
  Ubuntu默认预装Apache不会自动开启mod_rewrite，终端执行以下命令开启：

  sudo a2enmod rewrite
  sudo systemctl restart apache2
  

  模块未开启时，所有.htaccess中的重写规则都不会执行，这是最高发的诱因。
• 第二步：放开站点目录的.htaccess权限
  Apache默认配置会禁止目录下.htaccess文件覆盖主配置，需要修改对应站点的配置文件：
  1. 进入站点配置目录：cd /etc/apache2/sites-available/
  2. 编辑你当前使用的站点配置文件（本地测试默认是000-default.conf）
  3. 找到项目根目录对应的<Directory>配置段，将AllowOverride None修改为AllowOverride All，参考配置如下：

     <Directory /var/www/html/>
         Options Indexes FollowSymLinks
         AllowOverride All
         Require all granted
     </Directory>
     

  4. 保存退出后重启Apache：sudo systemctl restart apache2
• 第三步：修正.htaccess规则适配子目录部署
  你的应用部署在/PROJECT-NAME/子路径下，原有规则缺少重写基础路径配置，将项目目录下的.htaccess内容替换为：

  RewriteEngine on
  # 匹配当前项目子目录
  RewriteBase /PROJECT-NAME/
  
  # 真实存在的文件、目录直接访问，不触发重写
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]
  
  # 其余所有路由全部转发到Angular入口文件
  RewriteRule ^ index.html [L]
  

  注意：如果你的服务端入口是index.php而非Angular构建生成的静态index.html，将最后一行的index.html替换为index.php即可。
• 第四步：确认Angular构建参数正确
  子目录部署时，Angular构建必须指定base-href参数，否则静态资源路径会解析错误，正确构建命令为：

  ng build --base-href=/PROJECT-NAME/
  

  如果之前构建未加该参数，重新执行构建后将产物覆盖到部署目录即可。

额外排查点 #

如果以上操作完成后仍存在404，优先检查两个点：

1. 项目目录权限：Apache运行用户需要有项目目录的读取权限，执行sudo chown -R www-data:www-data /var/www/html/PROJECT-NAME修复权限
2. 查看Apache错误日志定位具体问题：日志路径为/var/log/apache2/error.log，最新的报错条目会直接说明是路径不存在、权限不足还是配置语法错误。

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