域名：xxx.xxx.com
方法一：
httpd-vhosts中配置：
//后端项目配置
<VirtualHost *:30000>
ServerAdmin luzai
//项目路径
DocumentRoot "/opt/lampp/htdocs/j7w5_training/training_backend/public"
ServerName localhost:30000
</VirtualHost>
//前端项目配置
<VirtualHost *:30001>
ServerAdmin luzai
DocumentRoot "/opt/lampp/htdocs/j7w5_training/training_front/dist/"
ServerName localhost:30001
</VirtualHost>
//转发，访问http://xxx.xxx.com/api，会访问http://localhost:30000下
<VirtualHost *:80>
ServerName xxx.xxx.com
ProxyPass /api http://localhost:30000/
ProxyPass / http://localhost:30001/
ErrorLog "logs/xxx.xxx.com-error_log"
ProxyPassReverse /api http://localhost:30000/
ProxyPassReverse / http://localhost:30001/
</VirtualHost>
httpd增加端口监听
image.png
注意：ProxyPass /api http://localhost:30000/必须放在ProxyPass / http://localhost:30001/的上面，否则会造成不能访问
方法二：
httpd-vhosts中配置
<VirtualHost *:80>
ServerAdmin luzai
DocumentRoot "/opt/lampp/htdocs/j7w5_training/training_front/dist/"
ServerName xxx.xxx.com
Alias /api "/opt/lampp/htdocs/j7w5_training/training_backend/public"
<Directory "/opt/lampp/htdocs/j7w5_training/training_backend/public">
Options +Indexes
Require all granted
</Directory>
</VirtualHost>
