Apache 中静态网站部署如何配置 DocumentRoot 加载前端源码

DocumentRoot 指向 dist 绝对路径以提供静态文件，但必须配合 mod_rewrite 重写规则——当请求非真实文件或目录时 fallback 至 /index.html，由前端路由接管，否则刷新页面返回 404。

Apache 部署静态 （比如 Vue、React 打包后的前端项目）时，DocumentRoot 的作用是告诉 Apache：用户访问这个站点时，该从哪个目录里找 HTML、JS、CSS 等文件。但只设好 DocumentRoot 不够——前端路由（如 /user/settings）没有真实对应文件，必须配合重写规则，否则刷新页面就 404。

DocumentRoot 必须指向 dist 目录的绝对路径

打包工具（如 npm run build）生成的静态资源默认在 dist/ 目录下。Apache 不接受相对路径，所以配置中要写完整路径：

1. DocumentRoot /var/www/my-app/dist（Ubuntu/Debian）
2. DocumentRoot /srv/www/my-app/dist（RHEL/CentOS）
3. 确保该目录存在，且 Apache 进程（如 www-data 或 apache）有读取权限

紧跟着配好同路径的 <Directory> 块

仅声明 DocumentRoot 不会自动赋予访问权限。必须用 <Directory> 明确允许访问，并启用重写支持：

1. 路径需与 DocumentRoot 完全一致：<Directory "/var/www/my-app/dist">
2. 关键指令至少包含：Require all granted（放开访问）、AllowOverride All（允许 .htaccess 生效）
3. 如果不想依赖 .htaccess，可直接把重写规则写进 <Directory> 块内

必须启用 mod_rewrite 并配置 fallback 规则

单页应用所有非资源请求（如 /about、/admin）都应返回 index.html，由前端 JS 路由接管。这靠重写实现：

1. 先启用模块：sudo a2enmod rewrite（Debian系）或确认 LoadModule rewrite_module modules/mod_rewrite.so 已加载（RHEL系）
2. 在 <Directory> 内添加标准 fallback 规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

含义是：只要请求的不是真实文件（!-f）也不是真实目录（!-d），就统一重写到 /index.html。

验证和重启不能跳过

改完配置后必须检查语法并重载服务，否则修改不生效：

1. 检查语法：sudo apachectl configtest 或 sudo httpd -t
2. 无报错后重载：sudo systemctl reload apache2（Debian）或 sudo systemctl reload httpd（RHEL）
3. 浏览器访问根路径，再手动输入一个前端路由地址（如 /dashboard）并刷新，确认不报 404