前后端分离项目部署到云服务器、宝塔（前端vue、后端springboot）详细教程

一、部署前准备

1.1 云服务器选择与配置

选择云服务器时，需根据项目规模确定配置：

• 基础配置：2核4G内存（适合中小型项目），建议选择CentOS 7/8或Ubuntu 20.04 LTS系统。
• 网络配置：确保服务器带宽≥5Mbps，开放80（HTTP）、443（HTTPS）、8080（后端端口）等关键端口。
• 安全组规则：在云平台控制台配置安全组，允许入站流量通过指定端口（如80、443、8080）。

1.2 宝塔面板安装

宝塔面板简化服务器管理，安装步骤如下：

1. SSH连接服务器：使用终端工具（如Xshell、Putty）通过SSH协议连接服务器。
2. 执行安装命令：

   # CentOS 7/8
   yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
   # Ubuntu 20.04
   wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

3. 访问宝塔面板：安装完成后，记录面板地址、用户名和密码，通过浏览器访问。

1.3 环境依赖安装

在宝塔面板中安装必要软件：

• Nginx：用于前端静态资源托管和反向代理。
• MySQL 5.7+：后端数据库（如使用其他数据库如PostgreSQL，需额外配置）。
• JDK 1.8+：SpringBoot运行环境。
• Maven 3.6+：后端项目构建工具。
• Node.js 14+：Vue项目构建依赖。

二、前端项目部署（Vue.js）

2.1 项目构建

1. 本地构建：

   # 进入前端项目目录
   cd /path/to/vue-project
   # 安装依赖
   npm install
   # 构建生产环境包
   npm run build

   生成dist目录，包含静态资源（HTML、CSS、JS）。

2. 上传至服务器：

   • 通过宝塔面板的“文件”功能，将dist目录上传至服务器指定路径（如/www/wwwroot/frontend）。

2.2 Nginx配置

1. 添加站点：

   • 在宝塔面板的“网站”模块中，点击“添加站点”。
   • 填写域名（如example.com），根目录选择前端项目路径（如/www/wwwroot/frontend）。
   • 开启SSL（如需HTTPS），申请免费证书（Let’s Encrypt）。

2. 配置反向代理：
   修改Nginx配置文件（通常位于/www/server/nginx/conf/nginx.conf或站点配置文件），添加反向代理规则：

   location /api/ {
       proxy_pass http://127.0.0.1:8080/;  # 后端SpringBoot地址
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
   }

   重启Nginx生效。

三、后端项目部署（SpringBoot）

3.1 项目打包

1. Maven构建：

   # 进入后端项目目录
   cd /path/to/springboot-project
   # 清理并打包
   mvn clean package

   生成target/your-project.jar文件。

2. 上传JAR包：

   • 通过宝塔面板的“文件”功能，将JAR包上传至服务器（如/www/wwwroot/backend）。

3.2 运行配置

1. 使用Screen运行（避免SSH断开后进程终止）：

   # 安装screen（如未安装）
   yum install -y screen  # CentOS
   apt install -y screen  # Ubuntu
   # 创建并进入screen会话
   screen -S springboot
   # 运行JAR包
   java -jar /www/wwwroot/backend/your-project.jar --server.port=8080
   # 按Ctrl+A+D退出screen会话（进程继续运行）

2. 宝塔计划任务（可选）：

   • 在宝塔面板的“计划任务”模块中，添加任务类型为“Shell脚本”，内容为启动命令，设置为“启动时执行”。

3.3 数据库配置

1. 创建数据库：

   • 在宝塔面板的“数据库”模块中，添加MySQL数据库，记录用户名、密码和数据库名。

2. 修改后端配置：

   • 修改application.yml或application.properties，配置数据库连接：

     spring:
       datasource:
         url: jdbc//localhost:3306/your_db?useSSL=false&serverTimezone=UTC
         username: your_username
         password: your_password

四、安全与优化

4.1 防火墙设置

• 在宝塔面板的“安全”模块中，放行必要端口（80、443、8080、3306）。
• 关闭无用端口（如22默认SSH端口可修改为其他端口）。

4.2 HTTPS配置

• 通过宝塔面板的“SSL”功能，为域名申请并配置Let’s Encrypt证书。
• 强制HTTPS跳转：在Nginx配置中添加：

  if ($scheme != "https") {
      return 301 https://$host$request_uri;
  }

4.3 性能优化

• 前端优化：启用Gzip压缩（在Nginx中配置gzip on;）。
• 后端优化：调整JVM参数（如-Xms512m -Xmx1024m）。

五、常见问题解决

5.1 端口冲突

• 错误现象：后端启动失败，提示“Port 8080 is already in use”。
• 解决方案：
  1. 查找占用端口的进程：netstat -tulnp | grep 8080。
  2. 终止进程：kill -9 [PID]，或修改后端端口。

5.2 跨域问题

• 错误现象：前端调用后端接口报错“CORS policy blocked”。
• 解决方案：
  • 在SpringBoot中配置全局跨域：

    @Configuration
    public class CorsConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                    .allowedHeaders("*");
        }
    }

六、总结

通过宝塔面板部署前后端分离项目，可显著降低运维复杂度。关键步骤包括：

1. 服务器与环境准备。
2. 前端构建与Nginx配置。
3. 后端打包与运行管理。
4. 安全优化与问题排查。

建议开发者在部署后进行全面测试，包括功能测试、性能测试和安全测试，确保项目稳定运行。