域名：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>