AWS Apache服务器多虚拟主机配置故障：仅单个站点可正常访问

你遇到的问题核心在于两个虚拟主机配置完全没有区分标识——它们都监听*:80端口，也没有设置ServerName来区分不同的请求来源，Apache收到请求时不知道该把流量导向哪个站点，所以只会优先启用第一个匹配的配置，导致另一个无法正常运行。下面给你两种可行的解决方案：

方案一：使用不同的域名/子域名区分（推荐生产环境） #

这种方式更符合生产环境的部署逻辑，通过不同的域名来指向不同的Angular面板：

1. 修改虚拟主机配置文件

   • 编辑webAdmin.conf，添加ServerName字段，比如指向管理面板的子域名：

     <VirtualHost *:80>
         ServerAdmin webmaster@localhost
         ServerName admin.yourdomain.com  # 替换成你的管理面板域名
         DocumentRoot /var/www/html/AngularProjects/getItHomeNow_UI/dist
         ErrorLog ${APACHE_LOG_DIR}/error.log
         CustomLog ${APACHE_LOG_DIR}/access.log combined
     
         # 关键：添加Angular单页应用的重写规则，解决刷新404问题
         <Directory /var/www/html/AngularProjects/getItHomeNow_UI/dist>
             Options Indexes FollowSymLinks
             AllowOverride All
             Require all granted
             RewriteEngine On
             RewriteBase /
             RewriteRule ^index\.html$ - [L]
             RewriteCond %{REQUEST_FILENAME} !-f
             RewriteCond %{REQUEST_FILENAME} !-d
             RewriteRule . /index.html [L]
         </Directory>
     </VirtualHost>
     

   • 同样编辑webUIpanel.conf，设置对应的用户面板域名：

     <VirtualHost *:80>
         ServerAdmin webmaster@localhost
         ServerName panel.yourdomain.com  # 替换成你的用户面板域名
         DocumentRoot /var/www/html/AngularProjects/getItHomeNow_UserPanel/dist
         ErrorLog ${APACHE_LOG_DIR}/error.log
         CustomLog ${APACHE_LOG_DIR}/access.log combined
     
         # 同样添加Angular重写规则
         <Directory /var/www/html/AngularProjects/getItHomeNow_UserPanel/dist>
             Options Indexes FollowSymLinks
             AllowOverride All
             Require all granted
             RewriteEngine On
             RewriteBase /
             RewriteRule ^index\.html$ - [L]
             RewriteCond %{REQUEST_FILENAME} !-f
             RewriteCond %{REQUEST_FILENAME} !-d
             RewriteRule . /index.html [L]
         </Directory>
     </VirtualHost>
     

2. 配置域名解析（或本地hosts映射）

   • 如果是生产环境，需要在你的域名服务商处将admin.yourdomain.com和panel.yourdomain.com都解析到服务器的公网IP。
   • 如果是本地测试，可以编辑/etc/hosts文件，添加两行映射：

     127.0.0.1 admin.yourdomain.com
     127.0.0.1 panel.yourdomain.com
     

3. 启用rewrite模块并重启Apache
   执行以下命令：

   sudo a2enmod rewrite
   sudo systemctl restart apache2
   

方案二：使用不同端口区分（适合测试环境） #

如果暂时没有域名，可以通过不同的端口来访问两个面板：

1. 修改虚拟主机的监听端口

   • 保持webAdmin.conf的VirtualHost *:80不变，修改webUIpanel.conf的监听端口为8080：

     <VirtualHost *:8080>
         ServerAdmin webmaster@localhost
         DocumentRoot /var/www/html/AngularProjects/getItHomeNow_UserPanel/dist
         ErrorLog ${APACHE_LOG_DIR}/error.log
         CustomLog ${APACHE_LOG_DIR}/access.log combined
     
         # 同样添加Angular重写规则
         <Directory /var/www/html/AngularProjects/getItHomeNow_UserPanel/dist>
             Options Indexes FollowSymLinks
             AllowOverride All
             Require all granted
             RewriteEngine On
             RewriteBase /
             RewriteRule ^index\.html$ - [L]
             RewriteCond %{REQUEST_FILENAME} !-f
             RewriteCond %{REQUEST_FILENAME} !-d
             RewriteRule . /index.html [L]
         </Directory>
     </VirtualHost>
     

2. 让Apache监听新端口
   编辑/etc/apache2/ports.conf文件，添加一行：

   Listen 8080
   

3. 启用rewrite模块并重启Apache
   同样执行：

   sudo a2enmod rewrite
   sudo systemctl restart apache2
   

   之后访问http://your-server-ip是管理面板，http://your-server-ip:8080是用户面板。

额外说明 #

• 为什么要加重写规则？因为Angular是单页应用，所有路由都是前端处理的，如果直接刷新页面，Apache会找不到对应的文件，返回404，重写规则可以把所有非文件/目录的请求转发到index.html，让Angular处理路由。
• 确保两个Angular项目已经正确执行ng build --prod（或ng build）生成了dist目录，并且目录权限正确（Apache用户能读取该目录）。

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