手把手教你用 Spring Boot + Vue 搭建个人博客系统（全栈整合 + 部署篇）-育师

视频看了几百小时还迷糊？关注我，几分钟让你秒懂！

在前两篇中，我们分别完成了：

后端篇：用 Spring Boot 搭建 RESTful API；
前端篇：用 Vue 3 实现文章列表与详情页。

现在，是时候把它们“合体”并部署上线了！本篇将带你完成前后端联调优化、安全加固、本地打包、以及部署到云服务器的全流程，真正拥有一个可对外访问的个人博客！

一、为什么需要整合与部署？

很多教程止步于“本地能跑”，但真正的成就感来自——让全世界都能访问你的博客。
而部署过程中会遇到各种现实问题：

前后端跨域怎么彻底解决？
数据库密码能写死在代码里吗？
Vue 打包后如何和 Spring Boot 一起运行？
如何用免费 HTTPS 让网站更专业？

本篇一一击破！

二、需求场景升级

你现在是一个独立开发者，希望：

✅ 博客能通过https://myblog.example.com访问；
✅ 前端页面加载快、无跨域警告；
✅ 后端配置不泄露敏感信息；
✅ 整个系统稳定运行，重启自动恢复。

三、关键步骤概览

前端打包→ 生成静态文件
后端集成静态资源→ Spring Boot 托管 Vue 页面
配置优化→ 分离配置、关闭跨域（不再需要）
部署到 Linux 服务器（以 Ubuntu 22.04 为例）
配置 Nginx + HTTPS（Let's Encrypt 免费证书）

四、详细实现

步骤 1：Vue 项目打包

在blog-frontend目录下执行：

npm run build

生成dist/文件夹，里面是纯 HTML/CSS/JS 静态资源。

✅ 此时前端已“编译完成”，不再依赖 Node.js 运行时。

步骤 2：Spring Boot 托管前端静态文件

将dist/文件夹整体复制到 Spring Boot 项目的src/main/resources/static/目录下：

blog-backend/ └── src/ └── main/ └── resources/ └── static/ ├── index.html ├── assets/ └── ...

🌟 Spring Boot 默认会将/static下的内容作为静态资源提供服务。
访问http://localhost:8080/就会自动加载index.html！

修改 Vue 路由模式（重要！）

因为现在所有请求都走 Spring Boot，必须支持HTML5 History 模式回退。

修改src/router/index.js：

const router = createRouter({ history: createWebHistory(), // 注意：生产环境不能带 import.meta.env.BASE_URL routes })

并在 Spring Boot 中添加一个兜底控制器，防止刷新 404：

// 新增：FallbackController.java @Controller public class FallbackController { @GetMapping({"/", "/post/{id}"}) public String forward() { return "forward:/index.html"; } }

💡 原理：当访问/post/123时，Spring Boot 找不到 API，就转发给index.html，由 Vue Router 接管路由。

步骤 3：配置分离 & 安全加固

不要把数据库密码写死在application.yml并提交到 Git！

✅ 正确做法：使用外部配置文件或环境变量。

创建application-prod.yml（不提交到 Git）：

spring: datasource: url: jdbc:mysql://localhost:3306/blog_db?useSSL=false&serverTimezone=Asia/Shanghai username: ${DB_USER} password: ${DB_PASSWORD}

启动时指定：

java -jar blog.jar --spring.profiles.active=prod

并在服务器上设置环境变量：

export DB_USER="root" export DB_PASSWORD="your_real_password"

🔒 安全提示：MySQL 用户建议新建专用账号，仅授予blog_db权限。

步骤 4：打包 Spring Boot 项目

确保pom.xml包含打包插件：

<build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>

执行打包：

./mvnw clean package -DskipTests

生成target/blog-0.0.1-SNAPSHOT.jar

步骤 5：部署到云服务器（Ubuntu 22.04）

1. 安装必要软件

# 安装 Java 17（Spring Boot 3 要求） sudo apt update sudo apt install openjdk-17-jre -y # 安装 MySQL sudo apt install mysql-server -y sudo mysql_secure_installation # 创建数据库 sudo mysql -e "CREATE DATABASE blog_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"

2. 上传 JAR 包

用scp或 FinalShell 上传blog.jar到服务器/home/ubuntu/目录。

3. 启动应用（后台运行）

使用nohup或systemd（推荐后者）：

创建服务文件：

sudo nano /etc/systemd/system/blog.service

内容如下：

[Unit] Description=My Personal Blog After=network.target mysql.service [Service] Type=simple User=ubuntu WorkingDirectory=/home/ubuntu ExecStart=/usr/bin/java -jar /home/ubuntu/blog.jar --spring.profiles.active=prod Environment=DB_USER=root Environment=DB_PASSWORD=your_password_here Restart=always [Install] WantedBy=multi-user.target

启用并启动：

sudo systemctl daemon-reload sudo systemctl enable blog sudo systemctl start blog

检查状态：

sudo systemctl status blog

此时博客可通过http://你的服务器IP:8080访问！

步骤 6：配置 Nginx + HTTPS（免费！）

1. 安装 Nginx

sudo apt install nginx -y sudo ufw allow 'Nginx Full'

2. 配置反向代理

sudo nano /etc/nginx/sites-available/blog

server { listen 80; server_name your-domain.com; # 替换为你的域名 location / { proxy_pass http://localhost: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; proxy_set_header X-Forwarded-Proto $scheme; } }

启用配置：

sudo ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/ sudo nginx -t && sudo systemctl reload nginx

3. 申请免费 HTTPS 证书（Let's Encrypt）

sudo apt install certbot python3-certbot-nginx -y sudo certbot --nginx -d your-domain.com

按提示操作，Certbot 会自动修改 Nginx 配置并启用 HTTPS！

✅ 现在访问https://your-domain.com就能看到你的博客，并且浏览器显示“安全锁”！

五、反例 & 注意事项

❌ 反例：直接暴露 8080 端口给公网

不安全（容易被扫描攻击）；
无法使用标准 80/443 端口（用户需手动输端口）。

✅ 正确做法：用 Nginx 反向代理 + 防火墙限制 8080 仅本地访问。

sudo ufw deny 8080 # 禁止外网访问 8080

❌ 反例：把敏感配置提交到 GitHub

# application.yml（危险！） password: 123456

✅ 正确做法：使用.gitignore忽略配置文件，或用环境变量。

⚠️ 注意事项

域名解析：提前在 DNS 服务商（如阿里云、Cloudflare）将域名指向服务器 IP；
防火墙：确保云服务器安全组开放 80/443 端口；
日志查看：journalctl -u blog -f实时查看后端日志；
自动续期：Certbot 证书 90 天过期，但会自动续期（检查systemctl list-timers）。

六、最终效果

✅ 域名访问：https://myblog.example.com
✅ 响应式页面：手机/电脑都能看
✅ 安全 HTTPS：浏览器显示绿色锁
✅ 自动重启：服务器宕机后服务自恢复

七、后续可扩展功能

功能	技术方案
后台管理	Vue + Element Plus + JWT 登录
Markdown 编辑	使用`@bytemd/vue`或`vditor`
评论系统	新增评论表 + 邮件通知
SEO 优化	Vue SSR（Nuxt.js）或预渲染
图片上传	阿里云 OSS / 本地存储