如何在CentOS 9的Apache服务器部署带PHP API的Vue.js项目？

一、前置环境准备 #

• 系统更新并安装Apache、PHP及依赖组件：

  sudo dnf update -y
  sudo dnf install httpd php php-fpm php-mysqlnd php-json php-curl -y
  

• 启动Apache并设置开机自启：

  sudo systemctl start httpd
  sudo systemctl enable httpd
  

• 开放HTTP/HTTPS端口（或按需关闭防火墙）：

  sudo firewall-cmd --add-service=http --permanent
  sudo firewall-cmd --add-service=https --permanent
  sudo firewall-cmd --reload
  

• 临时关闭SELinux（生产环境可配置细粒度规则，新手优先简化）：

  sudo setenforce 0
  sudo sed -i 's/^SELINUX=.*/SELINUX=disabled/' /etc/selinux/config
  

二、部署PHP API #

假设你的PHP框架代码（如Laravel、ThinkPHP等）最终需指向public目录：

1. 创建API目录并配置权限：

   sudo mkdir -p /var/www/api
   sudo chown -R apache:apache /var/www/api
   sudo chmod -R 755 /var/www/api
   

2. 将PHP代码上传至/var/www/api（可通过git clone、scp等方式）
3. 配置Apache虚拟主机，分两种场景：
   • 子域名访问API：创建/etc/httpd/conf.d/api.conf

     <VirtualHost *:80>
         ServerName api.your-domain.com
         DocumentRoot /var/www/api/public
     
         <Directory /var/www/api/public>
             AllowOverride All
             Require all granted
         </Directory>
     
         ErrorLog /var/log/httpd/api_error.log
         CustomLog /var/log/httpd/api_access.log combined
     </VirtualHost>
     

   • 路径访问API（如your-domain.com/api）：修改主站点配置或创建新配置

     <VirtualHost *:80>
         ServerName your-domain.com
         DocumentRoot /var/www/html
     
         Alias /api /var/www/api/public
         <Directory /var/www/api/public>
             AllowOverride All
             Require all granted
         </Directory>
     
         ErrorLog /var/log/httpd/error.log
         CustomLog /var/log/httpd/access.log combined
     </VirtualHost>
     

4. 验证配置并重启Apache：

   sudo apachectl configtest
   sudo systemctl restart httpd
   

   此时可直接访问API地址测试接口是否正常响应。

三、部署Vue.js应用 #

Vue项目需先构建生产包：

1. 本地开发环境执行构建：

   npm run build
   

   构建完成后生成dist目录，包含所有静态资源。
2. 将dist目录内容同步到Apache根目录：

   sudo rm -rf /var/www/html/*
   sudo cp -r /本地Vue项目路径/dist/* /var/www/html/
   sudo chown -R apache:apache /var/www/html
   

3. 处理跨域（如果Vue与API域名/路径不同）：
   在API的Apache配置中添加跨域响应头（生产环境替换*为你的Vue站点域名）：

   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
   Header set Access-Control-Allow-Headers "Content-Type, Authorization"
   

   添加后重启Apache生效。

四、测试与排错 #

• 访问http://your-domain.com验证Vue应用加载及API调用是否正常
• 查看日志定位问题：

  tail -f /var/log/httpd/error.log
  tail -f /var/log/httpd/api_error.log
  

• 检查PHP-FPM运行状态（若启用）：

  sudo systemctl status php-fpm
  

内容的提问来源于stack exchange，提问作者Md. Abdullah Al Rumy