概述

前后端分离架构已成为现代Web开发的标配：前端使用Vue、React等框架生成静态文件，后端提供RESTful API。本文以宝塔面板为例，详细说明如何在主机面板环境下快速搭建前后端分离站点，涵盖环境配置、项目部署、反向代理及SSL证书安装等核心步骤。

准备工作

确保您已拥有一个云服务器或VPS，并安装好Linux操作系统（如CentOS 7+ 或 Ubuntu 20.04+）。登录SSH后，通过以下指令安装宝塔面板：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

安装完成后记录面板登录地址、账号和密码。进入面板后，在软件商店安装Nginx、MySQL、PHP（可选）等运行环境。

第一步：创建后端站点

1. 添加站点

在宝塔面板左侧菜单选择“网站” -> “添加站点”，输入您后端的域名（例如 api.yourdomain.com），选择PHP版本（如纯静态或PHP-74），根目录建议设为 /www/wwwroot/api.yourdomain.com，并创建MySQL数据库。

2. 上传后端代码

通过FTP或面板自带的文件管理，将后端项目打包文件上传至上述根目录。若为Node.js后端，需先安装PM2管理器：在软件商店安装“PM2管理器”，然后通过SSH进入项目目录执行 npm install && pm2 start app.js。若为Java/PHP，确保已配置好运行环境。

第二步：部署前端静态文件

1. 添加前端站点

再次点击“添加站点”，输入前端域名（例如 www.yourdomain.com 或直接使用顶级域名），选择“纯静态”，根目录设为 /www/wwwroot/frontend。

2. 上传前端构建产物

将本地Vue/React项目运行 npm run build 后生成的 dist 文件夹内的所有文件上传至前端根目录。

第三步：配置反向代理

前后端跨域通信需要Nginx反向代理。编辑前端站点的配置文件（在网站设置 -> 配置文件）：

server {
    listen 80;
    server_name www.yourdomain.com;
    root /www/wwwroot/frontend;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:3000/;  # 假设后端运行在3000端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

上述配置将所有 /api/ 路径的请求转发到后端服务，并确保前端单页应用（SPA）的路径重写。

第四步：配置域名解析与SSL

1. 解析域名：在DNS服务商处将前端域名（如 www.yourdomain.com）和后端域名（如 api.yourdomain.com）都解析到服务器IP。
2. 申请SSL证书：在宝塔面板的“网站”设置中，点击“SSL” -> “Let‘s Encrypt”，勾选前端和后端站点，一键申请并开启强制HTTPS。

第五步：测试与优化

访问前端域名，确认页面正常显示；打开浏览器开发者工具，检查网络请求中API接口是否跨域或返回错误。若后端使用JWT等Token验证，需确保前端在请求头中携带认证信息。另外可配置Nginx缓存、Gzip压缩等提升性能。

常见问题

• CORS错误：后端需设置响应头 Access-Control-Allow-Origin 或使用反向代理同源策略。
• 404刷新问题：前端SPA需在Nginx中添加 try_files $uri $uri/ /index.html; 规则。
• 端口冲突：确保后端服务端口未被占用，并在面板放行对应端口（安全组规则）。

通过以上步骤，您即可在主机面板上快速搭建一套完整的前后端分离站点。此方法同样适用于WDCP、AMH等其他面板，仅操作路径略有差异。