项目概述

本文记录通过 宝塔面板 v11.6.0 在阿里云 Ubuntu 22.04 服务器上部署 SpringBoot + Vue 全栈项目的完整流程。

整体架构如下：

1
2
3
4
5
6
7
用户请求
   ↓
Nginx（80/443 端口）
   ├── /          → 前端静态文件（dist 目录）
   └── /api/**    → 反向代理 → SpringBoot 后端（9090 端口）
                          ↓
                    MySQL 8.0.35（3306 端口）

一、服务器环境准备

1.1 服务器信息

配置项 说明
云服务商 阿里云 ECS
操作系统 Ubuntu 22.04.5 LTS（64 位）
面板版本 宝塔面板 v11.6.0

1.2 开放安全组端口

登录阿里云控制台，进入 云服务器 ECS → 安全组 → 配置规则，添加以下入方向规则：

端口 用途
80 HTTP 访问（Nginx）
443 HTTPS 访问（SSL）
9090 SpringBoot 后端服务
3306 MySQL 数据库（可限制来源 IP）
8888 宝塔面板默认端口

安全建议：3306 端口建议只对特定 IP 开放，避免数据库暴露在公网。

1.3 记录公网 IP

在阿里云控制台 实例详情 页获取服务器公网 IP，后续 SSH 连接和域名解析都需要用到。

二、安装宝塔面板

2.1 SSH 连接服务器

使用终端工具（如 Xshell、MobaXterm）通过 SSH 连接服务器：

1
ssh root@你的公网IP

2.2 执行安装命令

执行宝塔官方 Ubuntu 安装脚本：

1
wget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

安装完成后，终端会输出宝塔面板的访问地址及初始账号密码，格式如下：

1
2
3
4
5
6
==================================================================
Congratulations! Installed successfully!
BT-Panel: http://公网IP:8888/xxxxxx
username: xxxxxxxx
password: xxxxxxxx
==================================================================

2.3 初始化登录

  1. 复制终端输出的面板地址，在浏览器中访问
  2. 输入初始用户名和密码登录
  3. 首次登录会提示修改密码，建议设置强密码

三、安装组件环境

3.1 进入软件商店

登录宝塔面板后，点击左侧菜单 软件商店，搜索并安装以下组件：

组件 版本 用途
MySQL 8.0.35 数据库服务
OpenJDK 21 运行 SpringBoot 后端
Nginx 1.26.3 反向代理 + 前端部署
PHP 7.4.33 宝塔面板内部依赖
phpMyAdmin 5.0 数据库可视化管理

注意：安装顺序建议先装 MySQL，再装 Nginx，最后装 Java。安装过程中请耐心等待，不要关闭页面。

3.2 验证安装结果

安装完成后，在 软件商店 → 已安装 中确认各组件状态均为”运行中”。

四、数据库配置

4.1 创建数据库

在宝塔面板中，点击左侧 数据库 → 添加数据库：

  • 数据库名：填写项目数据库名
  • 用户名：建议使用与数据库名相同的名称
  • 密码：设置强密码
  • 访问权限：选择”本地服务器”（安全起见，不建议选择”所有人”）

4.2 导入 SQL 数据

方式一：通过 phpMyAdmin 导入（推荐）

  1. 在宝塔面板点击数据库右侧的 管理 按钮，进入 phpMyAdmin
  2. 选择对应数据库，点击 导入 选项卡
  3. 上传 .sql 文件，点击执行

方式二：通过命令行导入

1
2
3
4
5
6
7
8
# 登录 MySQL
mysql -u root -p

# 切换到目标数据库
USE your_database_name;

# 导入 SQL 文件
SOURCE /path/to/your_file.sql;

4.3 验证数据

导入完成后，在 phpMyAdmin 中执行简单查询，确认数据正确导入：

1
SELECT COUNT(*) FROM 你的表名;

五、后端服务部署

5.1 打包 SpringBoot 项目

在本地项目根目录执行 Maven 打包命令：

1
2
# 跳过测试，直接打包
mvn clean package -DskipTests

打包成功后，在 target/ 目录下生成 .jar 文件，如 your-project-1.0.0.jar。

5.2 上传 JAR 文件

在宝塔面板中，点击左侧 文件，进入 /www/wwwroot/ 目录：

  1. 新建目录，如 backend
  2. 点击上传，选择本地的 .jar 文件

或使用 SCP 命令上传：

1
scp target/your-project.jar root@公网IP:/www/wwwroot/backend/

5.3 配置数据库连接

确认后端项目的 application.yml 中数据库连接配置与宝塔创建的数据库一致：

1
2
3
4
5
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/your_database?useUnicode=true&characterEncoding=utf8
    username: your_db_user
    password: your_db_password

5.4 启动后端服务

在宝塔面板 终端 或 SSH 中执行：

1
2
# 后台运行，并将日志输出到 nohup.out
nohup java -jar /www/wwwroot/backend/your-project.jar > /www/wwwroot/backend/nohup.out 2>&1 &

查看启动日志：

1
tail -f /www/wwwroot/backend/nohup.out

出现 Started Application in X seconds 表示启动成功。

5.5 设置开机自启（可选）

在宝塔面板 计划任务 中添加开机启动脚本，或使用 systemd 管理服务：

1
2
# 创建 systemd 服务文件
nano /etc/systemd/system/backend.service
1
2
3
4
5
6
7
8
9
10
11
12
13
[Unit]
Description=SpringBoot Backend Service
After=network.target

[Service]
User=root
ExecStart=/usr/bin/java -jar /www/wwwroot/backend/your-project.jar
SuccessExitStatus=143
Restart=always
RestartSec=10

[Install]
WantedBy=multi-user.target
1
2
3
# 启用并启动服务
systemctl enable backend
systemctl start backend

六、前端项目部署

6.1 打包前端项目

在本地前端项目根目录执行：

1
2
3
4
5
# 安装依赖
npm install

# 生产环境打包
npm run build

打包完成后，在项目目录下生成 dist/ 文件夹，包含所有静态资源。

6.2 上传 dist 文件夹

在宝塔面板 文件 中，进入 /www/wwwroot/ 目录：

  1. 新建目录，如 frontend
  2. 将本地 dist/ 目录下的所有文件上传至该目录

或使用 SCP 批量上传：

1
scp -r dist/* root@公网IP:/www/wwwroot/frontend/

七、域名解析配置

7.1 添加 DNS 解析

登录域名注册商控制台（如阿里云、腾讯云等），进入 域名解析 页面，添加以下记录：

记录类型 主机记录 记录值
A @ 服务器公网 IP
A www 服务器公网 IP

7.2 等待生效

DNS 解析通常在 5 分钟至 24 小时 内生效，可通过以下命令检查是否解析成功：

1
ping your-domain.com

八、Nginx 配置

8.1 在宝塔添加网站

在宝塔面板中，点击 网站 → 添加站点：

  • 域名：填写已解析的域名（如 www.your-domain.com）
  • 根目录：选择 /www/wwwroot/frontend
  • PHP 版本：选择”纯静态”

8.2 配置前端伪静态

Vue / React 等单页应用需要配置伪静态，防止刷新页面出现 404。

在网站设置中点击 伪静态，选择 vue 或手动填写以下规则：

1
2
3
location / {
    try_files $uri $uri/ /index.html;
}

8.3 配置反向代理

在网站设置中点击 反向代理 → 添加反向代理：

  • 代理名称：api
  • 目标 URL：http://127.0.0.1:9090
  • 发送域名：$host

对应的 Nginx 配置如下：

1
2
3
4
5
6
7
location /api/ {
    proxy_pass http://127.0.0.1:9090/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header HTTPS "on";
}

8.4 配置 SSL 证书（可选）

在宝塔面板网站设置中，点击 SSL，可申请免费的 Let’s Encrypt 证书，开启 HTTPS 访问。

九、启动与验证

9.1 服务启动顺序

按照以下顺序依次确认服务运行状态：

  1. MySQL：宝塔面板 → 数据库 → 确认 MySQL 运行中
  2. Nginx：宝塔面板 → 网站 → 确认 Nginx 运行中
  3. 后端服务：执行 ps -ef | grep java 确认进程存在

9.2 访问验证

验证项 访问地址 预期结果
前端页面 http://your-domain.com 正常显示首页
后端接口 http://your-domain.com/api/xxx 返回正确 JSON
phpMyAdmin 宝塔面板 → 数据库 → 管理 正常访问数据库

9.3 常见问题排查

前端显示空白页

  • 检查 dist 文件是否完整上传
  • 检查伪静态规则是否配置正确
  • 打开浏览器控制台，查看是否有资源 404 错误

后端接口无法访问

  • 检查 9090 端口是否在安全组中开放
  • 执行 curl http://127.0.0.1:9090/你的接口路径 验证服务是否正常
  • 查看后端日志 nohup.out 排查启动错误

数据库连接失败

  • 确认 application.yml 中数据库名、用户名、密码与宝塔配置一致
  • 检查 MySQL 服务是否正常运行

总结

通过以上步骤，成功完成了基于宝塔面板的 SpringBoot + Vue 项目云端部署。整个流程涵盖：

  1. 服务器安全组配置与宝塔面板安装
  2. MySQL、Nginx、OpenJDK 等核心组件部署
  3. 数据库创建与数据导入
  4. 后端 JAR 包部署与进程管理
  5. 前端静态资源部署与路由配置
  6. 域名解析与 Nginx 反向代理配置

宝塔面板将复杂的服务器运维操作可视化，极大降低了部署门槛，适合中小型项目快速上线使用。