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

一、前言

在当今的Web开发领域，前后端分离架构已成为主流。前端使用Vue.js等框架构建用户界面，后端则采用SpringBoot等框架提供API服务。将这样的项目部署到云服务器上，并使用宝塔面板进行管理，可以大大提高部署效率和运维便捷性。本文将详细介绍整个部署流程，帮助开发者快速上手。

二、环境准备

1. 云服务器选择

选择一台适合的云服务器是部署的第一步。推荐选择配置较高的服务器，如2核4G或更高，操作系统建议选择CentOS 7或Ubuntu 20.04等主流Linux发行版。购买后，确保服务器已开通SSH访问权限，并记录下服务器的公网IP地址。

2. 宝塔面板安装

宝塔面板是一款简单易用的服务器管理软件，支持一键安装Web服务器、数据库、FTP等常用服务。在服务器上执行以下命令安装宝塔面板（以CentOS为例）：

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

安装完成后，访问宝塔面板的Web界面（通常是http://服务器IP:8888），使用初始用户名和密码登录。

3. 开发环境准备

• 前端Vue项目：确保本地已安装Node.js和npm（或yarn），并创建好Vue项目。
• 后端SpringBoot项目：确保本地已安装JDK和Maven（或Gradle），并创建好SpringBoot项目。

三、项目构建

1. 前端Vue项目构建

在Vue项目根目录下执行以下命令构建生产环境代码：

npm run build
# 或使用yarn
yarn build

构建完成后，会在dist目录下生成静态文件，包括HTML、CSS、JS等。

2. 后端SpringBoot项目构建

在SpringBoot项目根目录下执行以下命令构建JAR包：

mvn clean package
# 或使用Gradle
gradle build

构建完成后，会在target目录下生成JAR包，如your-project-0.0.1-SNAPSHOT.jar。

四、服务器配置

1. 宝塔面板设置

登录宝塔面板后，进行以下设置：

• 网站管理：添加一个网站，设置域名（可选，若没有域名可暂时使用服务器IP访问），并指定网站根目录为前端Vue项目的dist目录。
• SSL证书：若已有域名，可为网站申请并配置SSL证书，启用HTTPS。
• 防火墙设置：确保80（HTTP）、443（HTTPS）和后端SpringBoot项目使用的端口（如8080）已开放。

2. 数据库配置（如需要）

若SpringBoot项目需要连接数据库，可在宝塔面板中安装MySQL或MariaDB，并创建数据库和用户，配置相应的连接信息。

3. 后端服务部署

将构建好的SpringBoot JAR包上传到服务器上的一个指定目录，如/opt/springboot。然后，使用宝塔面板的“计划任务”功能或直接在SSH中执行以下命令启动后端服务：

nohup java -jar /opt/springboot/your-project-0.0.1-SNAPSHOT.jar > /dev/null 2>&1 &

此命令将以后台方式运行SpringBoot应用，并将输出重定向到/dev/null。

五、前后端联调与测试

1. 配置前端请求地址

在Vue项目的src/main.js或src/utils/request.js等文件中，配置后端API的请求地址。若前端和后端部署在同一服务器上，可使用相对路径或服务器IP加端口的方式配置，如：

// 示例：配置axios的baseURL
axios.defaults.baseURL = 'http://服务器IP:8080/api';

2. 测试访问

在浏览器中访问前端网站的域名（或服务器IP），检查页面是否正常加载，并测试API请求是否能成功返回数据。

六、高级配置与优化

1. Nginx反向代理

为了提升性能和安全性，可使用Nginx作为反向代理服务器。在宝塔面板中安装Nginx，并配置反向代理规则，将前端请求转发到后端SpringBoot服务。示例配置如下：

server {
    listen 80;
    server_name your-domain.com;
    location / {
        root /path/to/vue/dist;
        try_files $uri $uri/ /index.html;
    }
    location /api {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

2. 日志与监控

配置日志记录和监控，以便及时发现和解决问题。宝塔面板提供了日志查看和监控功能，也可集成第三方监控工具如Prometheus和Grafana。

七、总结与展望

通过本文的详细介绍，相信读者已经掌握了将前后端分离项目（前端Vue、后端SpringBoot）部署到云服务器，并使用宝塔面板进行管理的全流程。随着项目的不断发展，可能需要进一步优化性能、提升安全性、实现自动化部署等。希望本文能为读者的项目部署和运维工作提供有益的参考和启示。