前后端分离架构项目部署指南
一、部署架构概述
优先选择低成本 + 易操作的组合：
- 前端：免费静态托管平台（Netlify/Vercel，无需服务器）或云服务器
- 后端：云服务器（学生机，每月 9 元起）
- 数据库：云服务器内置 MySQL（或用免费云数据库）
下文主要介绍全服务器部署方式，即前后端都部署到云服务器上。
二、第一步：部署前端（Vue 项目）
1. 本地打包前端代码
在 Vue 项目根目录执行命令，生成静态文件目录 dist：
npm run build
2. 部署到 Netlify（可选）
如果是全服务器部署，此步骤可以跳过。若选择独立部署：
- 把前端代码推到 GitHub/Gitee 仓库。
- 打开 Netlify 官网，用 GitHub/Gitee 账号登录。
- 点击「Add new site」→「Import an existing project」，选择你的前端仓库。
- 配置构建参数（Netlify 会自动识别 Vue 项目）：
- 构建命令：
npm run build - 发布目录：
dist
- 构建命令：
- 点击「Deploy site」，等待 2 分钟，Netlify 会生成一个免费域名。
三、第二步：部署后端（Java/SpringBoot）
1. 购买学生云服务器
推荐腾讯云轻量应用服务器（学生机）：
- 价格：2 核 2G/1M 带宽，每月 9 元（需学生认证）
- 系统：选 CentOS 7.x（Linux 系统，稳定常用，宝塔面板部署）
2. 服务器环境配置（使用宝塔面板）
登录腾讯云服务器控制台，通过「WebShell」登录服务器。 安装宝塔面板（可视化管理服务器）：
wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh
⚠️ 注意：这个命令只需要输入一次，记住给的账号和密码。重复运行会导致内存挤压，程序崩溃。
安装完成后，记录宝塔的登录地址（如 http://服务器 IP:8888）、账号密码。
登录宝塔面板，一键安装「LNMP 套件」（包含 Nginx/MySQL/Node.js）。
⚠️ 如果忘记宝塔界面登录密码，重置方法： 打开终端面板，输入
bt default指定查看或重置面板信息。
四、第三步：部署数据库（MySQL）
- 宝塔面板 → 「软件商店」→ 安装 MySQL 8.0。
- 点击「设置」→「数据库」→「添加数据库」：
- 数据库名：
quiz_db - 用户名 / 密码：自定义（如
quiz_user/123456）
- 数据库名：
- 导入本地数据库脚本：
- 本地导出 SQL 文件，在宝塔「数据库」→「导入」上传 SQL 文件。
⚠️ 常见报错处理： 如果出现
mysqldump: [ERROR] unknown variable 'collation=utf8mb4_general_ci'，通常是因为本地 DataGrip 连接的是 MySQL 8.0 版本，导出的 SQL 里自带了高版本专属的排序规则，而服务器宝塔的 MySQL 版本是 5.7/5.6 版本，不认识这个高版本规则。建议统一版本或在导出时调整 collation 设置。
五、第四步：连接前后端 + 配置域名
1. 后端配置数据库
修改 SpringBoot 项目的 application.yml，将数据库连接改为服务器的 MySQL：
spring:
datasource:
url: jdbc:mysql://服务器 IP:3306/quiz_db?useSSL=false&serverTimezone=Asia/Shanghai
username: quiz_user
password: 123456
2. 打包并启动后端服务
- 本地打包 SpringBoot 项目为 jar 包：IDEA 中执行
mvn package，生成target/xxx.jar。 - 上传 jar 包到服务器：宝塔面板 → 「文件」→ 新建目录（如
/www/backend），上传 jar 包。 - 启动后端服务：
- 安装「PM2 管理器」、「Java 项目项目管理器」（宝塔软件商店）。
- 点击左侧导航栏「网站」→「Java 项目」：
- 项目名称：自定义（如
quiz-backend） - 启动文件：选择上传的 jar 包
- 启动命令：
java -jar xxx.jar --server.port=8080（指定端口）
- 项目名称：自定义（如
3. 使用 Nginx 进行反向代理
- 「网站」→「PHP 项目」→「添加站点」。
- 前端打包成静态资源放在和 jar 同一目录下。
- 完成创建后项目会自动启动，后端服务在服务器 8080 端口运行。
六、最终访问与方案对比
方案一：全服务器部署（HTTP）
- 操作：将前后端都部署在云服务器上，使用 HTTP 请求和默认 80 端口，将前端项目打包，上传至后端项目所在文件夹，使用 Nginx 进行反向代理。
- 优势：零额外成本（无需买域名、SSL 证书），适合个人测试、小型 demo 或非公开项目。
- 缺点：HTTP 有安全性缺陷（数据传输未加密），无法使用需要 HTTPS 的功能（如浏览器定位、PWA）。前端静态资源和后端 API 都依赖同一台服务器的带宽和性能。
- Nginx 作用：监听服务器的 80 端口，当用户访问
http://服务器 IP时，Nginx 会转发请求——静态资源直接返回前端文件，API 请求转发到后端的 8080 端口。
方案二：Netlify 前端 + 服务器后端（HTTPS）
- 操作：前端部署在 Netlify CDN，后端服务器配置 SSL 证书，让后端接口支持 HTTPS。
- 优势：生产级正式性（HTTPS 加密、自定义域名），前端静态资源由 CDN 加载，用户访问页面更快，后端仅需处理 API 请求，服务器压力更小。
- 注意：若前端（HTTPS）调用后端（HTTP）仍会被浏览器拦截（混合内容错误）。需购买域名，申请 SSL 证书，并遵守备案规则。
简言之，方案一更加省钱，方案二是更为正式稳健的一种部署方案。
